什么是回流（reflow），什么是重绘（repaint），以及它们之间的区别？

浏览器的渲染过程

首先我们要了解浏览器的渲染过程：

　　1.解析 HTML,生成 DOM 树，解析 CSS,生成 CSSOM树

　　2.将 DOM树 和 CSSOM树结合，生成渲染树（Render Tree）

　　3.渲染树的每个元素包含的内容都是计算过的，它被称之为布局（layout）。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素

　　4.将渲染树的各个节点绘制到屏幕上，这一步被称为绘制（painting）

 

　　即：解析html和css构建dom树和cssom树   ->   构建渲染树（render tree）  ->   布局render树（layout）  ->   绘制render树（painting）

 

回流（reflow）

　　回流又称重排，当浏览器发现布局（layout）发生了变化，这个时候就需要倒回去重新渲染，这个过程叫 回流（reflow）。回流几乎是无法避免的，因为只要用户进行了交互操作，就会发生页面的一部分重新渲染。

 

重绘（repaint）

　　重绘（repaint）则是当我们改变某个元素的背景色，文字颜色，边框颜色等不影响它周围或内部布局的属性是，屏幕的一部分要重画，但是元素的几何尺寸和位置没有发生改变。

 

需要注意的是 

　　display：none 会触发回流（reflow），而

　　visibility：hidden 属性表示隐藏元素，元素任然占据着布局空间，并没有改变布局和几何尺寸，所以只会触发 重绘（repaint）

 

 

何时引起回流（reflow）

现代浏览器会对回流做优化，它会等到足够数量的变化发生，再做一次批处理回流

 

　　1.页面的第一次渲染（初始化）

　　2.DOM树的变化（如：增删节点）

　　3.Render树的变化（如：padding 改变）

　　4.浏览器窗口的尺寸变化 resize

　　5.fontsize的变化

　　6.获取元素的某些属性

　　　　浏览器为了获取正确的最新属性值也会提前触发回流，这些属性包括：

　　　　　　offsetLest、 offsetTop、 offsetWidth、 offsetHeight、 scrollTop/Left/Width/Height、

　　　　　　clientTop/Left/Width/Height、 调用了 getComputedStyle()。

 

何时引起重绘（repaint）

　　背景色、颜色的改变等会引起重绘（repaint）

 

回流和重绘的区别

　　当元素的位置或者几何尺寸发生改变时会触发回流，

　　而当背景色和颜色的改变会引起重绘，

　　注意：回流一定会发生重绘，而重绘不一定发生回流！

　　

为了优化性能，我们需要减少回流、重绘的触发次数

　　1.用 transform 做形变和位移可以减少回流

　　2.避免组个修改节点样式，尽量一次性修改

　　3.可以将需要多次修改的 DOM 元素设置 display：none ，操作完再显示（因为隐藏元素不在 render 树内，因此修改隐藏元素不会触发回流重绘）

　　4.避免多次读取某些属性

　　5.通过绝对位移将复杂的节点元素脱离文档流，形成新的 Render Layer,降低回流成本

　　

标签：repaint,浏览器,reflow,渲染,元素,回流,重绘
来源： https://www.cnblogs.com/bryanfu/p/15059250.html