如何学习页面重构/对页面重构理解_html/css_WEB-ITnose

笔者是前端小白一枚，在往前端页面重构方向学习成长中，今天花了一天时间学习相关的文章

在这里集合一些关于重构基础概念和成长建议，希望能对想了解和学习页面重构的同学有所帮助

文章中提到的相关文章均说明链接地址，利于说明文章来源，也方便读者深入探讨

抱着学习的态度看这些文章，我也希望能够在文章中加入自己学习的一些想法，欢迎大家评论探讨

 

/*==========================正文分割线=========================*/

 

学前端的小白第一次听到页面重构会问，前端工程师和重构工程师有什么区别？

那么下面在知乎上的问题可以让你有一定的理解

 

前端工程师和网页重构工程师二者有什么区别和联系？

来自

【前端开发工程师】的工作内容是使用 JavaScript、ActionScript 等语言编写客户端脚本，实现动态效果。比如：AJAX 提交文章评论、通过本地存储保存用户历史浏览记录等等。偏开发。

【网页重构工程师】的工作内容是通过编写 CSS、合理化页面结构来实现页面效果和提升性能。比如：对页面进行微数据处理和SEO、页面样式统一等等。 偏设计。

前者的重点在 JavaScript、ActionScript，甚至 iOS、Android客户端程序；而后者的重点在 HTML、CSS、SEO 等。

两者技术重叠度很高，在阿里巴巴、淘宝和支付宝没有这样分工，均称为【前端开发工程师】，上面的技能都要懂。而在腾讯，WOYO 等公司有明确的分工，但据我所知，以上技能他们也都懂的。

对于两者的区别，我没有专门考究，仅听朋友云云和自己的理解，希望能帮到你。

 

作者：吴钊

链接：https://www.zhihu.com/question/19858246/answer/13172448

来源：知乎

 

我有写过一篇关于这两者的对比

1、页面重构需要具备足够的耐心，反反复复；js工程师要不重复自己。

2、页面重构需要了解设计师的想法；js工程师需要了解后端工程师的想法。

3、页面重构偏艺术，需要想象力；js工程师偏程序，需要逻辑思维。

4、页面重构要关注css3，用代码实现各种效果；js工程师要关注html5，了解新的js api。

 

作者：周文彬

链接：https://www.zhihu.com/question/19858246/answer/14726052

来源：知乎

 

 /*======================分割线========================*/

 

看完了知乎上的回答，你可能会觉得回答的内容有些抽象，那到底重构是做什么的？

页面重构师

页面重构师，从事的工作简单的说就是“将设计稿转换成web页面”，工作内容可以简单到直接把PSD从PS里导出成网页，也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。

单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。

重构不单是做出页面，而是做出好页面：

1.结构完整，可通过标准验证

2.标签语意化，结构合理

3.充分考虑到页面在站点中的作用和重要性，并对其进行有针对性的优化

一、设计稿的分析——对设计稿的分析能力

1. 能分清设计稿中的公共与私有的部分

2. 在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）

3. 在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）

4. 在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）

5. 在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）

上面这些都是在还没开始动手制作之前所要做的。

二、切图

切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，

怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。

切图也可以划分成几个阶段：

1. 切成所需要的图片（如何将需要的部分切出来）

2. 在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）

3. 在2的基础上，规划切出来的图片（包括文件分布）

4. 在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小）

三、HTML和CSS的编写

HTML和CSS的编写是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：

1. 还原设计稿视觉效果，并通过标准验证（HTML）

2. 在1的基础上，实现多浏览器的兼容（HTML）

3. 在2的基础上，标签语义化（HTML）

4. 在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS）

5. 在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）

6. 在5的基础上，考虑到整站的样式分布（包括如何实现分布）

7. 在6的基础上，样式写法的优化（包括技巧的应用）

还有一点是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。

如果你已经达到或超过3、4、5，恭喜你，你已经是一个职业的“页面重构工作者”了。为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧。

来自

/*========================分割线========================*/

 

