【温故而知新】HTML回流和重绘

news2025/2/7 0:18:45

概念

HTML回流和重绘是浏览器渲染页面时的两个重要过程。

回流（reflow）指的是浏览器在渲染页面时，根据页面的结构和样式计算元素的布局和位置。当页面布局或元素位置发生变化时，浏览器需要重新计算元素的布局，这个过程就是回流。比如，修改了元素的宽高、位置、字体大小等属性，都会触发回流。回流的开销比较大，因为它需要遍历整个DOM树，计算元素的位置和大小。

重绘（repaint）指的是浏览器根据元素的样式属性重新绘制元素的外观。当元素的样式属性发生变化时，浏览器会重新绘制元素，但不会重新计算布局。重绘的开销相对较小，因为它只需要重新绘制受到影响的部分，而不需要重新计算布局。

一般情况下，回流会导致重绘，但重绘不一定会导致回流。因为回流的开销比较大，所以在编写页面时应尽量减少回流的次数。

以下是一些常见的会触发回流和重绘的操作：

修改元素的宽度、高度、位置等属性
修改元素的字体大小、字体样式等属性
添加或移除元素
修改元素的内容
修改元素的背景色、边框样式等属性
修改元素的class属性
修改文档的样式表

为了减少回流和重绘的次数，可以采取以下一些优化策略：

使用CSS3的transform属性来实现动画效果，而不是修改元素的位置属性。
使用虚拟DOM技术，将多次DOM操作合并为一次操作。
尽量减少直接操作样式属性，可以使用类名来改变元素的样式。
避免频繁修改文档样式表，可以将样式属性写在内联样式中。
尽量使用position: absolute或fixed来定位元素，避免影响其他元素的布局。

案例

一些可能触发HTML回流和重绘的简单案例代码：

改变元素的宽度和高度：

<div id="box" style="width: 100px; height: 100px;"></div>

<script>
    var box = document.getElementById('box');
    box.style.width = '200px'; // 触发回流和重绘
    box.style.height = '200px'; // 触发回流和重绘
</script>

<div id="text" style="font-size: 12px;">Hello, World!</div>

<script>
    var text = document.getElementById('text');
    text.style.fontSize = '16px'; // 触发回流和重绘
</script>

添加或移除元素：

<button id="addBtn">添加元素</button>
<div id="container"></div>

<script>
    var addBtn = document.getElementById('addBtn');
    var container = document.getElementById('container');

    addBtn.addEventListener('click', function() {
        var div = document.createElement('div');
        div.textContent = 'New element';
        container.appendChild(div); // 触发回流和重绘
    });
</script>

修改元素的内容：

<div id="text">Hello, World!</div>

<script>
    var text = document.getElementById('text');
    text.textContent = 'Hello, JavaScript!'; // 只触发重绘，不触发回流
</script>

修改元素的背景色：

<div id="box" style="background-color: red; width: 100px; height: 100px;"></div>

<script>
    var box = document.getElementById('box');
    box.style.backgroundColor = 'blue'; // 只触发重绘，不触发回流
</script>