谈谈前端性能优化（一）

前言

性能优化无非就是让页面的打开速度更快一些，以获得更好的用户体验。前端在这方面能够作到的有两方面，页面级别的优化，好比减小 Http 请求次数、加快资源的加载速度；二是代码级别的优化，页面从新渲染一次会通过浏览器的重排（reflow）和重绘(repaint)，这两部操做是很是耗时的，本文将根据这两方面的优化途径，大体总结一下。

页面级别优化

1. 减小 HTTP请求数

首先，每一个请求都是有成本的，既包含时间成本也包含资源成本。一个完整的请求都须要通过 DNS寻址、与服务器创建链接、发送数据、等待服务器响应、接收数据这样一个 “漫长” 而复杂的过程。时间成本就是用户须要看到或者 “感觉” 到这个资源是必需要等待这个过程结束的，资源上因为每一个请求都须要携带数据，所以每一个请求都须要占用带宽。另外，因为浏览器进行并发请求的请求数是有上限的 (具体参见此处 )，所以请求数多了之后，浏览器须要分批进行请求，所以会增长用户的等待时间，会给用户形成站点速度慢这样一个印象，即便可能用户能看到的第一屏的资源都已经请求完了，可是浏览器的进度条会一直存在。

减小 http 请求次数的主要方法：

• 设置 HTTP缓存

http 缓存是 web 性能优化中很是重要的一种手段，把一些经常使用资源在首次加载时缓存到浏览器本地，再次加载时可大大减小请求次数，缓存的资源越多，性能固然越好。

缓存的规则主要有两种，强制缓存和对比协商缓存，两种缓存分别经过Http报文头部不一样的字段进行控制。

具体缓存规则参照这里 或者 这里。

• 资源合并压缩

CSS、 Javascript、Image 均可以用相应的工具(Webpack)进行压缩，压缩后每每能省下很多空间。

• CSS Sprites

合并 CSS图片，减小请求数的又一个好办法。

• 懒加载

这条策略实际上并不必定能减小 HTTP请求数，可是却能在某些条件下或者页面刚加载时减小 HTTP请求数。

2. 把 js 脚本置底加载

js 脚本是很容易造成阻塞，致使资源加载停滞，为了不这种状况，先加载其余资源，最后加载脚本。

3. inline 脚本异步执行

inline 脚本与外链引用的脚本相似，也有可能会引发阻塞，因此也要将 inline 脚本放到页面底部或者异步方式来加载，
例如使用script标签的defer 和async属性、使用setTimeOut。

4. 动态加载 js 模块

5. css 放在 head 中

页面渲染过程还要经历重绘重排，这样作是避免会出现 DOM 加载完以后却没有样式的状况。

代码级别优化

DOM操做应该是脚本中最耗性能的一类操做，例如增长、修改、删除 DOM元素或者对 DOM集合进行操做。

而修改 DOM 会引发网页的从新渲染。

从新渲染，就须要从新生成布局和从新绘制。前者叫作"重排"（reflow），后者叫作"重绘"（repaint）。

须要注意的是，"重绘"不必定须要"重排"，好比改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，由于布局没有改变。可是，"重排"必然致使"重绘"，好比改变一个网页元素的位置，就会同时触发"重排"和"重绘"，由于布局改变了。

这这两步只是网页生成的最后两部，关于页面的生成过程，主要有五步：

1. HTML代码转化成DOM
2. CSS代码转化成CSSOM（CSS Object Model）
3. 结合DOM和CSSOM，生成一棵渲染树（包含每一个节点的视觉信息）
4. 生成布局（layout），即将全部渲染树的全部节点进行平面合成
5. 将布局绘制（paint）在屏幕上

这五步里面，第一步到第三步都很是快，耗时的是第四步和第五步。

"生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"（render）。

具体技巧参照 http://www.ruanyifeng.com/blo...。

最后

本文主要从页面和代码两个层面分析提升性能的方案，其中还有不少细节和其余技巧，后续慢慢完善补充。

参考连接： https://blog.csdn.net/w2326ic...
https://blog.csdn.net/w2326ic...
https://www.cnblogs.com/cherr...