页面重构的工作内容你已经知道了， 那么你还有一个很重要的方面要注意，那就是与网页设计师的沟通配合

 

干货！网页设计与重构那些事儿

http://www.uisdc.com/website-reconstruction

 

另一个话题：与重构有关的，有时候设计师也不断的抱怨页面仔做出的页面没有设计稿上的好看，不是间距大了就是间距小了，不是字体小了就是字体大了，不是图片压缩的太厉害就是压根图片切少了，或者动画也不是我们想要的效果。。。。越到这些我不能全怪他们，我们也有责任，毕竟他们不是设计，但是我个人的观点是重构需要一些PS技巧或设计理论，在设计师没有时间走查页面的时候也能输出比较高质量的页面。

市面上大大小小的浏览器几十种，常见的大致也有十来种，由于每个浏览器自身渲染页面的差异，并不是同一个页面在所有浏览器上看到的都一样，我大致用90%的还原度来衡量吧，也可能有些设计师要求重构100%还原，那我表示那位重构相当苦逼，保证页面跟设计稿90%一致，有不少工作需要设计师和重构共同参与的，比喻设计师在时间允许的情况下做好标注，哪个地方多少像素，用什么颜色值，高度是多少等标注在页面上。

重构者不关关注代码本身，也可以跳出代码看看视觉表现层，如果确实对几像素看不出来，可以截图放在psd上做对比，这个方法很容易自己发现问题，成本也比较低。

在表格做网页时期，图片和图标几乎都是单个的，加载一张图片就是一次http请求，服务器就要读取一次，频繁的读取再加上大量的用户不断的访问，很可能让服务器承受不起而挂机。因此需要尽可能的减少http请求，合并背景图是一个很有效的办法。

通常背景图的输出质量百分比可以调在60-80%，对比较重要的icon、图片可以调为100%输出高质量图片。

在网页加载过程中，或因为网速原因图片暂时没有加载出来而出现短时间空白，建议给该区域预先定义好背景色，以提示用户该区域是有内容的。

鼠标停在图片上时，适当的添加title或者alt，以方便用户在图片加载失败时可以知道这张图片是干什么用的。

按需加载，异步加载，类似苹果官网上很多地方用到了异步加载，好处是提高主要页面的加载速度，用户需要的时候才加载其他附件页面。

少用CSS滤镜，现在应该很少人用了，基本都是采用优雅降级或提示用户升级浏览器。

网站上线前压缩CSS和JS文件，注意记得备份。

 

我喜欢用这个词，虽然自己并没有达到代码优雅，做到代码优雅还需要不断的努力，一些细节足够让专家看到你是否具备职业化素养，这里就不班门弄斧了，还是看图吧~

作者：@Lerroyli 腾讯MIG无线研发部网页美术设计师

 

/*======================分割线===================*/

 

张鑫旭大大则是在他的博文中引入了"门派"的观点，文章非常长。

在学习过程中也经常能搜到张鑫旭大大相关博文，每一篇文章都特别有张鑫旭独特文风，

作为一个前端入门者，在此表示深深的感谢

强烈建议能看到这里的读者可以去拜访张鑫旭大大的原版博文，相信读者会对重构有一个更深的理解。

在这里截取部分文末作者写文的初衷和希冀。

 

CSS页面重构之“门派”之分

五、CSS页面重构“门派”意识与包容心

为何要提出“门派”这个概念，我想我希望大家都能以一颗包容的心态对看到其他同行的CSS代码以及页面重构方式。

就拿上面QQ校友按钮与自适应按钮的例子举例吧，可能有些同行在使用某一个按钮时发现这个按钮的虚框不对称，可能心中就会暗想，这个网站或者这个页面制作人员不重视细节，离我还是有些差距的；可能有喜欢自适应按钮的同行看到QQ校友或是其他很多网站定宽按钮时，会暗想，这些网站的前端技术真是不咋地，按钮一点重用性都没有。

最后的结果可能是相互鄙视与不屑。

