浏览器常见性能指标

在一次前端性能问题排查过程中，通过GPT理解性能指标，和优化建议。

如下来自GPT问答：

【问题1】“recalculate style” 通常与网页开发和浏览器的渲染过程有关，尤其是当涉及到 CSS 样式的重新计算时。以下是其含义的具体解释：

1. 网页渲染中的含义

• CSS 样式重新计算（Recalculate Style） 是浏览器渲染管道的一部分。当页面中的某些 DOM 元素发生了变化（例如修改了元素的样式、添加或删除了元素等），浏览器需要重新计算这些元素的样式规则，以确保页面呈现的内容符合最新的状态。
• 这是一个性能相关的操作，会对页面的重绘（Repaint）或重排（Reflow）产生影响。

2. 触发场景

• 修改了内联样式或样式表中的规则。
• 动态地添加、删除或修改 DOM 元素。
• 改变与 CSS 相关的属性，例如 class、id、style。
• 触发 JavaScript 操作访问了某些依赖样式的属性（如 offsetWidth 或 getComputedStyle）。

3. 性能优化相关

• 样式重新计算可能会变得很昂贵，尤其是当 DOM 复杂且更改频繁时。因此，前端开发中通常需要避免不必要的样式计算和 DOM 操作。
• 现代浏览器会优化渲染过程，通过合并样式变化、延迟重排等方式减少 “recalculate style” 的开销。

4. 开发工具中的提示

• 在浏览器的开发者工具中（例如 Chrome DevTools 的性能分析器），你可能会看到 “Recalculate Style” 的记录，表示某个操作引发了样式重新计算。如果这部分耗时较长，可能需要分析并优化代码。

如果你是在特定的上下文中看到 “recalculate style”，可以告诉我更多细节，我会提供更针对性的解释！

【问题2】重绘和重排的区别

**重绘（Repaint）和重排（Reflow）**是浏览器渲染过程中的两个重要概念，它们的区别主要体现在触发条件和影响范围上。以下是详细的对比：

---

1. 重绘（Repaint）

定义

重绘指的是当页面的样式（如颜色、背景、阴影等）发生变化时，浏览器需要重新绘制受影响的元素，但不会影响页面的布局。

触发条件

• 改变了元素的外观，但没有改变其位置或大小：
  • 修改了颜色 (color) 或背景色 (background-color)。
  • 改变了边框颜色或样式。
  • 更改了可见性（如 visibility: hidden）。

性能影响

• 成本较低：只需更新绘制元素的视觉样式，布局信息保持不变。

示例

<div style="width: 100px; height: 100px; background-color: red;"></div>
<script>
  document.querySelector("div").style.backgroundColor = "blue"; // 触发重绘
</script>

---

2. 重排（Reflow）

定义

重排（也称回流）是指当页面的几何属性（如大小、位置、布局等）发生变化时，浏览器需要重新计算元素的位置和布局，并可能重新渲染整个页面或部分页面。

触发条件

• 改变了影响布局的属性：
  • 大小：width、height、padding、margin。
  • 位置：top、left、position。
  • 布局：display、float、clear。
  • 动态增加或删除 DOM 元素。
• 读取一些需要布局计算的属性：
  • 如 offsetWidth、offsetHeight、scrollTop。

性能影响

• 成本较高：因为浏览器需要重新计算元素的几何信息，并且可能波及其他元素的布局。

示例

<div style="width: 100px; height: 100px;"></div>
<script>
  document.querySelector("div").style.width = "200px"; // 触发重排
</script>

---

3. 二者的对比

对比项	重绘（Repaint）	重排（Reflow）
触发条件	外观变化（如颜色、背景）	几何属性变化（如大小、位置、布局）
影响范围	仅影响视觉样式的更新	可能影响整个文档流的布局
性能开销	较低	较高
实际操作	不涉及布局计算	重新计算布局并更新页面

---

4. 优化建议

• 减少重绘：

  • 避免频繁更改样式，可以使用 class 一次性更新多种样式。
  • 使用 visibility: hidden 替代 display: none（因为后者会触发重排）。

• 减少重排：

  • 避免频繁操作 DOM，尽量合并 DOM 操作。
  • 使用文档片段（DocumentFragment）或 display: none 隐藏元素后再操作。
  • 缓存布局属性，如 offsetWidth，避免多次访问导致重复计算。

了解两者的区别和优化方式，可以帮助你在开发中提升页面性能。

【问题3】Animation frame requested 性能面板的 Pending for 指标是什么意思

在浏览器性能面板（Performance Panel）中，“Animation frame requested” 和 “Pending for” 指标与浏览器的动画帧调度和渲染过程密切相关。以下是具体含义：

---

1. Animation Frame Requested

含义

