前端性能优化

一、什么是前端性能优化（what）？

     从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。

 

二、为什么要做前端性能优化（why）？

在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失。

  

三、前端性能优化的原则（rule）

1、不要按照准则照本宣科的做，需要根据实际情况因地制宜；

2、不出bug！

 

四、从浏览器发起请求到页面能正常浏览都有哪些阶段（process）？

预处理——>DNS解析——>建立连接——>发起请求——>等待响应——>接受数据——>处理元素——>布局渲染

 

五、性能优化的具体方法（way）

一）内容层面

1、DNS解析优化（DNS缓存、减少DNS查找、keep-alive、适当的主机域名）

2、避免重定向（/还是需要的）

3、切分到多个域名

4、杜绝404

 

二）网络传输阶段

1、减少传输过程中实体的大小

    1）缓存

    2）cookie优化

    3）文件压缩（Accept-Encoding：g-zip）

2、减少请求的次数

    1）文件适当的合并

    2）雪碧图

    注：浏览器在同一时刻向同一个域名请求文件的并行下载数是有限的，因此可以理由多个域名的主机来存放不同的静态资源，     增大页面加载时资源的并行下载数。（比如图片放到oss）

3、异步加载（并发,requirejs）

4、预加载、延后加载、按需加载

 

三）渲染阶段

1、js放底部，css放顶部

2、减少重绘和回流

3、合理使用Viewport 等meta头部

4、减少dom节点

 

四）脚本执行阶段

1、缓存节点，尽量减少节点的查找

2、减少节点的操作（innerHTML）

3、避免无谓的循环，break、continue、return的适当使用

4、事件委托（https://www.jianshu.com/p/5bccc38b6671）