分析运行时性能 (教程)

运行时性能 是指网页在运行时（而不是加载时）的表现方式。 以下教程教导如何使用 DevTools 性能 工具来分析运行时性能。

本教程中学习的技能对于分析 Web 内容的加载、交互性和视觉稳定性非常有用，这也是 Core Web Vitals 的关键指标。 每个核心 Web 生命代表用户体验的一个独特方面，可在现场衡量，并反映以用户为中心的关键结果的真实体验。 可以在 性能 工具中看到这些 Core Web Vitals。

另请参阅：

步骤 1：在 InPrivate 模式下打开演示，然后打开 DevTools

在以下教程中，你将在“缓慢的动画”演示网页上打开 DevTools，并使用 “性能 ”工具查找网页上的性能瓶颈。

  1. 右键单击链接“ 缓慢动画 ”，然后选择“在 Inprivate 窗口中打开链接”。

    你将分析此演示网页，它显示了可变数量的上下移动的图标。 若要查看演示的源代码，请参阅 MicrosoftEdge / 演示 > devtools-performance-get-started。

    InPrivate 模式可确保浏览器以干净的状态运行。 例如，如果安装了大量的扩展，则这些扩展可能会导致性能测量产生噪音。 如果需要详细信息，请参阅 在 Microsoft Edge 中浏览 InPrivate。

  2. 右键单击演示网页，然后选择 “检查”。

    DevTools 随即打开：

    左侧为演示，右侧为 DevTools

  3. 在 DevTools 的右上角，单击“ 自定义和控制 DevTools ” (“自定义和控制 DevTools 图标) ”按钮，然后在 “停靠位置”旁边，单击“ 取消停靠到单独的窗口 ” (“取消停靠到单独的窗口”图标) 按钮。

步骤 2：限制 CPU，以模拟移动 CPU

与台式机和笔记本电脑相比，移动设备的 CPU 功率更小。 每当你分析网页时，都可使用 CPU 限制来模拟你的网页在移动设备上的表现。

限制台式机的 CPU 以模拟移动 CPU，如下所示：

  1. 在 DevTools 中，打开“ 性能 (性能”图标) 工具。

  2. 单击“记录设置 (记录设置) ”按钮。

    开发工具显示与捕获性能指标相关的设置、下拉菜单和复选框。

  3. 在左上角的“CPU 限制”下拉菜单中，选择建议的减速值，例如 4 倍减速 - 推荐：

    CPU 限制

    或者，在右下角的“环境设置”部分的“CPU 限制”下拉菜单中，选择建议的减速值，例如 4 倍减速 - 推荐。 下拉菜单的两个实例已链接。

    推荐的限制因子由 DevTools 根据你的计算机计算。 要确保网页在低端移动设备上也能正常运行，请在 CPU 限制 下拉列表中选择更大的减速，例如 6 倍减速。

    DevTools 会限制 CPU，使其比平时慢。

    “性能”工具的选项卡上会显示限制警告图标 (“限制警告”图标) ，以提醒已启用限制。

  4. 单击“记录设置 (记录设置) ”按钮。

    与捕获性能指标相关的设置下拉菜单和复选框处于隐藏状态。

第 3 步：使用理想数量的图标填充网页

在录制性能之前，请在演示网页上添加理想数量的图标，以帮助比较未优化代码与优化代码。

要创建一对性能记录来比较未优化代码与优化代码，演示网页首先需要显示一定数量的移动图标，具体取决于您的计算机。 应该有足够的图标，以便在交替选择未优化 (慢) 代码和 优化代码时 ，可以清楚地看到动画速度和平滑度的差异。

若要使用理想数量的图标填充演示网页：

  1. 切换到 Sluggish Animation 演示网页。

    默认情况下，最初选择“ 慢 ”选项按钮，以便使用未优化的代码。

  2. 多次单击“ 添加元素 ”按钮，直到蓝色图标开始非常缓慢且不稳定地移动。

  3. 选择“ 优化 选项”按钮。

    图标移动更快、更平稳。

  4. 如果在使用未优化 (慢) 和 优化 代码之间看不到明显差异，请尝试单击“ 删除元素” 按钮。

    如果图标过多，则会占用 CPU，并且在两个代码版本的结果中看不到重大差异。

