优秀的前端工程师任务目标和实践

前端工程师的工作目标:

1. 在设计师和工程师之间创建可视化的语言；
2. 用可视化的设计，定义一组代表内容、品牌和功能的组件；
3. 为 Web 应用程序的公约、框架、需求、可视化的语言和规格设定底线；
4. 定义 Web 应用程序的设备、浏览器、屏幕、动画的范围；
5. 开发一个质量保证指南来确保品牌忠诚度、代码质量、产品标准；
6. 为 Web 应用程序设定适当的行距、字体、标题、图标、边距、填充等等；
7. 为 Web 应用程序设定多种分辨率的图像，设备为主的实体模型，同时维护设计指南；
8. 用 account semantics, accessibility, SEO, schemas ，microformats 标记 Web 应用程序；
9. 用一种友好的，消耗小的，设备和客户端感知的方式连接 API，获取内容；
10. 开发客户端代码来显示流畅的动画、过渡、延迟加载、交互、应用工作流程，大多数时间用来考虑渐进增强和向后兼容的标准；
11. 保证后台连接安全，采取跨地资源共享（CORS）的程序考虑，防止跨站点脚本（XSS）和跨站点请求伪造（CSRF） ；
12. 最重要的是，尽管有严格的期限、利益相关者的要求，以及设备的限制，无论现在还是将来永远是「客户第一」。

实现上述目标，前端工程师采用了从可视化到编程的多种工具 ，甚至有时要照顾市场、 UX 到内容等等。

前端工程师需要具备的经验和实践：

1. 了解 DNS 解析，充分利用 CDN，使用多个域名来完成资源的请求以缩短加载时间；
2. 设置 HTTP Headers（Expires, Cache-Control, If-Modified-Since）；
3. 遵循 Steve Souders 给出的全部规则（High Performance Websites）
4. 知道如何解决 PageSpeed、YSlow、Chrome Dev Tools Audit、Chrome Dev Tools Timeline 显示的所有问题；
5. 知道什么任务该放在服务端，什么任务该放在客户端；
6. 知道使用缓存，DNS 预取和资源预加载技巧；
7. 精通 JavaScript，知道何时自己写何时借组别人的框架或代码，优劣明辨；
8. 熟练使用现代 MVC JavaScript 框架（例如 AngularJS EmberJS React 等），图形库（D3、SnapSVG 等），DOM 操作类库（jQuery、Zepto 等），惰性加载或者模块管理类库（例如 RequireJS、CommonJS 等），任务调用工具（例如 Grunt Gulp 等），包管理工具（Bower Componentjs）以及测试工具（Protractor、Selenium 等）；
9. 掌握图片的格式，每种格式的优点，适用的场景；知道图片优化技巧以及加载策略（雪碧图、懒加载、缓存刷新以及 PNG 交错）；
10. 熟悉 CSS 标准、最新的转换工具积极策略规范（比如 BEM、SMACSS、OOCSS 等）；
11. JavaScript 的计算机科学（内存管理、单进程特性、垃圾回收算法、定时器、作用域、提升以及设计模式）。