优秀前端需要具备的经验

Posted 2020-06-16

一位优秀的前端工程师不仅要考虑 web 技术和语言，并且还要了解所有不同的组件、系统和概念

。

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

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

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

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

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

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

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

6、如果用的是转发模式，此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 等），图形库（D3、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)