其实大可不必，我是体会到了一颗包容的海纳百川的心态对于自身的成长非常的重要。

千万不要拿着自己的那套准则趋评判别人的代码，去指手划脚。

您站在直线的A点，怎么能轻易的就明白B点处所包含的思想呢。

我们应该做的是以一颗开放的心态去看待别人您目前看似不屑的代码与页面重构方式，并从中学习到新的东西。

这种心态决定了我们成长的高度。我们要一直保持饥渴的状态，不要固守自己的那套东西，灵活，吸收与变化。

所以，您要是发现某个页面某处在IE6下有3像素的偏移，不要轻易断言，这里是个bug，这个页面工程师火候不够。

或许是这个工程师更看重的页面扩展性与CSS代码的数量，对这种一般用户根本不会注意的问题，其没有必要再写一个hack去解决；

您要是看到页面上的按钮将文字也作为图片切进去了，不要觉得这个工程师功力不够，觉得这样子按钮毫无重用性，或许人家更看重的是视觉体验，宁可多做几张图，多几个按钮，也要有更好的视觉体验效果。

六、实用指导意义

虽然没有明确的“门派”的概念，但是实际上，CSS界确实有隐性的“门派”之分的。

知道这个也是有一定的实际意义的，例如在找工作的时候，（个人观点，仅供参考），如果您要进入腾讯公司，要清楚腾讯公司写页面更看重的是什么，作为一个颇具规模的大互联网公司，其流程规范等都已经相对非常成熟了，前辈们继承下来的东西不是你所能左右的，您所能做的就是代码风格也页面重构思想要与之相符。

如果您固守你自己那一套，比如说将扩展性与重用性放在首位，对于体验尤其是兼容性（各个浏览器一致）放在次席的话，到头不幸的肯定是你自己。你需要就是对其产品页面的CSS代码（命名，风格）以及HTML重构思想进行一番研究。

对于大公司，说句可能不对的话，中规中矩地写你的CSS代码，这往往反而是最好的。

要是，以后，我羽翼渐丰，有幸能够面试他人的话，我更看重的将会是对方的CSS与HTML代码的重用性与扩展性是否足够高，CSS代码是否足够简洁，性能是否足够高，对于所谓的兼容性（也重要）不是最先决的条件。

此时，您的代码与页面要是方方正正，规规整整，就像是砖头房子一样，我一定会把你劈掉的。我要是流水般的页面布局。

 

来自

 

/*======================分割线===================*/

以下节选引用白树在前端早读课公众号上的文章，希望对入门前端的同学有所帮助

白树——博客园：

如何学习前端

　　记得群里有人问我现在开始学习前端还来得及吗，种一棵树最好的时间是十年前，其次是现在，想做什么就马上去做，并坚持下去。

      对于刚步入前端的同学来说，最重要的应该是学习『基础』知识，像CSS、JavaScript的基础原理看多几遍也不会过时，最好找两本书系统的学习或者上网找教程如w3school在线教程，然后如我前面提到的找项目或者做demo去实践，将知识转化为经验，并坚持下来，这种学习方式最简单，进步也最明显。

　　有的同学说工作忙没有太多时间学习，其实可以挤出来，例如我通常会利用每天上班前和下班后的时间，大概有一个钟在公交或地铁上，看书或者拿着手机学习，特别是早上上班那段路上，学习效率会很高。

　　我们知道现在前端的水很深，为了解决各种业务问题，提高生产效率，技术创新特别快，那么具备快速的学习能力是你的核心竞争力之一，并不意味着你每样新技术都要学，应该根据公司的业务需求选择适合的框架，其它的了解下，用到时再学习也不迟，更何况使用新框架的学习门槛不会太高，容易上手，这点上看，刚步入前端的新人是特别有优势的，至于想要掌握它的深沉原理，需要花费很多的功夫去学习，这个阶段你可能达到资深工程师的高度。

