怎样成为100分的优秀前端？

大多数人心中的前端：

1、把 Photoshop 文件、图片或者线框放进一个网页；
2、偶尔设计 Photoshop 文件、图片或者线框；
3、用 Javascript 编程，为网页制作动画、过渡效果；
4、用 HTML 和 CSS 编程，确定网页的内容和布局。

现在的前端工作:

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

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

糟糕的前端:

1、滥用 JavaScript 库，因为他们实际上并不了 JavaScript 的核心（e.g. 一切都用 jQuery）；
2、滥用 JavaScript 插件，无节制的复用别人的代码，哪怕自己根本读不懂；
3、不看需求、设计，也不做比较或评价，就给 Web 应用程序添加 CSS 框架，却只用到框架的一小部分；
4、认为只要用了 CSS 框架，网站就是响应式的，或是对响应式设计的意义理解不到位；
5、一边在说着「响应式 Web 设计」，却对服务器端解决方案技术一无所知；
6、用 CSS 编程时不做预处理器、命名规范等；
7、忽视性能、内存泄露（并不理解内存泄露的真正含义），不会检测代码；
8、不会用指标衡量一个产品，或者这种指标旨在自己的电脑、浏览器、设备有效；
9、忽视 30 年来的软件工程技术，闭门造车。

要知道，入门容易精通难，计算机和软件的基础对你用 JavaScript 或浏览器编程都非常重要。Web 可能是最有影响力的平台和环境之一，在那里执行的程序必须被小心对待。一位优秀的前端工程师不仅要考虑 Web 技术和语言，并且还要了解所有不同的组件、系统和概念。

优秀的前端（市场急需的以前端开发为主的全栈工程师）：

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、缓存，预取和延迟加载技术的使用；
7、原生 JavaScript，知道何时从头开始做，何时参考别人的代码，同时可以评估这样做的优缺点；
8、 最新的 MVC Javascript 库知识以及用法；
9、CSS 标准的知识与用法；
10、JavaScript的计算机科学部分的知识（内存管理，垃圾收集算法等等等等）

换句话说，如果说掌握(或者某些简历里自称的精通) HTML+CSS+JavaScript，了解后端知识，只是 60 分的合格前端；那么要想成为受追捧、拿高薪的 80 分优秀前端，要对业务需求和、架构设计有真正的运用；而 100 分的顶级前端，则必须要能够兼顾技术和设计，更接近「以前端开发为主的全栈工程师」了。