Chrome开发者工具 第二十三章（运行时性能分析）

在现代Web开发中，用户体验的流畅度至关重要，而运行时性能分析正是保障这一点的关键。Chrome开发者工具提供了一个强大的性能面板，帮助开发者深入了解页面在运行时的表现。本文将带你走进Chrome开发者工具的性能面板，学习如何利用它来优化你的网站。

首先，我们需要明确，运行时性能并非指页面加载的速度，而是页面加载完成后，用户交互过程中的性能表现。为了更好地分析这一性能，我们可以采用Chrome开发者工具中的“性能”面板。

在开始之前，建议以无痕模式（快捷键Ctrl+Shift+N）打开Chrome浏览器，这样可以确保浏览器处于干净的状态，避免扩展程序等因素影响性能分析的结果。

接下来，打开一个需要分析的页面，比如Chrome团队提供的性能分析示例页面。
https://googlechrome.github.io/devtools-samples/jank/

为了模拟移动设备的CPU性能，我们可以在开发者工具中设置CPU节流，比如选择“4倍降速”，这样可以模拟出移动设备上网页的运行情况。这一步骤对于确保网页在性能较差的设备上也能保持良好的用户体验非常有帮助。

接下来，我们可以通过不断点击页面上的操作按钮，如“add 10”或“Optimize”，来观察蓝色方块的移动速度和流畅度的变化。通过这种方式，我们可以制造出不同的性能状况，以便于分析。

当我们开始记录性能时，开发者工具会捕获页面运行时的所有相关数据。

等待几秒钟点击停止，我们可以在“性能”面板中看到详细的分析结果。这里有海量的数据！

通过分析这些数据，我们可以找到性能瓶颈。例如，如果图表显示出红条，那么说明帧速率下降到了可能影响用户体验的程度。CPU图表中的颜色则对应了不同类型的活动，如果CPU图表几乎全满，那么说明CPU在记录期间一直处于满负荷状态。

作为 Web 开发者，您需要了解并注意以下五个主要方面。这五个区域是您拥有最大控制权的区域，每个区域都代表像素到屏幕管道中的一个关键点：

• JavaScript：JavaScript 通常用于处理会使界面发生视觉变化的工作。例如，这可能是 jQuery 的 animate 函数、对数据集进行排序或向页面添加 DOM 元素。不过，JavaScript 并不是触发视觉变化的绝对必要条件：CSS 动画、CSS 过渡和 Web Animations API 能够为网页内容添加动画效果。
• 样式计算：根据匹配的选择器，计算出哪些 CSS 规则应用于哪些 HTML 元素的过程。例如，.headline 就是这样一个 CSS 选择器示例，它适用于任何具有 class 属性值且包含 headline 类的 HTML 元素。因此，已知规则后，系统就会应用这些规则，并计算每个元素的最终样式。
• 布局：一旦浏览器知道对某个元素应用了哪些规则，它就可以开始计算页面的几何图形，例如元素占据了多少空间以及元素在屏幕上的显示位置。在 Web 的布局模型中，一个元素可能会影响其他元素。例如， 元素的宽度通常会影响其子元素在树中各下层的尺寸，因此对浏览器来说，这个过程可能会相当复杂。
• 绘制：绘制是填充像素的过程。它涉及到在计算完元素在网页上的布局后绘制文本、颜色、图片、边框、阴影，基本上还包括元素的每个视觉方面。绘制通常在多个表面（通常称为图层）上完成。
• Composite：由于网页的某些部分可能会绘制到多个图层上，因此它们需要以正确的顺序应用到屏幕上，才能使网页按预期呈现。这对于与其他元素重叠的元素尤为重要，因为错误可能会导致一个元素错误地显示在另一个元素之上。

在“主要”部分的火焰图中，我们可以看到主线程上的活动随时间的变化。这里的每个横条都代表一个事件，条形越宽表示事件用时越长。通过分析这些事件，我们可以找出导致性能问题的具体代码。

例如，如果我们看到重新计算样式事件上有红色三角形的警告，那么可能就是强制重新样式导致了性能问题。

我们可以点击这些事件，查看源代码中的相关行，找到并优化那些导致性能问题的代码。

最后，通过比较优化前后的性能记录，我们可以清晰地看到优化的效果。优化后的页面在执行相同任务时，所需的时间和资源都大大减少，从而提升了性能。

通过本文的介绍，你应该对如何使用Chrome开发者工具的性能面板进行运行时性能分析有了基本的了解。记住，优化性能是一个持续的过程，而Chrome开发者工具则是这一过程中的得力助手。