Skip to main content

重绘和重排

https://icode.best/i/74789833131891

重排（reflow）

任何页面布局和几何属性的改变都会触发重排，比如：

  • 页面渲染初始化；(无法避免)
  • 添加或删除可见的 DOM 元素；
  • 元素位置的改变；
  • 改变元素尺寸（宽、高、内外边距、边框等）；
  • 浏览器窗口尺寸的变化（resize 事件发生时）；
  • 填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；
  • 读取某些元素属性：（offsetLeft/Top/Height/Width,　 clientTop/Left/Width/Height,　 scrollTop/Left/Width/Height,　 width/height,　 getComputedStyle(),　 currentStyle(IE)　)

重绘(repaint)

改变元素外观属性。如：color，background-color 等。 这就是所谓的硬件加速！将使用了 will-change: transform 属性的元素单独提升为一层，避免动画位置发生改变的时候的就需要不停的重排，如果渲染速度不够快，还会掉帧，动画显得卡顿。但是将其提升为独立一层，直接交给 GPU 处理，无论怎么变化，不会影响原有图层的 GraphicsContext

GPU 加速

CSS 中的以下几个属性能触发硬件加速：

  • transform
  • opacity
  • filter
  • will-change