一、基本素养

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、最重要的是，尽管有严格的期限、利益相关者的要求，以及设备的限制，无论现在还是将来永远是「客户第一」。

二、进阶素养

1、DNS解析、使用CDN和关于multiple Hostnames as part of resources request.
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、Native JS，知道何时从头开始做，何时查找别人的代码，同时可以评估这样做的优缺点；
8、modern MVC Javascript libraries (e.g. AngularJS, EmberJS, ReactJS), graphic libraries (e.g. D3, SnapSVG), DOM manipulation libraries (e.g. jQuery, Zepto), lazy loading or package management libraries (e.g. RequireJS, CommonJS), task managers (e.g. Grunt, Gulp), package managers (e.g. Bower, Componentjs) and testing (e.g. Protractor, Selenium)的相关知识和用法；
9、CSS标准、modern conventions、 strategies (e.g. BEM, SMACSS, OOCSS)的知识和用法；
10、JS的电脑知识（内存管理，单线程的性质，垃圾收集算法，超时，范围，提升，模式）

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