CSS之重绘与回流

重绘（Repaint）

当页面中元素样式的改变并不影响它在文档流中的位置时（例如改变颜色、阴影等），浏览器会进行重绘，即重新绘制元素的外观。

回流（Reflow）

当元素的大小、位置、隐藏等改变时，浏览器需要重新计算元素的几何信息，并重新渲染页面，这个过程称为回流。会影响当前元素、祖先元素和后代元素。

性能影响

• 回流比重绘的代价要高。回流的过程比重绘复杂，因为它涉及到更多的计算。
• 回流必将引发重绘，而重绘不一定会引发回流。

触发条件

• 添加或删除可见的DOM元素
• 元素尺寸改变
• 内容变化，例如用户在input框中输入文字
• 页面渲染初始化
• 浏览器窗口尺寸改变 —— 触发重排(回流)。

如何减少重绘和回流

• 使用transform替代top。
• 使用visibility替换display: none —— 因为前者只会触发重绘，后者会触发回流（重排）。
• 不要使用table布局，因为可能很小的一个小改动会导致整个table的重新布局。
• 避免在循环中对DOM进行频繁操作，可以使用documentFragment进行批量操作。
• 避免频繁地读取会引发回流/重绘的属性，如果需要多次使用，可以用变量缓存起来。

代码示例

回流

HTML：

<div id="container">
    <p>Some text here...p>
div>

JavaScript：

let container = document.getElementById('container');

// 这里会触发回流，因为改变了元素的几何属性
container.style.padding = '20px';

// 这又触发了一次回流
container.style.borderWidth = '5px';

为了减少回流，可以合并多次改变样式的操作，使用cssText合并成一次操作：

container.style.cssText = 'padding: 20px; border-width: 5px;';

或者使用CSS类：

.custom-style {
    padding: 20px;
    border-width: 5px;
}

container.classList.add('custom-style');

重绘

CSS:

    


    
"box">

JavaScript:

document.querySelector('.box').style.backgroundColor = 'red';

这段代码改变了盒子的外观而没有改变它的布局，因此仅仅会导致重绘。

减少重绘和回流

1.使用cssText或者CSS类代替多次DOM操作

2. 使用fragment或clone

当需要对DOM进行大量修改时，最好的做法是使用DocumentFragment或者是clone一个元素，在副本上进行所有操作，然后再把它放回文档中。

let list = document.getElementById('list'),
    frag = document.createDocumentFragment(),
    items = ['Item 1', 'Item 2', 'Item 3'];

// 使用DocumentFragment作操作
items.forEach(item => {
    let li = document.createElement('li');
    li.textContent = item;
    frag.appendChild(li);
});

// 把DocumentFragment一次性添加到DOM中，减少页面回流
list.appendChild(frag);

这样做的好处在于减少了页面的回流次数：不是每添加一个列表项就回流一次，而是所有项都准备好之后才触发一次回流。