回流（reflow）与重绘（repaint）

什么是回流（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,下降回流成本