你在做网页开发的时候，有没有遇到过页面加载慢、操作卡顿这些情况呢？其实啊，很多时候这都是因为页面的重绘和回流太频繁造成的。接下来，咱们就一起聊聊怎么减少重绘和回流，提升页面的渲染速度。
一、啥是重绘和回流
在说优化技巧之前，咱先搞清楚重绘和回流到底是啥。简单来说，回流就是当DOM的变化影响了元素的布局信息（元素的宽高、边距、位置这些），浏览器需要重新计算元素的布局信息，将其安放到界面中的正确位置，这个过程就叫回流，也叫重排。而重绘呢，是当一个元素的外观发生改变，但没有影响到布局信息，浏览器会将新样式应用到元素上，这个过程就叫重绘。
给大家举个例子：
// 技术栈：Javascript
// 获取一个元素
const element = document.getElementById('myElement');
// 改变元素的宽度，这会触发回流
element.style.width = '200px';
// 改变元素的背景颜色，这只会触发重绘
element.style.backgroundColor = 'red';
从这个例子可以看出，改变元素的布局信息会触发回流，而只改变外观样式就只会触发重绘。一般来说，回流的代价比重绘要大，因为回流需要重新计算布局，会消耗更多的性能。
二、为啥要减少重绘和回流
重绘和回流会消耗浏览器的性能，尤其是在频繁操作DOM的时候，会让页面变得很卡顿，用户体验就会很差。比如说你做一个实时更新数据的表格，每次更新数据都要重新计算布局和绘制，那表格的滚动和数据更新就会变得很慢。
再看个例子：
// 技术栈：Javascript
const list = document.getElementById('list');
for (let i = 0; i < 1000; i++) {
const item = document.createElement('li');
item.textContent = `Item ${i}`;
// 每次添加元素都会触发回流
list.appendChild(item);
}
在这个例子里，循环添加了1000个列表项，每次添加都会触发回流，这就会导致性能问题。所以，减少重绘和回流是提升页面渲染速度的关键。
三、减少重绘和回流的技巧
1. 批量修改DOM
如果你要对DOM进行多次修改，最好把这些修改集中起来，一次性完成。可以先在内存中创建一个文档片段（DocumentFragment），在这个片段里进行所有的修改，最后再把这个片段添加到DOM中，这样就只触发一次回流和重绘。
看下面的例子：
// 技术栈：Javascript
const list = document.getElementById('list');
// 创建一个文档片段
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const item = document.createElement('li');
item.textContent = `Item ${i}`;
// 将元素添加到文档片段中
fragment.appendChild(item);
}
// 最后将文档片段添加到DOM中，只触发一次回流
list.appendChild(fragment);
这个例子里，我们先把所有的列表项添加到文档片段中，最后一次性把文档片段添加到DOM中，这样就只触发了一次回流，性能就提升了很多。
2. 使用class批量修改样式
如果要修改元素的多个样式，不要一个一个地修改样式属性，而是通过添加或移除class来一次性修改多个样式。因为修改class只触发一次重绘或回流。
// 技术栈：Javascript
const element = document.getElementById('myElement');
// 定义一个包含多个样式的class
const newClass = 'new-style';
// 添加class
element.classList.add(newClass);
CSS部分：
/* CSS代码 */
.new-style {
width: 200px;
height: 200px;
background-color: red;
}
在这个例子中，我们通过添加一个class来一次性修改元素的宽度、高度和背景颜色，这样就只触发了一次重绘或回流。
3. 使用绝对定位或固定定位
绝对定位和固定定位的元素脱离了文档流，对它们的修改不会影响到其他元素的布局，所以可以减少回流的范围。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 父元素相对定位 */
.parent {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
}
/* 子元素绝对定位 */
.child {
position: absolute;
top: 50px;
left: 50px;
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<script>
// 技术栈：Javascript
const child = document.querySelector('.child');
// 修改绝对定位元素的位置，不会影响其他元素的布局
child.style.top = '100px';
</script>
</body>
</html>
在这个例子中，子元素使用了绝对定位，修改它的位置不会影响到父元素和其他元素的布局，所以只触发了自身的回流。
4. 避免频繁读取布局信息
当你读取元素的布局信息（如offsetWidth、offsetHeight、scrollTop等）时，浏览器为了保证数据的准确性，会强制触发回流。所以，尽量避免在修改DOM的过程中频繁读取布局信息。
// 技术栈：Javascript
const element = document.getElementById('myElement');
// 先读取布局信息
const width = element.offsetWidth;
// 再进行修改
element.style.width = (width + 100) + 'px';
在这个例子中，我们先读取了元素的宽度，然后再进行修改，避免了在修改过程中频繁读取布局信息，减少了回流的次数。
四、应用场景
1. 实时数据更新的页面
像股票行情页面、实时监控页面这些，需要不断更新数据并展示在页面上。如果不注意减少重绘和回流，页面就会变得很卡顿。通过上面的优化技巧，可以让页面在实时更新数据时也能保持流畅。
2. 动画效果页面
在实现动画效果时，元素的位置、大小、透明度等会不断变化，这就会频繁触发重绘和回流。使用绝对定位、批量修改DOM等技巧可以减少重绘和回流，让动画更加流畅。
3. 表单验证页面
当用户输入表单信息进行验证时，可能会动态显示错误提示信息，这也会涉及到DOM的修改。通过优化重绘和回流，可以让表单验证的反馈更加及时和流畅。
五、技术优缺点
优点
- 提升页面性能：减少重绘和回流可以显著提升页面的渲染速度，让页面更加流畅，用户体验更好。
- 兼容性好：这些优化技巧不依赖于特定的浏览器或技术，在各种浏览器和设备上都能适用。
缺点
- 代码复杂度增加：为了减少重绘和回流，可能需要对代码进行一些调整和优化，这会增加代码的复杂度，尤其是在处理复杂的DOM操作时。
- 调试难度增加：由于优化后的代码可能会改变DOM操作的顺序和方式，调试时可能会更困难。
六、注意事项
- 合理使用优化技巧：不是所有的场景都需要使用这些优化技巧，要根据实际情况合理使用。如果页面的DOM操作比较简单，可能不需要进行复杂的优化。
- 注意代码的可读性：在优化代码时，要注意保持代码的可读性，避免为了优化而让代码变得难以理解和维护。
- 测试和验证：在应用优化技巧后，要进行充分的测试和验证，确保页面的性能得到了提升，同时没有引入新的问题。
七、文章总结
减少重绘和回流是提升页面渲染速度的重要手段。通过批量修改DOM、使用class批量修改样式、使用绝对定位或固定定位、避免频繁读取布局信息等技巧，可以有效地减少重绘和回流的次数，提高页面的性能。在实际开发中，要根据具体的应用场景合理使用这些技巧，同时注意代码的复杂度和可读性，进行充分的测试和验证。这样才能让页面在各种设备和浏览器上都能快速、流畅地渲染。
评论