回流跟重绘

一、 什么是重绘和回流

在 html 中，每个元素都可以理解成一个盒子，在浏览器解析过程中，会涉及到回流和重绘：

•   回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
•   重绘：当计算好盒子模型的位置、大小及其其他属性后，浏览器根据每个盒子特性进行绘制

具体的浏览器解析渲染机制如下所示：

具体的浏览器解析渲染机制如下所示：

• 解析HTML，生成DOM树，解析CSS，生成CSSOM树

• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)

• Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）

• Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素

• Display:将像素发送给GPU，展示在页面上 

在页面初始渲染阶段，回流不可避免的触发，可以理解成页面一开始是空白的元素，后面添加了新的元素使页面布局发生改变

当我们对 DOM 的修改引发了 DOM几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性，然后再将计算的结果绘制出来

当我们对 DOM的修改导致了样式的变化（color或background-color），却并未影响其几何属性时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式，这里就仅仅触发了回流

二、  什么会引起回流

1. 页面渲染初始化
2. DOM结构变化，比如删除了某个节点；
3. render树变化，比如减少了padding
4. 窗口resize事件触发
5. 最复杂的一种：获取某些属性，引发回流 很多浏览器会对回流做优化，他会等到足够数量的变化发生，在做一次批处理回流。 但是除了render树的直接变化。 当获取一些属性时，浏览器为了获得正确的值也会触发回流。这样就使得浏览器的优化失效了
   1. 这些属性包括
   2. offsetTop, offsetLeft, offsetWidth, offsetHeight
   3. scrollTop/Left/Width/Height
   4. clientTop/Left/Width/Height
   5. width,height
   6. 调用了getComputedStyle(), 或者 IE的 currentStyle

var s = document.body.style;

s.padding = "2px"; // 回流+重绘

s.border = "1px solid red"; // 再一次 回流+重绘

s.color = "blue"; // 再一次重绘

s.backgroundColor = "#ccc"; // 再一次 重绘

s.fontSize = "14px"; // 再一次 回流+重绘

// 添加node，再一次 回流+重绘

document.body.appendChild(document.createTextNode('abc!'));

可以看出，回流一定伴随着重绘，而重绘却可以单独出现

可以理解为，路人甲摔断了腿或者抽脂之后，病怏怏导致头发也变白了(回流+重绘)；但是炮灰乙却仅仅是去村口王师傅那里烫了头(重绘)

回流对性能产生了一定的影响，尽管浏览器机智地帮我们进行了批处理，但是仍然存在着上述诸多阔怕的属性，一获取就回流。怎么解决？

三、 减少回流

1. 避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。
2. 避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。
3. 避免多次读取offsetLeft等属性。无法避免则将它们缓存到变量。
4. 将复杂的元素绝对定位或固定定位，使它脱离文档流。否则回流代价十分高

补充：改变字体大小会引发回流