作为一个前端开发人员，每个人应该都经常听到回流和重绘。可是这两步具体是做了什么的。

目录

浏览器渲染过程

回流

重绘

何时会触发回流和重绘

浏览器的优化机制

总结

---

浏览器渲染过程

先借用网上的一张图，从浏览器的渲染过程来从头到尾的讲解一下回流重绘。

从上面的图中我们可以看到,浏览器渲染过程大致做了这些事情：

1. 解析HTML，生成DOM树，解析CSS，生成CSSOM树
2. 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
3. Layout(回流):根据渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
4. Painting(重绘):根据渲染树以及上面回流得到的几何信息，得到节点的绝对像素
5. Display:将像素发送给GPU，展示在页面上。（在这一步还会有很多操作，比如DPU会将多个层合并为一个层；css3硬件加速的原理则是新建合成层。这里就不一一细说了)

构建渲染树，浏览器主要完成了以下工作：

1. 从DOM树的根节点开始遍历每个可见节点。
2. 对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。

根据每个可见节点以及其对应的样式，组合生成渲染树。

上面说到浏览器会遍历可见节点，那么什么是不可见节点呢？不可见节点主要分为两类：

1. 浏览器本身不会渲染的节点；（link,meta，script等等）
2. 通过CSS隐藏的节点，比如display:none;注意，通过visibility和opacity隐藏的节点还会渲染在dom树上。只有通过display:none;隐藏的节点才不会渲染在dom树上；

回流

前面我们通过构造渲染树，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。

重绘

通过构造渲染树和回流阶段，我们知道了可见节点，以及可见节点的样式和具体的几何信息(位置、大小)，将渲染树的每个节点转换为屏幕上的实际像素，这个阶段就叫做重绘

现在我们知道了什么是回流和重绘，下面我们探讨一下什么时候会触发回流，什么时候会触发重绘。

何时会触发回流和重绘

前面我们知道了，回流只要是计算元素节点的几何信息，那么当我们修改元素的集合信息的时候，就会发生回流和重绘。

比如：

• 添加或一处节点
• 修改元素位置
• 元素本身的几何信息发生变化（宽，高，内外边距和边框）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
• 页面初始渲染
• 浏览器的窗口尺寸变化（因为元素的大小是根据viewpost计算的）

需要注意的是：回流一定会触发重绘，而重绘不一定会回流

根据改变的范围和程度，渲染树中或大或小的部分需要重新计算，有些改变会触发整个页面的重排，比如，滚动条出现的时候或者修改了根节点。

浏览器的优化机制

现代浏览器是非常智能的，因为每次回流，重绘都会造成很大的消耗，所以浏览器会通过队列批量修改来优化整个过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个最大值值，才清空队列。

注意：当获取布局信息时，会强制清空队列刷新；

比如：

• offsetTop、offsetLeft、offsetWidth、offsetHeight
• scrollTop、scrollLeft、scrollWidth、scrollHeight
• clientTop、clientLeft、clientWidth、clientHeight
• getComputedStyle()

因为以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此，我们在修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列。如果要使用它们，最好将值缓存起来。

总结

本文主要通过浏览器的渲染机制讲了回流、重绘以触发条件；同时整理了浏览器的优化机制，希望可以帮助大家更好的理解回流重绘。