每个人的学习方法可能对自己进步很大但不适合别人，人都是独一无二的，要结合自己的生活习惯，通过实践中思考，找到属于自己的方法。

在学习的过程中，遇到问题是怎么解决的？

　　在组内有个毕业生妹子，有一次问我3D旋转动画的问题，在说完简单原理后我想把发个例子给她参考，她拒绝了，说要自己思考怎么做，我笑着给她点赞。

　　学习遇到问题懂得『独立思考』去解决是一项最基础的能力，这种能力完全可以培养并形成习惯，不管是在哪个行业工作，对个人的提升大有帮助。很可惜，我在博客或者群里见过很多刚步入前端的同学，遇到问题就马上提问，甚至是要求提供现成的demo。

      思考后解决不了问题可以百度或谷歌，例如stackoverflow，需具备一点英语能力。实在解决不了再上群等方式『提问』，可以参考张鑫旭写的《如何提问才能进阶成为前端大神》http://www.zhangxinxu.com/wordpress/2015/05/how-to-ask-web-front-question//

/*======================分割线===================*/

如何做一个好的前端重构工程师

来自

作者: smallni  来源: 腾讯TGideas  发布时间: 2013-01-05 16:58

从专业角度：

明确的自身定位

目前国内将前端分为重构和JS开发的并不多，虽然PS是重构必用的一个软件，但要知道重构不是"切图仔"，切图只是重构工作内容的一部分。我们没有理由因为自己是重构，而不去学习其他技术，因为你知道你不会干一辈子的重构，JS不能丢，同样的对前端新技术要熟知。重构页面时应该把大部分的时间花在页面模块的抽离、性能优化、易维护性、易用性的探索上，而应该花最少的时间去代码实现。也许你写出来的页面有百万级的用户在使用，这里可能有障碍用户，所以你要考虑各种用户的感受与体验，而不仅仅是局限于代码的完成度上。

注重前端基础技能

前端的基础知识就像一个房子的地基，如果地基打不好，一旦遇到一点地震可能就会倒。同时也像一个城堡的各扇门，哪边的门造的不好，敌人的枪火就可以马上攻破，所以打好基础是前端学习更多知识的基石。CSS属性的特性、html标签的语义化、JS的基础知识、W3C的规范（块格式化上下文、层叠上下文、框模型等），这些可以多花点时间去学习和巩固，做到能正确合理的使用某个前端技术方案。

正确对待前沿技术

互联网发展日新月异，前端技术更新也很快，当我们在学css2时，css3已经风靡全球，当我们在学css3时，css4已经被提上了日程。前端的路上永远学无止境，所以在某项新技术诞生时，就需要我们正确的去审视。

