浏览器的渲染机制、重绘回流、以及前端性能优化

浏览器的渲染机制

这里先借用周啸天老师的一张图来大致描述浏览器的渲染机制

即浏览器渲染页面的步骤分为五步：

1. 处理HTML标记并构造DOM树
2. 处理CSS并构建CSSOM树
3. 将DOM和CSSOM组合成一个Render树
4. 根据构建的渲染树，开始布局。（布局是确定呈现树中所有节点的宽度、高度和位置。渲染树标识显示哪些节点（即使不可见）及其计算样式，但不标识每个节点的尺寸或位置。为了确定每个对象的确切大小和位置，浏览器从渲染树的根开始遍历它。
   第一次确定节点的大小和位置称为布局，随后对节点大小和位置的重新计算称为回流。假设初始布局发生在返回请求的图像资源之前，并且由于没有声明图像的大小，因此一旦请求到图像资源，知道图像大小后，就会有回流。
5. 将各个节点绘制到屏幕上。绘制包括将元素的每个可视部分绘制到屏幕上，包括文本、颜色、边框、阴影和替换的元素（如按钮和图像）。

重绘回流

重绘：元素样式的更改（但不影响大小和位置）将会发生重绘。

• 比如颜色color的变化会导致重绘。

回流：元素的位置或大小发生了变化，将会发生回流。

• 比如元素的width height margin padding等的修改会导致回流。

两者的关系：回流一定会触发重绘，而重绘不一定会触发回流。

前端性能优化方案

因此，可以从以下几个方面来优化前端的性能：

1、减少 HTTP 请求数量

在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

• CSS Sprites

国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

• 合并 CSS 和 JS 文件

现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

2、采用 lazyLoad

俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

3、控制资源文件加载优先级

浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。

一般情况下都是CSS在头部，JS在底部。

4、利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

4、减少重排（即回流）

• 如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。
• 像transform、opacity、filters…，这些属性会触发硬件加速，不会引发回流和重绘。因此，可以考虑，使用translate替代位置的变化，使用opacity替代visibility

5、减少 DOM 操作

• 避免使用table布局，可能很小的一个小改动会造成整个table的重新布局

6、图标使用字体图标替换