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

如何最小化重绘(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';
        }
    }