重绘与回流.md

重绘

当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘

回流

将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。

发生回流的几种情况：

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
• 页面一开始渲染的时候（这肯定避免不了）
• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

回流一定会触发重绘，而重绘不一定会回流

这是由于浏览器的渲染过程决定的，其过程如下：

• 解析HTML，生成DOM树，解析CSS，生成CSSOM树
• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
• Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
• Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
• Display:将像素发送给GPU，展示在页面上。

如何减少重绘和回流

减少回流和重绘其实就是需要减少对render tree的操作（合并多次多DOM和样式的修改），并减少对一些样式信息的请求，尽量利用好浏览器的优化策略。

• 改变样式通过添加class或el.style.cssText，而不是el.style.单个属性
• 尽可能少的修改dom，对于需要频繁操作的dom可以让其暂避重绘检查：
  • 使用DocumentFragment进行缓存操作,引发一次回流和重绘
  • 使用display:none暂时隐藏当前处理的dom
  • 使用cloneNode(true or false) 和 replaceChild
• 对于需要动画的元素使用定位使其脱离文档流