分析运行时性能

Kayce Basques
Kayce Basques
X GitHub

运行时性能是指网页在运行（而非加载）时的性能。本教程介绍了如何使用 Chrome 开发者工具的“性能”面板分析运行时性能。从 RAIL 模型的角度来看，您在本教程中学到的技能对于分析网页的响应、动画和空闲阶段非常有用。

开始使用

在本教程中，我们将使用性能面板查找正式版网页上的性能瓶颈。具体操作步骤如下：

  1. 在无痕模式下打开 Google Chrome。无痕模式可确保 Chrome 在干净状态下运行。例如，如果您安装了许多扩展程序，这些扩展程序可能会在性能衡量中产生噪声。

  2. 在无痕式窗口中加载以下网页。这是您要分析的演示版。 页面上显示了一堆上下移动的小蓝色方块。

    https://googlechrome.github.io/devtools-samples/jank/

  3. 按 Command+Option+I (Mac) 或 Control+Shift+I (Windows、Linux) 打开 DevTools。