重绘和回流

目录

什么是重绘？

什么是回流

如何减少回流？

---

什么是重绘？

        重绘：当渲染树中的一些元素需要更新属性时，而这些属性只是影响元素的外观、风格、而不是影响布局的操作，比如：backgrond-color。(通过js等方式引起的元素背景色文字大小等样式变化造成的)

---

什么是回流

        回流：当渲染树中的一部分（或全部）因为元素的尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作时，这样的操作称为回流。例如：display:none（通过对dom结构进行了大小样式等结构的改变）

简单来说，仅改变样式不改变尺寸位置等等属于重绘，反之就是回流

回流一定会发生重绘、重绘不一定会引发回流。回流所需要的成本比重绘高的多

---

如何减少回流？

• 使用transform替代top
• 不要把节点的属性放在一个循环里当成循环里的变量
• 不要使用table布局，可能很小的一个小改动会造成整个table的重新布局
• 把DOM离线后修改，比如：使用documentFragment对象在内存里操作DOM
• 不要一条一条的修改DOM样式，预期这样不如先预定义好css的class，然后修改DOM的className

额外知识：

        display:none         不占位置      重绘和回流

        visibility:hidden     占位置             重绘