重绘回流与性能优化

重绘回流性能优化卷

html&css

发布日期: 2021-01-29

文章字数: 1k

阅读时长: 4 分

1. 什么是重绘？

重绘：当渲染树中的某些元素需要更新属性时，这些属性只影响元素的外观和样式，而不影响布局操作，例如background-color，我们称此类操作为重绘。

2. 什么是回流？

回流也叫重排：当渲染树的部分（或全部）因元素的大小、布局、隐藏等变化而需要重建时，会影响布局操作。这种操作称为回流。

常见的导致回流的属性和方法：

任何改变元素形状（元素的位置和大小）的操作都会触发回流。

(1) 添加或移除可见的DOM元素；
(2) 元素尺寸变化——margin、padding、border、width、height
(3) 内容变化，如用户在输入框中输入文字
(4) 浏览器窗口大小发生变化resize事件发生时
(5) 计算offsetWidth和offsetHeight属性（浏览器需要返回最新的布局信息，触发回流重绘）
(6) 设置style属性的值
(7) 修改网页默认字体时。

3. 重绘回流总结：

回流一定会发生重绘，而重绘不一定会导致回流。回流的成本远高于重绘，在父节点中改变子节点很可能导致父节点的一系列回流。

4. 性能优化：

4.1 合并dom与样式的操作

未修改前:

const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';

新版浏览器对其有优化，旧版的浏览器或者在上面代码执行的时候，有其他代码访问了布局信息(上文中的会触发回流的布局信息)，那么就会导致三次重排。

修改后：

const el = document.getElementById('test');
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;';

4.2 脱离文档流后批量修改DOM

批量修改DOM

当我们需要对DOM对一系列修改的时候，可以通过以下步骤减少回流重绘次数：

使元素脱离文档流

对其进行多次修改

将元素带回到文档中。

该过程的第一步和第三步可能会引起回流，但是经过第一步之后，对DOM的所有修改都不会引起回流重绘，因为它已经不在渲染树了。
有三种方式可以让DOM脱离文档流，这里只讨论一种：

隐藏元素，应用修改，重新显示

考虑我们要执行一段批量插入节点的代码：

function appendDataToElement(appendToElement, data) {
    let li;
    for (let i = 0; i < data.length; i++) {
    	li = document.createElement('li');
        li.textContent = 'text';
        appendToElement.appendChild(li);
    }
}

const ul = document.getElementById('list');
appendDataToElement(ul, data);

如果直接执行，由于每次循环都会插入一个新的节点，那么将导致浏览器每次都回流一次。
我们可以使用这三种方式进行优化:
隐藏元素，应用修改，重新显示

这个只会在展示和隐藏节点的时候，产生两次回流

function appendDataToElement(appendToElement, data) {
    let li;
    for (let i = 0; i < data.length; i++) {
    	li = document.createElement('li');
        li.textContent = 'text';
        appendToElement.appendChild(li);
    }
}
const ul = document.getElementById('list');
ul.style.display = 'none';
appendDataToElement(ul, data);
ul.style.display = 'block';

4.3 避免触发同步布局事件 *

在上文，常见的回流场景中有offsetWidth和offsetHeight，还有读取dom读写分离同理

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

每一次循环都会强制浏览器刷新队列。可以优化为:

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