发布于 由admin

解析 JavaScript 的重绘（Repaint）与重排（Reflow）：哪些 CSS 属性会触发 JS 阻塞

各位前端工程师，大家好！

今天，我们将深入探讨一个前端性能优化中至关重要的概念：浏览器的重绘（Repaint）与重排（Reflow），以及它们如何与 JavaScript 的执行相互作用，进而影响页面的响应性能。理解这些机制，是构建高性能、流畅用户体验的关键。

一、浏览器渲染管线与前端性能基石

在深入重绘与重排之前，我们首先需要回顾一下浏览器如何将我们编写的 HTML、CSS 和 JavaScript 代码最终呈现为用户可见的像素。这个过程通常被称为浏览器渲染管线，它大致分为以下几个阶段：

  1. 解析 (Parsing)：
    • 浏览器解析 HTML，构建 DOM 树 (Document Object Model)。
    • 浏览器解析 CSS，构建 CSSOM 树 (CSS Object Model)。
  2. 样式计算 (Style Calculation)：
    • 将 DOM 树和 CSSOM 树结合，计算出每个元素的最终样式。
  3. 布局 (Layout / Reflow)：
    • 根据 DOM 树和计算出的样式，计算每个元素在屏幕上的确切位置和大小。这一步会生成 渲染树 (Render Tree)，它包含了所有可见元素的几何信息。
  4. 分层 (Layering)：
    • 将渲染树中的元素分配到不同的渲染层 (Compositing Layers)。某些属性（如 transform、opacity）会创建新的层。
  5. 绘制 (Painting / Repaint)：
    • 在每个渲染层上，根据元素的样式和布局信息，将元素的像素内容绘制出来。
  6. 合成 (Compositing)：
    • 将所有渲染层合并，最终在屏幕上显示。

在上述过程中，布局（Layout） 阶段对应我们常说的重排（Reflow），而 绘制（Painting） 阶段则对应重绘（Repaint）。这两者是前端性能优化的核心关注点，因为它们是浏览器消耗计算资源最多的环节之一。

重排（Reflow / Layout）：
当 DOM 元素的几何属性（如宽度、高度、边距、定位等）发生改变，或者 DOM 树结构发生变化时，浏览器需要重新计算所有受影响的元素在文档流中的位置和大小。这个过程就是重排。重排会影响到其自身以及所有子元素，甚至可能影响到父元素和兄弟元素。它是一个非常耗费性能的操作，因为一旦发生重排，后续的绘制和合成阶段也必须重新执行。

重绘（Repaint / Redraw）：
当 DOM 元素的非几何属性（如颜色、背景色、可见性等）发生改变，但其在文档流中的位置和大小并未改变时，浏览器只需要重新绘制该元素的像素内容。这个过程就是重绘。重绘通常比重排的开销小，因为它不需要重新计算布局，只需要更新像素信息。

为什么它们是性能瓶颈？
频繁的重排和重绘会导致浏览器反复进行大量的计算和渲染工作，这会占用主线程资源，导致页面响应变慢，动画卡顿，甚至出现“掉帧”现象，严重影响用户体验。尤其是在 JavaScript 中不恰当地操作 DOM 或 CSS 属性，很容易触发这些性能杀手。

JavaScript 与渲染管线的关系：JS 执行与 UI 渲染线程互斥
现代浏览器通常采用单线程模型来处理 JavaScript 的执行和 UI 的渲染。这意味着在某一时刻，浏览器的主线程要么在执行 JavaScript 代码，要么在进行页面的渲染工作（包括样式计算、布局、绘制等）。它们是互斥的。当 JavaScript 执行时间过长时，它会阻塞 UI 渲染，导致页面出现假死或卡顿。反之，当浏览器进行重排或重绘时，JavaScript 的执行也会被暂停，直到渲染任务完成。这种互斥关系是理解 JS 阻塞与性能问题的基础。

二、深入理解重排（Reflow / Layout）

重排是前端性能杀手中的“老大”，因为它不仅自身开销巨大，还会导致后续的重绘和合成。理解哪些操作会触发重排至关重要。

重排的定义：
重排是指浏览器为了重新计算文档中元素的位置和几何信息而进行的布局过程。当一个元素的大小、位置、或者影响其布局的属性发生变化时，浏览器需要重新计算它以及可能受影响的其他元素的所有几何属性，并更新渲染树。

重排的触发条件：

  1. DOM 结构变化：
    • 添加、删除或修改 DOM 元素。
    • 改变元素在文档中的顺序。
  2. CSS 属性修改：
    • 改变元素影响布局的 CSS 属性。
  3. 浏览器窗口大小改变：
    • 调整浏览器窗口大小，会重新计算整个页面的布局。
  4. 字体大小改变：
    • 改变字体大小会影响文本块以及包含它的元素的尺寸。
  5. 激活 CSS 伪类：
    • 例如，:hover 伪类导致元素尺寸或定位变化。
  6. 内容变化：
    • 输入框内容改变，图片尺寸加载完成等。
  7. 计算或获取布局信息：
    • JavaScript 读取或写入某些与布局相关的属性或方法时，浏览器为了提供最新的准确值，可能会强制立即执行一次布局计算。这是最隐蔽也是最常见的性能陷阱。

哪些 CSS 属性会触发重排？

下表列出了常见的会触发重排的 CSS 属性。请注意，这里的“触发”是指修改这些属性的值。

CSS 属性分类 常见触发重排的属性 备注
尺寸

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注