重绘和回流（Repaint & Reflow），如何优化

1.浏览器渲染机制

• 浏览器采用流式布局（flow Based Layout）
• 浏览器会把HTML解析成DOM,把css解析成CSSDM,DOM和CSSOM合并就会产生渲染树（Render Tree）
• 有了renderTree 我们就知道节点的样式，然后计算大小和位置，把节点绘制到页面上
• 由于浏览器的流式布局，对renderTree的计算通常遍历一次就可以完成，table内部元素除外，他们可能要计算多次，通常要花费3倍于同等元素的时间，这也是为什么要避免使用table布局的原因之一

2.重绘

由于节点的几何属性发生改变或者由于样式改变而不影响布局的，称为重绘，例如outline,visibility,color,background-color等，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点的可见性。

3.回流

回流是布局几何属性改变成为回流，回流是影响浏览器的关键因素，因为涉及到部分页面（或者整个页面）的布局更新，一个元素的回流可能导致所有子元素以及紧随其后的兄弟节点、祖先节点元素的回流。 回流一定会发生重绘，重绘不一定会引发回流

4.浏览器优化

现代浏览器大多都通过队列机制来批量更新布局，浏览器会把修改操作放在队列中，至少一个浏览器刷新（16.6ms）才清空队列，但当你获取布局信息时，队列中可能存在影响这写属性和方法返回值的操作，即使没有，浏览器也会强制清空队列，触发重绘和回流来保证返回正确的值 主要有一下方法和属性 offsetTop、offsetLeft、offsetWidth、offsetHeight scrollTop、scrollLeft、scrollWidth、scrollHeight clientTop、clientLeft、clientWidth、clientHeight width、height getComputedStyle() getBoundingClientRect() 所以，我们应该避免频繁的使用上述的属性，他们都会强制渲染刷新队列。

5.减少重绘与回流

1.css . 减少重绘与回流 　　1.CSS 使用 transform 替代 top 使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局) 避免使用table布局，可能很小的一个小改动会造成整个 table 的重新布局。 尽可能在DOM树的最末端改变class，回流是不可避免的，但可以减少其影响。尽可能在DOM树的最末端改变class，可以限制了回流的范围，使其影响尽可能少的节点。 避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。 2.JavaScript 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。