第 4 步：记录未优化代码的性能

运行网页代码的优化版本时，蓝色图标移动得更快。 为什么？ 两个版本的代码都应该在相同的时间内将图标移动相同的空间。

在 “性能 ”工具中进行录制，了解如何检测 代码的未优化 (慢) 版本中的性能瓶颈：

  1. 在演示网页中，选择“ 慢速 ”选项按钮。

    图标移动更慢且更不稳定。 未优化的代码正在运行并将进行分析，并且有理想数量的图标来证明性能不佳并帮助找到性能瓶颈。

  2. 在“DevTools”窗口的“ 性能 ”工具中，单击“ 录制 ” (“ 录制) ”按钮。

    网页运行时，DevTools 将捕获效果指标：

    分析网页

    CPU 仍受限制。 (这些屏幕截图应显示“活动栏”中“性能”工具选项卡中的限制警告图标 (“限制警告”图标) 。)

  3. 等待几秒钟，然后单击“ 停止 ” (停止图标) 图标或“ 停止 ”按钮。

    DevTools 停止录制，处理数据，然后在 “性能 ”工具中显示结果：

    配置文件的结果

这些性能结果显示了大量的数据，但很快就会变得更有意义。

第 5 步：分析未优化代码的性能

记录网页性能后，您可以评估网页的性能并找到任何性能问题的原因。

  1. 在 “性能 ”工具的顶部，检查 CPU 图表：

    CPU 图表和摘要面板

    CPU 图表中的颜色对应于“性能”工具底部的“摘要”面板中的颜色。 CPU 图表显示这些区域构成一个较大的区域，这意味着在记录过程中 CPU 已达到极限。 每当 CPU 长时间达到最大值时，都表明网页运行不佳。

  2. 将鼠标悬停在 CPU 或 NET 图表上：

    鼠标悬停在框架上

    DevTools 将显示该时间点处的网页屏幕截图。

  3. 左右移动鼠标以重播录音。

    此操作称为 推移，它可用于手动分析演奏录制的进度。

第 6 步：显示帧呈现统计信息叠加

另一个非常方便的工具是 帧呈现统计信息 叠加，有时称为 FPS 计数。 帧呈现统计信息叠加提供网页运行时每秒帧数 (FPS) 的实时估计。 本教程不需要 帧渲染统计信息叠 加，但可以提供有用的见解。

  1. 在 DevTools 的右上角，单击 “自定义和控制 DevTools ” (“自定义和控制 DevTools 图标) ”按钮，然后选择“ 切换快速视图面板”。

    或者，按 Esc 键一到两次。

    “快速视图”面板显示在 DevTools 的底部。

  2. 在 “快速视图 ”工具栏中，单击“ 更多工具 ” (“更多工具图标”) “按钮，然后选择 ”渲染“。

    “ 渲染” 工具在 “快速视图 ”面板中打开。

  3. 在 “渲染 ”工具中，选择“ 帧渲染统计信息” 复选框：

    带有帧渲染统计信息复选框的渲染工具

  4. 切换到演示网页。

    显示帧渲染统计信息叠加：

    帧呈现统计信息叠加

    叠加层包含以下部分：

    • 帧速率
    • GPU 光栅
    • GPU 内存

    关闭覆盖：

  5. 切换到 DevTools 窗口。

  6. 在 “渲染 ”工具中，清除“ 帧渲染统计信息” 复选框。

  7. 在 DevTools 的右上角，单击 “自定义和控制 DevTools ” (“自定义和控制 DevTools 图标) ”按钮，然后选择“ 切换快速视图面板”。

    或者按 Esc。

    “ 快速视图 ”面板处于隐藏状态。

另请参阅：

步骤 7：查找性能瓶颈

