【前端面经】CSS-回流和重绘

这篇文章距离上次修改已过221天，其中的内容可能已经有所变动。

回流和重绘是浏览器渲染渲染层面的术语，主要发生在样式更改导致文档中元素的尺寸、形状或位置发生变化时。

回流（Reflow）：当DOM的变动影响了元素的尺寸或位置，浏览器需要重新计算元素的位置和尺寸，此过程就称为回流。

重绘（Repaint）：当一个元素的样式变化不影响其尺寸或位置，但需要更新其视觉表现时（例如更改了颜色或背景），浏览器会重新绘制元素的视觉表现，这个过程称为重绘。

如何减少回流和重绘：

避免频繁改变类（class）或样式（inline style），尽量使用CSS类来处理样式变化。
对需要多次更改的元素使用absolute或fixed定位，这样每次变动只引起回流一次。
使用DocumentFragment或div来批量更改DOM，完成后再添加到文档中。
对列表进行批量操作时，可以先隐藏元素（display: none），完成后一次性显示。
使用requestAnimationFrame、setTimeout或setInterval来对更新进行调度，减少频繁的更新。
使用window.getComputedStyle()来获取样式值，而不是使用element.style，因为后者会触发回流。

示例代码：

// 不好的示例，频繁更改类会引起多次回流和重绘
for (let i = 0; i < items.length; i++) {
    items[i].className = 'active';
}

// 好的示例，批量更改后一次性更新DOM
let activeClass = 'active';
for (let i = 0; i < items.length; i++) {
    items[i].classList.add(activeClass);
}

// 使用requestAnimationFrame来优化动画
requestAnimationFrame(function() {
    for (let i = 0; i < items.length; i++) {
        items[i].style.color = 'red';
    }
});

在编写CSS和JavaScript时，应当尽量减少回流和重绘的发生，以提升页面性能。

【前端面经】CSS-回流和重绘

评论已关闭

推荐阅读