前端性能：减少重排重绘的 HTML 技巧

在构建流畅用户体验的过程中，前端性能优化是不可或缺的一环。其中，重排与重绘是消耗浏览器性能的主要“元凶”，是导致页面卡顿、响应迟缓的常见原因。本文将深入探讨如何在HTML结构、CSS及关联的JavaScript操作层面，通过一系列实用技巧，从根本上减少这两类操作，从而显著提升页面渲染性能。

理解重排与重绘

重绘：当元素样式的改变不影响其在文档流中的位置和大小（如 color, background-color, visibility等），浏览器会重新绘制该元素的外观。
重排：当元素的尺寸、结构或某些属性发生变化，影响了文档的几何布局（如宽度、高度、位置、字体大小等），浏览器需要重新计算元素的位置和几何属性，并重建渲染树的部分或全部。重排必定引发重绘，是开销更大的操作。

优化核心思路：减少重排的范围与频率，避免不必要的重绘。

关键HTML与关联优化技巧

1. 优化HTML文档结构与渲染路径

核心：尽早让关键内容显示，减少首次渲染的阻塞。

将CSS放在<head>中：这能让浏览器在构建DOM树的同时构建CSSOM树，尽早开始渲染，避免页面元素因缺少样式而“闪烁”或进行额外重绘。
将非关键JavaScript放在<body>末尾（或使用defer属性）：防止脚本阻塞HTML解析与渲染。页面尽早渲染，用户就能更早看到内容。

2. 明智地设置元素尺寸

核心：避免浏览器因尺寸变化反复计算布局。

避免使用table布局：table中任何一个小单元格的改动都可能引发整个表格的重排。
为动画元素使用fixed或absolute定位：使其脱离常规文档流，其动画变化的影响范围将被限制在该元素内，不会导致父元素或其他兄弟元素重排。
优先为元素定义明确的尺寸：在HTML或内联样式中，尤其是图片、视频、广告位等，指定width和height属性。这能防止图片加载后，页面布局发生大幅抖动（这是最常见的意外重排之一）。

<!-- 好：浏览器在图片加载前就预留了空间 -->
<img src="image.jpg" width="300" height="200" alt="示例">
<!-- 现代实践：使用 aspect-ratio CSS属性配合width -->
<div style="width: 100%; aspect-ratio: 16/9;"></div>

3. 批量进行DOM操作

核心：将多次布局变动合并为一次。

这是最重要的技巧之一。每次直接操作DOM都可能触发重排。应使用以下策略：

使用文档片段DocumentFragment：在内存中构建一个离线DOM子树，一次性插入真实DOM。

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `项目 ${i}`;
  fragment.appendChild(li);
}
document.getElementById('list').appendChild(fragment); // 仅一次重排

隐藏元素，进行批量修改，再显示：对复杂元素进行多项修改时，可先将其display设置为none（引发一次重排），然后进行所有修改（此时修改不会触发渲染），最后再将其显示（再次重排）。总计两次重排，远优于N次。
复制节点，修改副本，替换原节点：类似上一条的思路。

4. 善用现代CSS布局（Flexbox/Grid）

核心：使用更高效的布局模型。

相比传统的基于浮动的布局，Flexbox和CSS Grid Layout在多数情况下能提供更可预测的、性能更优的布局方式。浏览器对它们的优化更好，且能减少实现复杂布局所需的嵌套层级，从而简化渲染树。

5. 对“代价高昂”的属性说“不”

核心：了解哪些属性会触发重排，并在动画中慎用。

以下属性修改会触发重排，在动画中频繁使用将导致性能灾难：

width, height, margin, padding, border, top, left, font-size等。

优化方案：对于需要动画的元素，使用transform和opacity。

transform(如 translate, scale, rotate) 和 opacity的变化，在大多数现代浏览器中不会触发重排，通常只触发合成（在GPU层面处理），效率极高。

/* 不佳：改变left触发重排 */
@keyframes move-old {
  from { left: 0; }
  to { left: 100px; }
}
/* 更佳：使用transform，触发合成 */
@keyframes move-new {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

6. 利用CSS类名批量修改样式

核心：通过切换类名，一次性应用多条样式规则。

与其逐个修改元素样式，不如预先在CSS中定义好不同状态的类，在JavaScript中只切换类名。浏览器会智能地将样式计算合并处理。

// 不佳
element.style.width = '100px';
element.style.height = '200px';
element.style.backgroundColor = 'red';
// 更佳：只需一次样式重新计算
element.classList.add('active-state');

.active-state {
  width: 100px;
  height: 200px;
  background-color: red;
}

7. 注意“布局抖动”

核心：避免连续读取和写入会触发重排的属性。

布局抖动是指JavaScript快速交替地读取和修改DOM布局属性，迫使浏览器不断进行强制同步重排。

// 糟糕的示例：在循环中交替读/写，引发多次重排
for (let i = 0; i < items.length; i++) {
  // 读取（触发重排以获取最新值）
  const height = items[i].offsetHeight;
  // 写入（再次触发重排）
  items[i].style.height = height + 10 + 'px';
}

优化：先读取所有需要的值，然后再统一写入。

// 优化：先读后写
const heights = [];
for (let i = 0; i < items.length; i++) {
  heights.push(items[i].offsetHeight);
}
for (let i = 0; i < items.length; i++) {
  items[i].style.height = heights[i] + 10 + 'px';
}

8. 使用`content-visibility`优化长列表/大文档

核心：跳过屏幕外内容的渲染工作。

content-visibility: auto;是强大的CSS属性。它让元素在进入视口前，跳过其内容的渲染（包括布局和绘制），从而极大提升初始加载和滚动性能。

.long-content-item {
  content-visibility: auto;
  /* 建议包含以下属性以保持滚动条精度 */
  contain-intrinsic-size: 0 500px; /* 占位高度，可估算 */
}

工具与检测

浏览器开发者工具：利用Performance面板录制页面交互，观察“Layout”和“Paint”事件的数量和耗时，精确找到性能瓶颈。
渲染调试：在开发者工具的Rendering面板中，开启“Paint flashing”和“Layout Shift Regions”可视化重绘与布局偏移区域。

总结

减少重排与重绘的优化，本质上是对浏览器工作方式的尊重与协同。通过构建语义清晰、结构稳定的HTML，结合批量DOM操作、高性能CSS属性、现代布局模型以及避免布局抖动等技巧，我们可以将浏览器的渲染计算负担降至最低。

性能优化是一个持续的过程，应从项目初期就融入开发思维。记住一个简单的准则：任何导致几何布局变化的操作都更昂贵，任何可以推迟、合并或避免的操作都值得尝试。 将这些技巧付诸实践，你的网页将获得更流畅、更迅捷的响应能力，为用户带来质的体验提升。

理解重排与重绘

关键HTML与关联优化技巧

1. 优化HTML文档结构与渲染路径

2. 明智地设置元素尺寸

3. 批量进行DOM操作

4. 善用现代CSS布局（Flexbox/Grid）

5. 对“代价高昂”的属性说“不”

6. 利用CSS类名批量修改样式

7. 注意“布局抖动”

8. 使用content-visibility优化长列表/大文档

工具与检测

总结

相关文章

8. 使用`content-visibility`优化长列表/大文档