确认动画效果不佳后，下一步是回答“为什么？”这个问题。

  1. 在 “性能 ”工具的底部，选择 “摘要 ”选项卡：

    摘要 选项卡

    未选择任何事件时， 摘要 选项卡将显示活动的细目。 网页大部分时间都在渲染。 由于性能是减少工作量的艺术，因此你的目标是减少花费在进行绘制工作上的时间。

  2. 在 “性能 ”工具中，单击 “主 行”将其展开。

    DevTools 显示一段时间内主线程上活动的火焰图：

    主要部分

    • x 轴表示一段时间内的记录。 每个条形表示一个事件。 宽条表示该事件花费了更长的时间。

    • Y 轴表示调用堆叠。 当事件堆叠在一起时，表示较大的事件导致较低的事件。

    记录中有很多数据。

  3. 在工具栏下方的 “概述 ”区域中，水平单击并拖动，以放大录制的一部分：

    放大节

    概览区域包括右) (所示的 CPU 和 NET 图表。

    概述 ) 下方 (主部分和摘要选项卡仅显示录制所选部分的信息。

    更改所选区域的另一种方法是将焦点放在 “主要 ”部分，单击背景或事件，然后按：

    • W 可放大或 S 缩小。
    • A 向左移动所选内容，或 D 向右移动所选内容。

  4. 单击 动画帧触发事件 。

    在事件的右上角显示红色三角形时，警告可能存在与事件相关的问题。 每当运行 requestAnimationFrame() 时，将发生 动画帧触发事件。

    摘要面板显示有关该事件的信息：

    有关动画帧触发事件的详细信息

  5. 单击“ 显示” 链接。

    DevTools 突出显示启动 动画帧触发事件 的事件。

  6. 单击 app.js：125 链接。

    源工具中会显示相关的源代码行。

  7. 使用鼠标滚轮或触控板放大动画 帧触发事件 及其子事件。

    或者按 W。

    现在可以看到呈现动画的单个帧时发生的事件。 调用 update 函数，而该函数又调用 updateSlow 函数，这会触发多个 重新计算样式 和 布局 事件：

    动画帧触发事件及其子事件

  8. 单击其中一个紫色 布局 事件。

    DevTools 在摘要面板中提供了有关事件详细信息。 有一个关于“强制重排” (重新布局) 的警告。

  9. 在摘要面板中，单击“强制布局”下的 app.js：104 链接。

    DevTools 将转到在 “源” 工具中强制布局的代码行：

    导致强制布局的代码行

未优化代码的问题在于，在每个动画帧中，它会更改每个图标的样式，然后查询每个图标在网页上的位置。 由于样式已更改，浏览器不知道每个图标位置是否更改，因此必须重新布局图标才能计算新位置。

另请参阅：

第 8 步：记录优化代码的性能

上面记录 了未优化 的代码性能。

记录优化后的代码性能，如下所示：

  1. 点击演示网页上的 “优化 ”以打开优化代码。

  2. 在“DevTools”窗口的“ 性能 ”工具中，单击“ 录制 ” (“ 录制) ”按钮。

    网页运行时，DevTools 将捕获效果指标。

  3. 等待几秒钟，然后单击 停止 图标 (停止图标) 或停止按钮 。

    DevTools 停止录制，处理数据，然后在 “性能 ”工具中显示结果。

第 9 步：分析优化代码的性能

  • 使用刚学到的工作流和工具，分析性能的结果，如上面 的步骤 5：分析未优化代码的性能中所述。

    从改进的帧速率到“主”节中绘制图表事件的减少，应用的优化版本执行的工作要少得多，从而产生更好的性能。

步骤 10：分析未优化的代码

比较未优化版本应用中的此 JavaScript 代码段：

// Read the current position.
const currentPos = element.offsetTop;
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - SPEED : currentPos + SPEED;

// If the new position is out of bounds, reset it.
if (nextPos < 0) {
  nextPos = 0;
} else if (nextPos > canvas.offsetHeight) {
  nextPos = canvas.offsetHeight;
}

// Set the new position on the element.
element.style.top = `${nextPos}px`;

// Switch the direction if needed.
if (element.offsetTop === 0) {
  element.dataset.dir = 'down';
} else if (element.offsetTop === canvas.offsetHeight) {
  element.dataset.dir = 'up';
}

对于网页上的每个蓝色图标，上述代码片段在浏览器呈现循环的每个帧上运行。 该 element 变量引用单个蓝色图标。

在这个未优化的版本中，我们创建了一个 nextPos 变量，该变量设置为图标的当前位置，并向其添加一些距离。 使用 element.offsetTop读取图标的当前位置。

确保图标仍在网页范围内后，我们使用 element.style.top设置其新位置，这会在元素上设置内联样式。

最后，我们再次阅读 element.offsetTop ，以调整图标的方向。

第 11 步：分析优化的代码

优化的代码使用不同的操作序列来减少工作。 下面是该应用优化版本中的相同 JavaScript 代码段：

// Read the current position.
const currentPos = parseFloat(element.style.transform.match(/[0-9.]+/)[0]);
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - (SPEED * 100 / canvasHeight) : currentPos + (SPEED * 100 / canvasHeight);

// If the new position is out of bounds, reset it, and switch the direction.
if (nextPos < 0) {
  nextPos = 0;
  element.dataset.dir = 'down';
} else if (nextPos > 100) {
  nextPos = 100;
  element.dataset.dir = 'up';
}

// Set the new position on the element.
element.style.transform = `translateY(${nextPos}vh)`;

在优化版本中，我们首先通过读取element.style.transform而不是使用element.offsetTop来设置变量的nextPos值。 使用元素的内联样式速度更快，因为读取 element.offsetTop 会强制浏览器引擎知道所有元素在网页上的位置，这需要引擎重新计算样式和布局。

然后我们调整图标的方向，但这次我们不会像在未优化的版本中那样再次阅读 element.offsetTop 。

最后，我们设置图标的新位置，但这次我们使用的 element.style.transform 不是 element.style.top. 使用 element.style.transform 速度更快，因为浏览器呈现引擎可以应用 CSS transform 属性，而无需重新计算网页的布局。 使用该 transform 属性时，浏览器会将每个图标视为单独的图层，然后通过重新组合最终图像在正确位置显示这些图层。

另请参阅：

步骤 12：重置 DevTools 设置

  1. 切换到未停靠的 DevTools 窗口。

  2. 在“性能”工具中，单击“记录设置” (“记录设置) ”按钮。

    开发工具显示与捕获性能指标相关的设置、下拉菜单和复选框。

  3. 在左上角的“ CPU 限制 ”下拉菜单中，选择 “无限制”。

    DevTools 停止限制 CPU。 警告图标将从 “性能 ”工具的选项卡中删除。

  4. 在 DevTools 的右上角，单击“ 自定义和控制 DevTools (自定义和控制 DevTools 图标) ”按钮，然后在 “停靠位置”旁边，单击“扩展 坞到右侧 ” (“扩展 坞到右侧”图标) 按钮。

后续步骤

若要更轻松地使用 性能 工具，请练习分析网页并分析结果。

如果你对结果有任何疑问，请在“活动栏”中选择“帮助” (“活动栏”中的“帮助”图标) >“反馈”。 或者，在 Windows (按 Alt+Shift+I，在 macOS) 按 Alt+Shift+I Linux) 或 (Option+Shift+I。

或者， 在 MicrosoftEdge/DevTools 存储库上提交问题。

如果可能，请在反馈中包括屏幕截图或指向可重现网页的链接。

有许多方法可以提高运行时性能。 本文重点介绍一个特定的动画瓶颈，以便重点介绍 性能 工具，但这只是可能遇到的众多瓶颈之一。

注意

此页面的某些部分是根据 Google 创建和共享的作品所做的修改，并根据 Creative Commons Attribution 4.0 International License 中描述的条款使用。 原始页面可在 此处 找到，作者为 Kayce Basques。

知识共享许可协议 本作品根据 知识共享署名 4.0 国际许可证获得许可。

  • 上次更新时间为