CSS之重绘与回流

2024-02-18 13:36

文章标签 css frontend 回流重绘

本文主要是介绍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:

<head><style>.box {width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body><div class="box"></div>
</body>

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);