做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。
单纯的页面重构，所涉及到的工作内容一般是“分析设计稿= > 切图= > 写HTML和CSS”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。
跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点：
1. 结构完整，可通过标准验证
2. 标签语义化，结构合理
3. 充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化
很多同学多少都遇到过方向不明，不知道自己应该提高些什么，我们可以从“分析设计稿= > 切图= > 写HTML和CSS”这个工作内容，针对每一点提出一些要求，以方便我们分析自己的能力水平，为继续提高确定个方向：
一，设计稿的分析
设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：
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，恭喜你，你已经是一个职业的“页面重构工作者”了。为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧。发布于 2011-05-181 条评论感谢分享收藏•没有帮助•举报
米嘉，希望做浏览器前端技术布道小雯子、zephyr zhang、孙嘉伟 等人赞同我不是正经的前端工程师，不过有幸服务于浏览器厂商，一直希望加强浏览器厂商同广大前端开发者之间的交流和沟通，自己也在博客上翻译和写了一些关于火狐对于开发者特性支持的文章。期间也接触过不多的前端工程师，并且试着为前端工程师做一些交流的报告，我个人体会前端部分的知识体系其实是很庞大的，因为浏览器涉及到的技术特别庞杂，试着看能不能在这里描述清楚。
对于前端来说，他要面对的最直接的东西就是浏览器，而跟浏览器进行交互的内容基本的就包括HTML+JavaScript+CSS，然而从网络流行第一天开始，这类代码绝大部分是通过拷贝粘贴的方式进行传播，以至于JavaScript成为了世界上最被误解的一门语言（老道说的）等等，此外，随着很多前端IDE环境的出现，前端代码的质量更是参差不齐，尤其是Frontpage。不过看到很让人高兴的就是，越来越多的前端不再使用IDE来进行开发或者前端IDE正在变得越来越规范。围绕着HTML+JavaScript+CSS本身有很多的话题可以讨论，因为这三个都不是简单几句话就能够说清楚的事情。
简单的使用他们，不管是拷贝粘贴，还是使用IDE都并不妨碍前端制作出正常工作的页面，但是这只能步入初学者的行列，不过可能并不妨碍成为一个合格的前端。
真正理解这些技术并不是简单的事情，但是个人觉得想进入下一个阶段，需要对浏览器有基本的理解。这三个技术是浏览器最直接面对的代码，而浏览器同前端开发者之间沟通的方式是通过一系列逻辑上的概念或者隐喻，例如HTML对应的DOM结构，CSS的Box Model等，理解了这些逻辑上的概念接口，可以让前端开发者更容易理解自己正在做的事情。而这些概念的理解需要计算机等学科的基础知识。
例如DOM其实来自于数据结构树的抽象，文档数据模型基本上是一个非常稳定的抽象模型，使用树型结构来描述一个HTML/XML的文档数据，然后通过浏览器实现的DOM API来操控这个树型逻辑结构——浏览器内部不一定是使用树来做具体实现，但是在浏览器同前端沟通的时候通过这种逻辑结构，或者隐喻为文档树；在例如CSS的盒子模型，其实浏览器基本上也是提供这个逻辑概念让前端更好的理解渲染过程，通过观察一个前端写代码时候就能判断出他是否理解这个盒子模型，在制作Layout过程中，如果他只是通过各种IDE或者类似于Firebug之类的可视化工具去调整布局参数的话，那可能就没有很深的理解，加入遵循的Grid布局的话，也只是简单的利用那个Grid的几个计算公式——不过很多工具或者框架的出现就是用来帮助做这个的，嘿嘿；另外一种人可能会提前进行计算，他能够知道自己进行宽度和高度设定之后，布局会是什么样子。
优化前端代码是更高级的一个阶段，这个阶段的修炼可能需要更加了解浏览器的很多实现细节，以及不同浏览器之间的实现差异——面对不兼容问题的本质。还拿CSS的布局为例，浏览器中有个很重要的概念或者阶段就是渲染/布局过程，简单说布局过程就是浏览器在把所有内容绘画到显示屏上的过程，而这个过程就是浏览器计算各种元素几何关系的过程，这些几何关系包括长、宽、顶点坐标，浏览器将解析HTML生成的DOM树转化为渲染树——WebKit中的RenderTree，Gecko中的FrameTree等等，对于Block和Inline型元素几何关系计算方式会有所不同，从而会影响到父级元素的几何关系计算，这个渲染过程在火狐中被成为Reflow，WebKit中为Layout，这个过程是占用CPU资源的，所以，对于布局方面的优化就需要理解这个过程，例如，在代码中，建议不要一句一句的为某个元素设定CSS属性，而建议一起把打包的CSS属性赋予某个元素，就是因为这个赋值可能会引起浏览器的Reflow过程，从而影响使用体验；或者比如JavaScript语言中，对于一个属性的查询过程是需要在他的所有Prototype Chain或者Scope Chain中做遍历的，所以会有使用局部变量的建议从而避免糟糕的多次遍历等等。
总结一下上面这一堆，也许是因为这个纯粹是个人摸索过来的经验，同大家的学习过程可能非常不同，我可能偏向从浏览器那边过来的，但是经过一些交流之后，觉得这可能会是一个进阶的有效途径，希望能够对大家有所帮助，不过毕竟我不是正经的前端，没有更多的实战经验，如果有啥问题，欢迎批评指正，:)
