优秀前端须要具有的经验

一位优秀的前端工程师不只要考虑 web 技术和语言，而且还要了解全部不一样的组件、系统和概念 。

顶级前端工程师须要具有的经验和最佳实践（这才是市场急需的前端）：

1. 了解 DNS 解析，充分利用 CDN，使用多个域名来完成资源的请求以缩短加载时间；

一、在浏览器中输入www.qq.com域名，操做系统会先检查本身本地的hosts文件是否有这个网址映射关系，若是有，就先调用这个IP地址映射，完成域名解析。 

二、若是hosts里没有这个域名的映射，则查找本地DNS解析器缓存，是否有这个网址映射关系，若是有，直接返回，完成域名解析。 

三、若是hosts与本地DNS解析器缓存都没有相应的网址映射关系，首先会找TCP/ip参数中设置的首选DNS服务器，在此咱们叫它本地DNS服务器，此服务器收到查询时，若是要查询的域名，包含在本地配置区域资源中，则返回解析结果给客户机，完成域名解析，此解析具备权威性。 

四、若是要查询的域名，不禁本地DNS服务器区域解析，但该服务器已缓存了此网址映射关系，则调用这个IP地址映射，完成域名解析，此解析不具备权威性。 

五、若是本地DNS服务器本地区域文件与缓存解析都失效，则根据本地DNS服务器的设置（是否设置转发器）进行查询，若是未用转发模式，本地DNS就把请求发至13台根DNS，根DNS服务器收到请求后会判断这个域名(.com)是谁来受权管理，并会返回一个负责该顶级域名服务器的一个IP。本地DNS服务器收到IP信息后，将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后，若是本身没法解析，它就会找一个管理.com域的下一级DNS服务器地址(qq.com)给本地DNS服务器。当本地DNS服务器收到这个地址后，就会找qq.com域服务器，重复上面的动做，进行查询，直至找到www.qq.com主机。 

六、若是用的是转发模式，此DNS服务器就会把请求转发至上一级DNS服务器，由上一级服务器进行解析，上一级服务器若是不能解析，或找根DNS或把转请求转至上上级，以此循环。不论是本地DNS服务器用是是转发，仍是根提示，最后都是把结果返回给本地DNS服务器，由此DNS服务器再返回给客户机。 

来源： http://369369.blog.51cto.com/319630/812889/

CDN的全称是Content Delivery Network，即内容分发网络。其目的是经过在现有的Internet中增长一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户能够就近取得所需的内容，提升用户访问网站的响应速度。CDN有别于镜像，由于它比镜像更智能，或者能够作这样一个比喻：CDN=更智能的镜像+缓存+流量导流。于是，CDN能够明显提升Internet网络中信息流动的效率。从技术上全面解决因为网络带宽小、用户访问量大、网点分布不均等问题，提升用户访问网站的响应速度。
      为更好地理解CDN，让咱们看一下CDN的工做流程。当用户访问已经加入CDN服务的网站时，首先经过DNS重定向技术肯定最接近用户的最佳CDN节点，同时将用户的请求指向该节点。当用户的请求到达指定节点时，CDN的服务器（节点上的高速缓存）负责将用户请求的内容提供给用户。具体流程为: 用户在本身的浏览器中输入要访问的网站的域名，浏览器向本地DNS请求对该域名的解析，本地DNS将请求发到网站的主DNS，主DNS根据一系列的策略肯定当时最适当的CDN节点，并将解析的结果（IP地址）发给用户，用户向给定的CDN节点请求相应网站的内容。

       CDN的实现须要依赖多种网络技术的支持，其中负载均衡技术、动态内容分发与复制技术、缓存技术是比较主要的几个，下面让咱们简单看一下这几种技术。

来源： http://blog.csdn.net/ligaofeng/article/details/17139481

国内百度、新浪、360等都有可用的 前端 CND资源库；百度 官网：http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs

1. 设置 HTTP Headers（Expires, Cache-Control, If-Modified-Since）；
2. 遵循 Steve Souders 给出的所有规则（High Performance Websites）

