再读《你是一个职业的页面重构工作者吗？》

这段时间常给来面试的同学用《 你是一个职业的页面重构工作者吗？ 》中三个部分的不同阶段去做自测，发现很多人都自我感觉良好，给我的回答基本都是比较高的，只不过实际上提交的面试题所反应出来的并没有那么高。我总结了下，主要有3点：

1. 对自己的能力没有足够的了解，没有实事求是的认清自己

2. 存在侥幸的心理，希望以较高的答案赢得面试的机会

3. 对文章里每一点的理解存在偏差

简单做下说明：

1. 对于我们来说是很重要的，只有真正的认清自己的能力，才能知道自己还有哪方面的不足，才能有针对性的提高自己。

2. 就是人的问题了，这里也提醒下各位正找工作的同学，正直、诚信，是很多公司十分看重的，也是做人很重要的品德。我不会因为你没有达到文章中的要求而不给面试的机会，但会因为不正直而扣分。

3. 也就是我决定写这篇文章的原因了。在文章的讨论中gulu77提到希望能为每个阶段写一篇详细的文章，之后就在想可能需要写一个更详细的说明，当初不想把每一点写得太细，是担心可能会变成误导，毕竟有些地方我有自己的想法。直到在 Webteam 中发表了这篇文章后，很多人对里面的点有疑问，让我觉得现在还不用担心误导的问题，因为根本就没能明白我想说什么。

写《 你是一个职业的页面重构工作者吗？ 》的目的是为了帮助暂时找不到方向的同学，所以在读的时候对自己更诚实些，相信会得到更好的效果。

一 设计稿的分析

1. 能分清设计稿中的公共与私有的部分
   从最基本的开始，分清公共部分如菜单、导航、大框架和每个独立页面所用到的部分等，至少在想法上做不同的对待。

2. 在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）
   在分清公共和私有部分后，分析最简单的实现方法，如哪些部分是可以平铺的，哪些是可以重复被使用的等等。

3. 在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）
   在分清公共和私有部分后，能准确的给出各部分的实现方案，如“滑动门技术”的实现方法有2种，选择哪种方法更合适项目？图片应该如何切？应该使用哪种HTML和CSS的写法？

4. 在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）
   在给出的方案中考虑是否可扩展、如何重复使用、将哪一类的图合并可以最大化页面的性能。这里还要注意有些模块的内容可能是动态的，当内容改变后如何兼容。

5. 在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）
   考虑上面方案的综合效率，如维护所需要的成本、页面打开速度、带宽成本、服务器开销等等。

1～3点应该成为基本的技能，4～5属于更高的要求。这块的熟练度会影响到后继切图和写代码的效率、返工的机率及维护成本的高低。

二 切图

1. 切成所需要的图片（如何将需要的部分切出来）
   最基本的，将需要的图切出来，有时候会需要PS出自己需要的图。

2. 在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）
   压缩输出的图片，在不影响画面质量的前提下，尽可能的减少文件字节数。这个工作很重要，优化一张图片所带来的效果可能比优化很多的代码所带来的效果要明显得多。

3. 在2的基础上，规划切出来的图片（包括文件分布）
   规划切出来的图片，哪些图应该被合并，存放于哪个目录等等。

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

1～3点应该成为基本的技能，4属于更高的要求。这块会影响到HTML和CSS的写法，还有页面的性能（流量、链接数）。

三 HTML和CSS的编写

1. 还原设计稿视觉效果，并通过标准验证（HTML）
   还原设计稿，是页面制作最基本的要求，不管设计稿是否符合自己的审美观，做为页面重构工作者，还原设计稿是一项职业素质。通过标准验证是检验我们输出的质量很重要的一个方法。虽然最终的页面不一定可以通过验证，但我们所输出的静态页面大部分是可以做到通过验证的，除非有特殊的需求。当然我们不是为了过验证而做页面，是为了标准化。

2. 在1的基础上，实现多浏览器的兼容（HTML）
   兼容多浏览器，要实现多浏览器的兼容，少不要了解下各浏览器的习性。不过对于什么才是兼容，在《 中国式WEB标准 》中有讨论。

3. 在2的基础上，标签语义化（HTML）
   标签语义化，是WEB标准的核心内容，只有做好了语义化，才能说得上做到了WEB标准。虽然在国内很重有统一的标准，不过一些基本的语义标签的使用还是可以定下的，如段落、列表、表格等等。

4. 在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS）
   做好了上面3点，只能说单一的页面做好了，下面得考虑两个以上的页面了。模块化就是为了更好的提高复用，减少重复开发所带来的浪费。模块化也是被越来越多的人所关注，可以说是发展的一个趋势，随着大家对HTML和CSS掌握越多，如何更好的发挥它们也成了提高工作效率的重点，其中模块化就是很好的一种方式，打算在之后写相关的内容（时间不好确定）。

5. 在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）
   做好了模块化，并不一定就是最优化的，如果考虑上扩展性、复用性和可维护方面的内容，模块化有时反而会不利于这几个方面，如何平衡这几方面，是一个更高的要求。

6. 在5的基础上，考虑到整站的样式分布（包括如何实现分布）
   这个算是整站的规划了，需要多少个样式，多少个目录，这些样式文件分别存于哪个目录（当然同时也需要考虑图片的分布）

7. 在6的基础上，样式写法的优化（包括技巧的应用）
   这点需要跟上面的第4、5、6点结合，需要做综合的考虑，使用更合适于项目的样式写法。

1～3点为基本的技能，4～7属于页面优化方面的内容。这块影响了一个页面甚至一个站点从无到有、从有到优。掌握好各个点的知识，会让页面在越短的时间内达到最优的状态。当然这也是个人能力的体现。