如何成为 “ 优秀的Web前端工程师 ”

Web前端工程师的工作内容一般是“分析设计稿=>切图=>写HTML、CSS和Javascript”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用以更利于SEO、要考虑页面性能乃至站点性能及其扩展性、可重用性等。不单是做出页面，而是做出优秀的页面。

那么，何为优秀的页面？

优秀的页面一般具有以下特质：
1、标签语义化，代码严谨规范，且纯净完美，自然能通过W3C标准验证；
2、充分考虑到代码(包括HTML、CSS和Js代码)在站点中的作用，以对其进行进一步的全局统筹性的优化。
3、在以上两点的基础上，能更友好的迎合当前各大搜索引擎的收录规则

下面一起来看看优秀的Web前端工程师是如何工作的：

一、设计稿的分析

设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪块内容如何实现等。具体步骤如下：

1、分清设计稿中的公共与私有的部分；
2、在脑海中描绘出各部分的实现方案，包括如何切图、写结构、写样式；
3、考虑该方案的扩展性、复用性及页面性能，包括文件分布、目录结构；

二、切图

切图是指将设计稿分割成适合于Web页面的图片，怎么切、从哪切才能将性能最大化，可以说切图是一门能让页面性能极大提高的智慧行为。具体步骤如下：

1、对切出来的图片进行优化，如包括压缩文件大小、选择图片类型等；
2、全局规划切出来的图片，包括文件分布；
3、优化整体的性能，包括合并图片、压缩文件大小；

三、HTML和CSS的编写

HTML和CSS的编写是将以二两个步骤的结果，通过HTML和CSS的编写完美的结合到一块，它们之间相互的关联性很强，HTML的写法会影响到CSS及Js的写法，一般步骤如下：

1、还原设计稿视觉效果，并通过W3C标准验证；
2、实现当前众多主流浏览器的兼容；
3、标签语义化，代码严谨规范，且纯净完美；
4、优化实现方式，如括模块化代码结构，考虑到扩展性、复用性和可维护性等；