　　规则一：减小HTTP请求。这本书的规则顺序是按照其重要性来排名的，减小HTTP请求做为第一个规则，足见其重要性。根据黄金法则，减小组件数量从而减小HTTP请求是最有效的性能优化方式，其中有几项技术值得提一下：

1. CSS Sprites。应该前端人都比较熟悉了，把图片整合到一个大图里，利用background-position来定位。

2. data:URL。值得一说把图片变为内联的，减小了图片请求，webpack里图片小于8kb就会转为base64的data:URL。

3. 合并脚本和CSS。

　　规则二：使用CDN。这个规则不用多说，分发内容使之更靠近终端用户，减小了请求时间。

　　规则三：添加Expires头。善用缓存，给长久不变的内容组件设置有效期较久的Expires头。

　　规则四：压缩组件。利用gzip等内容编码对文档或组件进行压缩，一般能将相应数据量减小70%左右。

　　规则五：将样式表放在顶部。页面在打开工程中逐步呈现，用户会以为页面快一些，也让用户在等待过程当中有一个良好的反馈。把CSS放在底部的话有可能出现白屏现象。

　　规则六：将脚本放在底部。页面下载脚本时会阻止其余内容下载与呈现，以防止浏览器的重绘重排。因此把脚本放在页面的底部不会阻止页面内容的呈现，并且页面一些可视化组件能够尽早下载而不被阻塞。

　　规则七：避免使用CSS表达式。CSS表达式会进行频繁的求值，致使了性能低下。

　　规则八：使用外部JavaScript和CSS。纯粹而言，内联更快一些，由于知足了规则一的减小HTTP请求，可是这个问题上，必定要考虑缓存带来的性能优化，外部文件颇有可能被缓存下来，从而提高了性能。

　　规则九：减小DNS查找。善用DNS缓存，好比持久链接。

　　规则十：精简JavaScript。移除没必要要的字符空格，咱们常见的.min.js就是如此。

　　规则十一：避免重定向。3xx的响应状态码表明着一股重定向的响应。其中URL结尾缺乏斜线形成的重定向须要特别注意，不要由于这一点失误损伤性能。

　　规则十二：删除重复脚本。

　　规则十三：配置ETag。提及这个不得不说条件请求If-Modified-Since和If-None-Match，都是用来进行缓存再验证。ETag的问题是服务器构造ETag时，尽管两个文件彻底同样，但若是处于不一样的服务器的话仍是会有不一样的ETag，增长了HTTP进行请求下载的次数，这对于后台是服务器集群的网站性能损伤很大。

　　规则十四：使Ajax可缓存。虽然Ajax是异步的，但也不能让等待响应的时间过长。优化准则的话参见上面的性能准则，其中善用缓存依然是咱们重点关注的。

来源： http://www.phpxs.com/post/4326

1. 知道如何解决 PageSpeed、YSlow、Chrome Dev Tools Audit、Chrome Dev Tools Timeline 显示的全部问题；
2. 知道什么任务该放在服务端，什么任务该放在客户端；
3. 知道使用缓存，DNS 预取和资源预加载技巧；
4. 精通 JavaScript，知道什么时候本身写什么时候借组别人的框架或代码，优劣明辨；
5. 熟练使用现代 MVC JavaScript 框架（例如 AngularJS EmberJS React 等），图形库（D三、SnapSVG 等），DOM 操做类库（jQuery、Zepto 等），惰性加载或者模块管理类库（例如 RequireJS、CommonJS 等），任务调用工具（例如 Grunt Gulp 等），包管理工具（Bower Componentjs）以及测试工具（Protractor、Selenium 等）；
6. 掌握图片的格式，每种格式的优势，适用的场景；知道图片优化技巧以及加载策略（雪碧图、懒加载、缓存刷新以及 PNG 交错）；
7. 熟悉 CSS 标准、最新的转换工具积极策略规范（好比 BEM、SMACSS、OOCSS 等）；
8. JavaScript 的计算机科学（内存管理、单进程特性、垃圾回收算法、定时器、做用域、提高以及设计模式）。

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

http://zhuanlan.zhihu.com/FrontendMagazine/20598089?

来自为知笔记(Wiz)