理解 DOM 回流（Reflow）与重绘（Repaint）：性能杀手与优化

好的，各位前端的小伙伴们，大家好！我是你们的老朋友，江湖人称“代码诗人”的程序猿李白。今天，咱们不吟诗作对，来聊聊前端性能优化中两个老生常谈，却又至关重要的概念——DOM 回流（Reflow）与重绘（Repaint）。

想象一下，你的浏览器就像一个勤劳的装修工人，而DOM就是你精心设计的房子。你兴致勃勃地告诉他：“把客厅刷成蓝色！哦，不对，还是绿色吧！再把沙发搬到窗边！哎呀，又觉得搬回来更舒服……”

如果你的指令像机关枪一样突突突地射出来，这位装修工人就得不停地重新测量、计算、粉刷、搬运，累得气喘吁吁。这就是回流和重绘在捣鬼，它们可是前端性能的“两大恶霸”，稍不留神，你的页面就会卡成PPT，用户体验直线下降。

别怕，今天我就要化身“降魔卫士”，带大家深入了解这两个“恶霸”的真面目，并传授一些“独门秘籍”，让大家轻松驾驭它们，打造流畅如丝的网页体验！

第一幕：回流（Reflow）——“伤筋动骨”的重塑

首先，我们来认识一下“回流”这位重量级选手。你可以把它想象成对整个房屋结构进行大规模的调整。

什么是回流？

回流，也称为“重排”，是指浏览器为了重新渲染部分或全部的DOM树，需要重新计算元素的几何属性（位置、大小等）。这就像装修工人需要重新测量房间尺寸、计算家具摆放位置一样，是一个非常耗费性能的操作。

哪些操作会触发回流？

触发回流的因素很多，就像生活中的“蝴蝶效应”，一个小小的改动，可能引发一系列连锁反应。

DOM结构改变： 增删DOM节点，比如appendChild、removeChild等。这相当于你直接改变了房屋的结构，装修工人不得不重新评估整个布局。
元素位置和尺寸改变： 修改元素的宽高、内外边距、边框、位置等。这相当于你移动了墙壁、改变了窗户大小，装修工人必须重新测量和调整。
内容改变： 修改元素的文本内容，尤其是文本长度变化较大时。这相当于你往房间里堆满了东西，装修工人不得不重新考虑空间利用。
浏览器窗口尺寸改变： 调整浏览器窗口大小会触发整个页面的回流。这相当于你的房子突然变大了，装修工人需要重新规划所有的一切。
获取元素的某些属性： 比如 offsetWidth、offsetHeight、scrollTop、scrollLeft、clientTop、clientLeft、getComputedStyle等。这些操作会强制浏览器进行回流，以确保返回的值是最新的。这相当于你不断地问装修工人：“现在客厅有多大？沙发离窗户有多远？” 装修工人只能放下手头的工作，先测量给你看。
激活CSS伪类： 比如 :hover 等。这相当于你突然要求装修工人把灯光调成暖色调，他需要重新调整灯光布局。

回流的影响范围：

回流的影响范围可大可小，取决于你修改的元素以及它在DOM树中的位置。

全局回流： 当修改了<html>元素或者<body>元素时，会触发整个页面的回流。这相当于你把整个房子推倒重建，是最耗费性能的。
局部回流： 当修改了DOM树中某个分支的元素时，只会影响该分支及其相关的元素。这相当于你只装修了客厅，不会影响到卧室。

表格：常见触发回流的操作

操作	描述	影响范围
DOM结构改变	添加、删除DOM节点	局部/全局
元素尺寸/位置改变	修改元素的宽高、内外边距、边框、位置等	局部
内容改变	修改元素的文本内容	局部
浏览器窗口尺寸改变	调整浏览器窗口大小	全局
获取元素属性	offsetWidth、offsetHeight、scrollTop、scrollLeft、clientTop、clientLeft、getComputedStyle等	局部
激活CSS伪类	:hover 等	局部

第二幕：重绘（Repaint）——“粉饰太平”的润色

了解了“回流”这位重量级选手，我们再来看看“重绘”这位轻量级选手。

什么是重绘？

重绘是指当元素的样式发生改变，但没有影响其几何属性时，浏览器不需要重新计算元素的几何属性，只需要重新绘制元素的外观。这就像装修工人只是给墙壁换了个颜色，或者给沙发换了个套子，不需要重新测量和调整。

哪些操作会触发重绘？

修改元素的颜色： 比如 color、background-color、border-color 等。
修改元素的可见性： 比如 visibility、opacity 等。
修改元素的背景图片： 比如 background-image 等。
修改文本样式： 比如 text-decoration、font-style 等。

重绘的影响范围：

重绘的影响范围通常比回流小，只影响需要重新绘制的元素。

表格：常见触发重绘的操作

操作	描述	影响范围
修改颜色	color、background-color、border-color 等	局部
修改可见性	visibility、opacity 等	局部
修改背景图片	background-image 等	局部
修改文本样式	text-decoration、font-style 等	局部

第三幕：回流与重绘的关系——“剪不断，理还乱”的纠葛

回流和重绘并不是孤立存在的，它们之间存在着密切的关系。

回流一定会触发重绘，而重绘不一定会触发回流。

也就是说，如果你对房屋的结构进行了调整（回流），那么肯定需要重新粉刷墙壁（重绘）。但是，如果你只是给墙壁换了个颜色（重绘），并不需要重新测量房屋的尺寸（回流）。

回流的成本远高于重绘。

回流需要重新计算元素的几何属性，而重绘只需要重新绘制元素的外观。因此，我们应该尽量避免回流，减少重绘。

