介绍一下重绘与回流?

268 阅读1分钟

回流一定会发生重绘,重绘不一会发生回流

回流(Reflow)

  • 页面dom元素的增加和删除
  • 窗口发生改变
  • 字体大小发生改变
  • 元素内容发生改变
  • 元素尺寸或位置法发生改变

重绘(Repain)

  • color发生改变
  • background-color发生改变
  • visibility发生改变

如何避免

  • 避免使用table布局
  • 避免设置多层内联样式
  • 避免使用CSS表达式
  • 将动画效果应用到absolute或fixed的元素上
  • 先将元素设display: none;然后对节点操作不会引发回流和重绘,只有当期发生改变的时候会引发重绘与回流。