如何学习页面重构/对页面重构理解

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

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

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

抱着学习的态度看这些文章，我也但愿可以在文章中加入本身学习的一些想法，欢迎你们评论探讨

 

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

 

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

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

 

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

来自 <https://www.zhihu.com/question/19858246>

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

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

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

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

对于二者的区别，我没有专门考究，仅听朋友云云和本身的理解，但愿能帮到你。

 

做者：吴钊

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

来源：知乎

著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

 

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

一、页面重构须要具有足够的耐心，反反复复；js工程师要不重复本身。

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

三、页面重构偏艺术，须要想象力；js工程师偏程序，须要逻辑思惟。

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

 

做者：周文彬

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

来源：知乎

著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。

 

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

 

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

页面重构师

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

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

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

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

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

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

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

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

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

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

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

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

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

2、切图

切图是指将设计稿切成便于制做成页面的图片。都有个误区，以为切图就是把图片切出来，其实并不彻底是这样，还包括把切出来的图片合并到一块儿，

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

切图也能够划分红几个阶段：

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

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

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

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

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的基础上，样式写法的优化（包括技巧的应用）

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

若是你已经达到或超过三、四、5，恭喜你，你已是一个职业的“页面重构工做者”了。为了咱们自身的发展，关注新技术、技术创新、提升用户体验、审美观、程序脚本的实现方式等，也是十分必要的。你们一块儿进步吧。

来自 <http://baike.baidu.com/link?url=EEaNzQUA7rFpIRXDhdppbtJALT9deUibvugT_txpbgZ5v2GXTiaWF_M797iP_drfCrZI87fE3nvapsclHYA0za>

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

 

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

 

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

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

 

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

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

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

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

一般背景图的输出质量百分比能够调在60-80%，对比较重要的icon、图片能够调为100%输出高质量图片。

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

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

按需加载，异步加载，相似苹果官网上不少地方用到了异步加载，好处是提升主要页面的加载速度，用户须要的时候才加载其余附件页面。

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

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

 

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

原文地址：站酷

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

 

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

 

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

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

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

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

<http://www.zhangxinxu.com/wordpress/2010/08/css%E9%A1%B5%E9%9D%A2%E9%87%8D%E6%9E%84%E4%B9%8B%E2%80%9C%E9%97%A8%E6%B4%BE%E2%80%9D%E4%B9%8B%E5%88%86/>

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

 

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

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

为什么要提出“门派”这个概念，我想我但愿你们都能以一颗包容的心态对看到其余同行的CSS代码以及页面重构方式。

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

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

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

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

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

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

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

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

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

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

6、实用指导意义

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

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

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

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

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

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

 

来自 <http://www.zhangxinxu.com/wordpress/2010/08/css%E9%A1%B5%E9%9D%A2%E9%87%8D%E6%9E%84%E4%B9%8B%E2%80%9C%E9%97%A8%E6%B4%BE%E2%80%9D%E4%B9%8B%E5%88%86/>

 

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

如下节选引用白树在前端早读课公众号上的文章，但愿对入门前端的同窗有所帮助

白树——博客园：http://www.cnblogs.com/PeunZhang/p/5294461.html

如何学习前端

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

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

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

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

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

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

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

　　学习遇到问题懂得『独立思考』去解决是一项最基础的能力，这种能力彻底能够培养并造成习惯，无论是在哪一个行业工做，对我的的提高大有帮助。很惋惜，我在博客或者群里见过不少刚步入前端的同窗，遇到问题就立刻提问，甚至是要求提供现成的demo。

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

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

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

来自 <http://kb.cnblogs.com/page/166970/>

做者: 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你们的代码，发现每一个人身上的不足和亮点，否则咱们真的是只管埋头本身代码的苦逼代码仔了。

从生活角度：

保持阅读的热情

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

坚持一项运动爱好

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

保持乐观的生活态度

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

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

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

来自 <http://kb.cnblogs.com/page/166970/>