回流(reflow)与重绘(repaint)，KFC与MC

本文被收纳于： 从零开始的大前端筑基之旅(深刻浅出，持续更新～)

回流与重绘，会影响页面性能，每次这两个都会被同时说起，关系就好像KFC边上必定会有MC同样亲密的让人摸不到头脑。

要理解回流与重绘，首先要明白浏览器请求回来以后发生了什么

浏览器的渲染过程

在页面加载时，浏览器渲染过程以下：

1. 解析HTML，生成DOM树，解析CSS，生成CSSOM树
2. 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
3. Layout(回流):根据生成的渲染树，进行回流(Layout)，获得节点的几何信息（位置，大小）
4. Painting(重绘):根据渲染树以及回流获得的几何信息，获得节点的绝对像素
5. Display:将像素发送给GPU，展现在页面上。（这一步其实还有不少内容，好比会在GPU将多个合成层合并为同一个层，并展现在页面中。而css3硬件加速的原理则是新建合成层）

为了构建渲染树，浏览器主要完成了如下工做：

1. 从DOM树的根节点开始遍历每一个可见节点。
2. 对于每一个可见的节点，找到CSSOM树中对应的规则，并应用它们。
3. 根据每一个可见节点以及其对应的样式，组合生成渲染树。

渲染树中只会包含可见节点。不可见节点包括：

• 一些不会渲染输出的节点，好比script、meta、link等。
• 一些经过css进行隐藏的节点。如display:none。

注意，利用visibility和opacity隐藏的节点，仍是会显示在渲染树上的。

因为浏览器使用流式布局，对Render Tree的计算一般只须要遍历一次就能够完成，但table及其内部元素除外，他们可能须要屡次计算

回流

经过构造渲染树，将可见DOM节点以及它对应的样式结合起来，这时候须要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。每一个页面至少须要一次回流，就是在页面第一次加载的时候，这时候是必定会发生回流的，由于要构建render tree。

重绘

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

什么时候发生回流重绘

当Render Tree中部分或所有元素的尺寸、结构、或某些属性发生改变时，浏览器将从新渲染部分或所有文档，这时发生的就是回流。

会致使回流的操做：

• 页面首次渲染
• 浏览器窗口大小发生改变
• 元素尺寸或位置发生改变（包括外边距、内边框、边框大小、高度和宽度等）
• 元素内容变化（文字数量或图片大小，好比用户在input框中输入文字等等）
• 元素字体大小变化
• 添加或者删除可见的DOM元素
• 激活CSS伪类（例如：:hover）
• 查询某些属性或调用某些方法

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并从新绘制它，这个过程称为重绘。

回流必定会触发重绘，而重绘不必定会回流

性能与优化

回流比重绘的代价要高，至于具体的资源开销跟render树有多少节点须要从新构建有关。有时即便仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。

大多数浏览器都会经过队列化修改并批量执行来优化重排过程。：

浏览器会维护一个队列，把全部引发回流和重绘的操做放入队列中，若是队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样能够把屡次回流和重绘变成一次。

可是！当你获取布局信息的操做的时候，会强制队列刷新，好比当你访问如下属性或者使用如下方法：

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

由于队列中可能会有影响到这些属性或方法返回值的操做，即便你但愿获取的信息与队列中操做引起的改变无关，浏览器也会强行清空队列，确保你拿到的值是最精确的。

手动优化

1. 避免频繁操做样式，最好一次性重写style属性，或者将样式列表定义为class并经过更改元素class属性来应用样式。

   经过style属性设置样式致使回流。避免设置多级内联样式，由于每一个都会形成回流，样式应该合并在一个外部类，这样当该元素的class属性可被操控时仅会产生一个reflow。

2. 避免频繁操做DOM，建立一个documentFragment，在它上面应用全部DOM操做，最后再把它添加到文档中。

   DocumentFragment 节点不属于文档树，在把它插入文档节点以前，随便给他增删节点都不会引发回流

   使用cloneNode和replaceChild有相似的效果

3. 先为元素设置display: none，操做结束后再把它显示出来。由于在display属性为none的元素上进行的DOM操做不会引起回流和重绘。

4. 避免频繁读取会引起回流/重绘的属性，若是确实须要屡次使用，就用一个变量缓存起来。

5. 对具备复杂动画的元素使用绝对定位，使它脱离文档流，不然会引发父元素及后续元素频繁回流。

6. 避免使用CSS表达式（例如：calc()）

7. 避免使用table布局

   table是个和罕见的能够影响在它们以前已经进入的DOM元素的显示的元素。即便一些小的变化将致使表格(table)中的全部其余节点回流。

8. css3硬件加速（GPU加速）

   使用css3硬件加速，可让transform、opacity、filters这些动画不会引发回流重绘

若是你收获了新知识，或者收获了左侧精美图片，请点个赞吧～

一个赞顶100阅读量，告诉我你曾来过、看过，并在这里不枉此行吧！！

以上内容参考了下面的资料，若有雷同，那很正常。。(这句话真不错～)

参考文档：

1. 回流（reflow）与重绘（repaint）
2. 你真的了解回流和重绘吗
3. 浏览器的回流与重绘 (Reflow & Repaint)
4. 回流与重绘：CSS性能让JavaScript变慢？