当前位置: 首页 > 工具软件 > reflow > 使用案例 >

如何最小化重绘(repaint)和回流(reflow)

劳英华
2023-12-01

如何最小化重绘(repaint)和回流(reflow)**

  • DOM的增删行为

    • 比如要给某个父元素添加子元素时,这类的操作都可以引起回流,如何添加多个子元素的时候,可以使用documentfragment
  • 几何属性的变化

    • 比如元素宽高发生了变化,border,字体大小发生了变化,这种直接会引起页面布局变化的操作也会引起回流。如果你要改变多个属性,最好将这些属性定义在一个class中,直接修改class名,这样只用引起一次回流
  • 元素的位置变化

    • 修改一个元素的左右margin,padding之类的操作,所以在做元素位移的动画,不要更改margin之类的属性,使用定位脱离文档流后改变位置会更好
  • 获取元素的偏移量属性

    • 例如获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性,浏览器为了保证值的正确也会回流取得最新的值,所以如果你要多次操作,最好取完做个缓存
  • 避免同步布局事件

    • 当我们访问元素的一些属性的时候,会导致浏览器强制清空队列,进行强制同步布局。举个例子,比如说我们想将一个p标签数组的宽度赋值为一个元素的宽度,我们可能写出这样的代码:

      function initP() {
          for (let i = 0; i < paragraphs.length; i++) {
              paragraphs[i].style.width = box.offsetWidth + 'px';
          }
      }
      
    • 这段代码看着没有什么问题,但是可能会造成很大的性能问题,在每次循环的时候,都触发了p标签的width属性,这就导致了一个问题,就是在每次循环的时候,浏览器必须使用上次循环中生效的样式更新操作,才能响应本次循环读取的样式操作,每次循环就导致强制浏览器刷新队列机制,可以优化为:

      const width = box.offsetWidth;
      function initP() {
          for (let i = 0; i < paragraphs.length; i++) {
              paragraphs[i].style.width = width + 'px';
          }
      }
      
 类似资料: