前端知识

# 重绘和回流

# 重排/回流 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 性能比较高。

← 白屏 →