这是指 JavaScript 中调用 requestAnimationFrame 后，浏览器已经记录了一次动画帧的请求。requestAnimationFrame 是浏览器提供的 API，用于在下一次屏幕重绘前执行一段回调函数。

• 时间点：
  当你调用 requestAnimationFrame 时，浏览器将把回调函数加入动画帧队列，等待下一帧的执行。

• 关键点：
  浏览器通常会尝试以每秒 60 帧（即约 16.67 毫秒/帧）的频率处理动画。如果动画帧的计算和渲染超时，可能会导致掉帧（帧率下降）。

---

2. Pending for

含义

“Pending for” 指标表示动画帧处于等待状态的时间。换句话说，这是 requestAnimationFrame 被调用后，到帧的回调函数实际开始执行之间的等待时间。

• 计算方法：

  • 当 requestAnimationFrame 被调用后，浏览器可能需要完成一些前置任务（如样式重新计算、布局更新等）才能调度新的帧。
  • “Pending for” 就是这些任务完成之前，帧回调函数的等待时间。

• 影响因素：

  • 主线程的繁忙程度：如果主线程正在处理大量任务（例如脚本执行、布局计算、重绘等），会延长等待时间。
  • 硬件或系统的限制：比如低性能设备可能更容易产生长时间的等待。

---

3. 如何优化 Pending for 时间

降低主线程压力

• 减少重排和重绘：

  • 避免频繁修改 DOM 或样式，尤其是在动画中。
  • 使用合适的 CSS 动画（如 transform 和 opacity），这些属性通常可以由浏览器在 GPU 上加速处理，而不依赖主线程。

• 减少 JavaScript 阻塞：

  • 避免长时间运行的 JavaScript 任务。
  • 使用 setTimeout 或 requestIdleCallback 将非紧急任务分片执行。

提升帧率（FPS）

• 确保动画逻辑的执行时间控制在 16 毫秒以内（即 60 FPS）。
• 合并多次动画帧的计算逻辑，减少 requestAnimationFrame 的过度调用。

---

4. 在性能面板中如何查看

• 打开 Chrome DevTools 的 Performance 面板。
• 点击 “Record” 按钮并执行动画或页面交互。
• 停止录制后，找到 Animation frame requested 相关的事件。
• 将鼠标悬停在事件上，可以查看具体的 Pending for 时间。

通过观察此时间并结合帧率（FPS），可以诊断动画卡顿的根源，从而对代码进行针对性优化。

【问题4】重排和重绘，的先后顺序

在浏览器的渲染过程中，重排（Reflow） 和 重绘（Repaint） 的先后顺序是：重排一定先于重绘，但重绘不一定需要重排。

---

原因分析

1. 重排的本质

   • 重排是重新计算元素的几何位置和大小的过程。
   • 由于布局信息（如宽度、高度、位置）会影响元素的视觉呈现，浏览器必须在计算完成这些几何信息后，才能决定如何绘制元素。
   • 因此，重排发生后，通常会引发重绘。

2. 重绘的本质

   • 重绘是将元素的视觉外观（如颜色、边框、背景）更新到屏幕上的过程。
   • 如果只是样式发生了变化而不涉及几何信息（如背景色的改变），只需要重绘，不需要重排。

---

触发关系

• 重排后通常伴随重绘：
  例如，改变元素的 width 属性，会导致页面布局更新（重排），接着触发重绘以反映宽度的变化。

• 重绘可以单独发生：
  例如，改变元素的 color 或 background-color 只会触发重绘，而不会引起重排。

---

流程图解

浏览器的渲染管道流程如下：

1. 样式计算（Style Calculation）
   确定元素的样式，包括 CSS 和 inline style。
2. 布局计算（Layout/Reflow）
   计算每个元素的位置和大小。
3. 绘制（Paint/Repaint）
   绘制元素的视觉外观。
4. 合成与渲染（Compositing）
   将绘制好的内容合成并输出到屏幕。

实际执行顺序

• 如果某个操作需要改变布局（如 width 或 position），流程为：
  • 样式计算 → 重排 → 重绘。
• 如果某个操作仅改变外观（如 color），流程为：
  • 样式计算 → 重绘。

---

优化建议

为了提升性能，应该尽量避免频繁的重排和重绘，以下是一些建议：

1. 减少重排：

   • 合并对 DOM 的多次操作，避免逐次更改导致多次重排。
   • 对元素使用 position: absolute 或 fixed，将其从普通文档流中移除。
   • 动画中优先使用不会触发重排的属性（如 transform 和 opacity）。

2. 减少重绘：

   • 避免频繁更改外观样式，例如用 class 一次性更新多种样式。

通过对渲染流程的了解和优化，可以减少性能损耗，确保页面流畅运行。

（持续更新…）