重绘和回流#

重排/回流 reflow#

页面生成过程#

渲染#

重排比重绘大#

重绘 repaint#

发生重排的情况#

• 页面初始渲染，这是开销最大的一次重排
• 添加/删除可见的DOM元素
• 改变元素位置
• 改变元素尺寸，比如边距、填充、边框、宽度和高度等
• 改变元素内容，比如文字数量，图片大小等
• 改变元素字体大小
• 改变浏览器窗口尺寸，比如resize事件发生时
• 激活CSS伪类（例如：:hover）
• 设置 style 属性的值，因为通过设置style属性改变结点样式的话，每一次设置都会触发一次reflow
• 查询某些属性或调用某些计算方法：offsetWidth、offsetHeight等，除此之外，当我们调用 getComputedStyle方法，或者IE里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。

重排优化建议#

减少重排范围#

减少重排次数#

总结#

• 渲染的三个阶段 Layout，Paint，Composite Layers。
  • Layout：重排，又叫回流。
  • Paint:重绘，重排重绘这些步骤都是在 CPU 中发生的。
  • Composite Layers：CPU 把生成的 BitMap（位图）传输到 GPU，渲染到屏幕。 -CSS3 就是在 GPU 发生的：Transform Opacity。在 GPU 发生的属性比较高效。所以 CSS3 性能比较高。