通过

分析运行时性能 (教程)

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

本教程中学到的技能可用于分析 Web 内容的加载、交互性和视觉稳定性，这也是 Core Web Vitals 的关键指标。 每个核心 Web Vitals 都代表用户体验的一个不同方面，在现场可衡量，并反映了以用户为中心的关键结果的实际体验。 可以在 性能 工具中查看这些核心 Web 重要数据。

另请参阅：

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

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

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

    你将分析此演示网页，其中显示了上移和下移的图标数量不定。 如果要查看演示的源代码，请参阅 MicrosoftEdge/Demos > 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. 单击“ 捕获设置 (捕获设置) ”按钮。

    DevTools 显示与捕获性能指标相关的设置下拉菜单和复选框。

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

    CPU 限制

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

    建议的限制因素由 DevTools 根据计算机计算。 若要确保网页在低端移动设备上正常工作，请在 CPU 限制 下拉列表中选择更大的减速，例如 6 倍减速。

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

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

  4. 单击“ 捕获设置 (捕获设置) ”按钮。

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

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

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

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

若要使用理想数量的图标填充演示网页，请执行以下作：

  1. 切换到迟缓动画演示网页。

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

  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 在主线程上显示活动火焰图，随时间推移：

    Main 部分

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

    • Y 轴表示调用堆叠。 当事件堆叠在一起时，这意味着上级事件导致了较低的事件。

    录制中存在大量数据。

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

    放大部分

    “ 概述 ”区域包括 (右侧) 指示的 CPU 和 NET 图表。

    “概述”) 下的“主要”部分 (，“摘要”选项卡仅显示录制的选定部分的信息。

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

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

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

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

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

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

  5. 单击“ 显示” 链接。

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

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

    源代码的相关行显示在 “源 ”工具中。

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

    或者，按 W。

    现在可以看到呈现动画的单个帧时发生的事件。 更新函数被调用，后者又调用 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. 在 “性能 ”工具中，单击“ 捕获设置 (捕获设置) 按钮。

    DevTools 显示与捕获性能指标相关的设置下拉菜单和复选框。

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

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

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

后续步骤

若要更熟悉 性能 工具，请练习分析网页和分析结果。

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

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

在反馈中，尽可能包含可重现网页的屏幕截图或链接。

可通过多种方式提高运行时性能。 本文重点介绍一个特定的动画瓶颈，重点介绍 性能 工具，但它只是你可能遇到的许多瓶颈之一。

注意

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

Creative Commons 许可证 此作品根据 Creative Commons 署名 4.0 国际许可获得许可。

  • Last updated on