浏览器视图更新的底层规则，你必须知道的

大家在操作原生的 DOM 的时候，有没有遇到过这样一个问题，就是我修改了 DOM 的属性，但是浏览器并没有立即更新视图，而我们开发者为了获取这次更新的结果，通常会使用 setTimeout 这样的方法。

为了解决这个问题，我们首先需要了解浏览器视图更新的底层规则。

浏览器视图更新的底层规则

浏览器视图更新的底层规则是由浏览器的渲染引擎决定的。渲染引擎负责将 HTML、CSS 和 JavaScript 代码转换为我们看到的可视化页面。

浏览器渲染引擎的工作流程大致可以分为以下几个步骤：

1. 解析 HTML 和 CSS 代码： 渲染引擎首先会解析 HTML 和 CSS 代码，构建 DOM 树和 CSSOM 树。
2. 布局： 根据 DOM 树和 CSSOM 树，渲染引擎会计算每个元素的布局信息，包括位置、大小和样式。
3. 绘制： 最后，渲染引擎会根据布局信息绘制页面。

浏览器视图更新延迟的原因

浏览器视图更新延迟的原因通常是由于以下因素造成的：

• 批处理更新： 为了提高性能，浏览器会将多个 DOM 修改批处理在一起，而不是立即更新视图。
• 事件循环： 浏览器视图更新是通过事件循环来触发的。当 DOM 修改时，浏览器会将一个更新事件添加到事件循环中。事件循环会按照一定的顺序执行这些事件，因此视图更新可能会延迟。
• 其他任务： 浏览器还有其他任务需要执行，如处理网络请求、执行 JavaScript 代码等。这些任务可能会延迟视图更新。

如何解决视图更新延迟

为了解决视图更新延迟问题，我们可以采取以下方法：

• 使用 requestAnimationFrame： requestAnimationFrame 是一个浏览器 API，它可以让我们在浏览器的下一次重绘之前执行回调函数。这可以确保我们的视图更新在浏览器的重绘周期中被执行。
• 使用 MutationObserver： MutationObserver 是一个浏览器 API，它可以让我们在 DOM 修改时执行回调函数。这可以让我们在 DOM 修改后立即更新视图。
• 减少 DOM 修改： 如果可能的话，应该尽量减少 DOM 修改的数量。这可以减少浏览器需要处理的事件，从而提高视图更新的性能。

示例

以下是一个使用 requestAnimationFrame 来解决视图更新延迟的示例：

const element = document.getElementById('element');

element.addEventListener('click', () => {
  requestAnimationFrame(() => {
    // 更新视图
  });
});

总结

浏览器视图更新的底层规则是由浏览器的渲染引擎决定的。浏览器视图更新延迟通常是由于批处理更新、事件循环和浏览器其他任务造成的。我们可以通过使用 requestAnimationFrame、MutationObserver 和减少 DOM 修改来解决视图更新延迟问题。