在做好自己本职工作的同时，保持一颗学习的热情，新技术可以尝试使用，但请先一定了解为什么要用这个新技术？使用这个技术能为我们带来什么改进？在前端技术上，永远没有最好的技术方案，只有最合适的技术方案。最新的不一定是最好的，旧的也不一定是差的，切忌盲目跟风学习新技术，要知道自己正在学的是否能够学以致用。(笔者注：其实更多的时候并不是某项新技术，技术早就诞生，只是一个新的前端解决方案或标准被推动出来了，如CSS3其实在2003年就诞生了）

更好的沟通能力

我们每天可能要和开发、产品、设计、交互、测试等不同的人打交道，所以这就需要我们有一个更好的沟通协调能力，注重一个更好的沟通技巧，减少沟通上的成本。"一切以用户的价值为依归"，这也正是互联网行业所需要的一种理念，在与其他同事沟通时除了真诚待人以外，还需要多为用户去考虑：我们真的需要这么做么？

有选择的参加技术论坛

如果自己呆在一个小公司，前端人也不是很多，没有一个很好的氛围，那么这时我们就只能通过两种方式来拓宽人脉：网络和论坛。网络如QQ群、蓝色理想等，而面对面的论坛无疑是最真实的一种拓宽人脉的方式。其实现在国内大的环境下，前端类的技术论坛我自己都数不过来，这时有选择的参加一个论坛显得尤为重要，而不该不管自己懂不懂、免费还是收费什么论坛都去参加，其实适合自己的是最重要的。

关注浏览器厂商

10年前，IE统治了大半个地球，如今，其他的各大浏览器厂商已挤进全球化份额争夺战，最离不开前端的就是浏览器，关注浏览器厂商的动作与格局可以让你拥有前瞻性的视角。一些浏览器厂商的开发者库：微软的MSDN，火狐的MDN，谷歌的开发者库，欧朋（Opera）的开发者库。另外可以关注下各浏览器厂商的推广活动，火狐中国会在每一次推出新版本时有体验活动，微软的最新的IE10推出时国内也有推广活动，可以了解这些新版本浏览器的特性以及对css3\html5的支持性如何。

更多的承担和分享

在平时更多的去承担一些额外的工作，譬如在重构团队的协作规范、编码规范上提出自己的一些合理化建议，输出一些利于其他同事更快、更高效提升的文档。平时在自己工作遇到了一些好的工作方法或者对一些新技术的研究可以拿出来和大家分享。重构的团队氛围很重要，谁都不希望呆在一个整天只管自己写代码的团队，那样不管对于个人还是团队都是不利的。

更多的思考与总结

思考指的是"意识流"，具体是我们在重构过程中的想法和理念，怎么想决定了我们怎么做。

作为重构，很多人拿到设计稿之后就是开始埋头切图，用各种"奇技淫巧"实现各种需求，我们甚至不会在拿到设计稿之后仔细的做一下分析：如何做一个合理的架构、如何抽取合适的模块、如何用更优雅的方式和轻量的代码实现页面中的需求。

也许是目前大的环境下在催促着我们不断的向前跑：各种前端论坛大多数都在讲某个技术，纠结于某一技术细节的实现，讲烂掉的性能优化，可很少有人去讲该如何合理的选择一个前端解决方案，如何解决重构中遇到的一系列不同场景中的问题，以及最重要的我们自己的职业生涯思考：我们是准备写一辈子代码么？

总结也叫"review"，是复习、回顾的意思，review对于重构来讲，显得尤为重要，定期的项目回顾能够发现项目中存在的问题从而规避以后再次出现。

当然项目回顾是一方面，更重要的是代码层面的review，不定期的review可以促使我们在一些代码的细节把控方面做的更优雅，review除了可以提高代码的品质外，还能加强团队的协作精神，以及提高团队的整体技术能力。显然这是一件非常有意义的事。团队成员可以在一起review大家的代码，发现每个人身上的不足和亮点，不然我们真的是只管埋头自己代码的苦逼代码仔了。

从生活角度：

保持阅读的热情

网络的信息是碎片化的，在我们没有很好的梳理碎片能力的时候，一本实物书籍对于慰藉我们的心灵显得尤为重要。有时生活、工作会让人压的喘不过气来，这时，我们需要去寻找一种方式去释放压力，嗯，阅读是一种很好的方式。

坚持一项运动爱好

自己的工作方法，梳理好需求的优先级，预留出一定的时间来放松自己，这个放松一定要让自己的筋骨活动开，可以是去打打羽毛球，或者去跑步，再或者去健身。只有让自己的身体变得强大起来，才有更多的能量值去砍怪升级。

保持乐观的生活态度

善于捕捉生活中的一些细小的幸福颗粒，我们就会经常活在快乐中。上次在腾讯健康加油站听了一次关于生活的分享，其中提到"生活就像炖鸡汤，有时需要加点调料和沾料"，的确，这些沾料就是发现生活中的细小幸福，做一个乐观、豁达、开朗的前端人士。调节好工作和生活的平衡，让自己不要再活的那么累。

嗯，做个好重构真的挺不容易的，无论是从专业角度还是从生活角度，缺一不可，保持一个乐观、热情、积极的心，不断学习，让自己活得简单、快乐，此足矣。

其实，你不仅是在重构代码，也是在重构人生！

来自