浏览器重排重绘优化指南：揭秘高效网页加载的秘密

前端

2023-09-12 08:03:20

浏览器渲染管线：重排与重绘的幕后故事

理解重排和重绘至关重要，因为它们是网页渲染管线中的关键步骤，直接影响着加载速度和用户体验。

当浏览器加载页面时，它会执行以下步骤：

构建DOM树： 浏览器读取HTML并构建表示页面结构的DOM树。
构建CSSOM树： 浏览器读取CSS并构建表示页面样式的CSSOM树。
计算布局： 浏览器将DOM树和CSSOM树结合起来，计算每个元素的尺寸、位置和样式。
重排（Reflow）： 当DOM结构或样式发生改变，导致元素尺寸或位置发生改变时，浏览器会重新计算布局，称为重排。
重绘（Repaint）： 当元素的外观发生改变（例如，颜色、背景）而布局保持不变时，浏览器会重新绘制受影响区域，称为重绘。

优化重排和重绘：释放性能潜力

减少重排和重绘的次数和持续时间对于提高网页性能至关重要。以下是一些优化策略：

避免频繁的DOM操作： 每当您使用appendChild()或insertBefore()等方法修改DOM时，都会触发重排。尽量将DOM操作限制在必要时。
使用CSS动画代替JavaScript动画： CSS动画不会触发重排，而JavaScript动画则会。尽可能使用CSS动画来平滑地改变元素外观。
在CSS文件中包含外部样式表： 外部样式表不会触发DOM操作，而内联样式则会。将样式保存在外部文件中，以减少重排。
使用布局属性（如display: flex） ：这些属性可以提高渲染效率，减少重排。
避免使用多层布局： 多层布局会增加重排的次数和持续时间。尽可能使用扁平的布局结构。

实践中的优化示例

示例 1：避免频繁的DOM操作

// 不佳的做法（触发频繁的重排）
const div = document.getElementById("myDiv");
for (let i = 0; i < 100; i++) {
  div.appendChild(document.createElement("p"));
}

// 改进的做法（限制重排次数）
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  fragment.appendChild(document.createElement("p"));
}
div.appendChild(fragment);

示例 2：使用CSS动画代替JavaScript动画

// 不佳的做法（触发重排）
const div = document.getElementById("myDiv");
setInterval(() => {
  div.style.left = "100px";
}, 100);

// 改进的做法（使用CSS动画）
const div = document.getElementById("myDiv");
div.classList.add("my-animation");

示例 3：使用布局属性

// 不佳的做法（触发重排）
const div = document.getElementById("myDiv");
div.style.display = "block";
div.style.display = "flex";

// 改进的做法（使用布局属性）
const div = document.getElementById("myDiv");
div.classList.add("flex-container");