第四幕：性能优化——“降妖伏魔”的独门秘籍

了解了回流和重绘的原理，接下来就是如何优化它们，让你的页面飞起来！

1. 减少DOM操作：

合并DOM操作： 不要频繁地进行DOM操作，尽量将多次操作合并成一次。比如，可以使用DocumentFragment或者字符串拼接的方式，一次性更新DOM。

// 糟糕的代码：频繁的DOM操作
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = 'Item ' + i;
  document.getElementById('list').appendChild(li);
}

// 优化后的代码：使用DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = 'Item ' + i;
  fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment);

// 优化后的代码：字符串拼接
let html = '';
for (let i = 0; i < 100; i++) {
  html += '<li>Item ' + i + '</li>';
}
document.getElementById('list').innerHTML = html;

缓存DOM节点： 避免重复获取相同的DOM节点。

// 糟糕的代码：重复获取DOM节点
for (let i = 0; i < 100; i++) {
  document.getElementById('list').appendChild(document.createElement('li'));
}

// 优化后的代码：缓存DOM节点
const list = document.getElementById('list');
for (let i = 0; i < 100; i++) {
  list.appendChild(document.createElement('li'));
}

使用事件委托： 将事件绑定到父元素上，减少事件处理器的数量。

2. 避免频繁修改样式：

使用CSS类： 将样式修改封装成CSS类，通过添加或移除类来改变元素的样式。

// 糟糕的代码：直接修改样式
element.style.color = 'red';
element.style.backgroundColor = 'yellow';
element.style.fontSize = '16px';

// 优化后的代码：使用CSS类
element.classList.add('highlight');

.highlight {
  color: red;
  background-color: yellow;
  font-size: 16px;
}

使用CSS Text： 使用 element.style.cssText 一次性设置多个样式。

element.style.cssText = 'color: red; background-color: yellow; font-size: 16px;';

避免频繁读取布局信息： 避免在循环中读取元素的布局信息（比如 offsetWidth、offsetHeight 等），可以将这些信息缓存起来。

// 糟糕的代码：在循环中读取offsetHeight
for (let i = 0; i < list.children.length; i++) {
  const height = list.children[i].offsetHeight; // 触发回流
  console.log(height);
}

// 优化后的代码：缓存offsetHeight
const heights = [];
for (let i = 0; i < list.children.length; i++) {
  heights.push(list.children[i].offsetHeight);
}
for (let i = 0; i < heights.length; i++) {
  console.log(heights[i]);
}

3. 离线修改DOM：

使用DocumentFragment： 将DOM操作在DocumentFragment中进行，然后一次性将DocumentFragment添加到DOM树中。
使用cloneNode： 克隆一个DOM节点，在克隆节点上进行修改，然后替换原来的节点。

使用display: none： 将元素设置为 display: none，然后进行修改，修改完成后再设置为 display: block。这样可以避免多次回流。

// 优化后的代码：使用display: none
element.style.display = 'none'; // 避免回流
element.style.color = 'red';
element.style.backgroundColor = 'yellow';
element.style.fontSize = '16px';
element.style.display = 'block'; // 触发一次回流和重绘

4. 使用transform和opacity：

使用transform进行动画： 使用 transform 进行位移、缩放、旋转等动画，可以避免回流，只触发重绘。
使用opacity改变透明度： 使用 opacity 改变元素的透明度，也可以避免回流，只触发重绘。

5. 避免使用table布局：

table布局的回流成本很高： table布局的渲染依赖于其内容，任何一个单元格的改变都可能导致整个table的回流。
使用CSS布局： 使用CSS布局（比如 flexbox、grid）可以更灵活地控制元素的布局，减少回流。

6. 优化CSS选择器：

避免使用复杂的CSS选择器： 复杂的CSS选择器会增加浏览器的计算成本。
使用ID选择器和类选择器： ID选择器和类选择器的性能比标签选择器和属性选择器更好。

7. 使用 requestAnimationFrame：

在下一帧之前执行动画： requestAnimationFrame 会在浏览器下一次重绘之前执行回调函数，可以确保动画的流畅性。

function animate() {
  // 执行动画
  element.style.transform = 'translateX(' + x + 'px)';
  x++;
  requestAnimationFrame(animate);
}

requestAnimationFrame(animate);

8. 慎用 will-change 属性：

will-change 属性可以提前通知浏览器元素可能会发生变化，让浏览器提前进行优化。但是，滥用 will-change 属性可能会导致浏览器过度优化，反而降低性能。

9. 使用Web Workers：

将耗时的计算任务放在Web Workers中执行： Web Workers可以在后台线程中执行JavaScript代码，避免阻塞主线程，提高页面的响应速度。

第五幕：总结——“修身养性”的长期修炼

回流和重绘是前端性能优化的重要组成部分，我们需要深入理解它们的原理，并掌握一些优化技巧。记住，优化是一个持续不断的过程，就像修身养性一样，需要长期坚持。

记住以下几点：

尽量减少DOM操作。
避免频繁修改样式。
使用CSS类和CSS Text。
离线修改DOM。
使用transform和opacity。
避免使用table布局。
优化CSS选择器。
使用 requestAnimationFrame。
慎用 will-change 属性。
使用Web Workers。

掌握了这些“独门秘籍”，你就可以像一位经验丰富的装修大师，轻松驾驭DOM，打造流畅如丝的网页体验！💪

好了，今天的分享就到这里。希望这篇文章对大家有所帮助。如果大家有任何问题，欢迎在评论区留言。我们下期再见！ 👋

发表回复 取消回复

发表回复取消回复