通过

性能工具简介

  • 项目

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

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

另请参阅：

入门

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

  1. 在 InPrivate 选项卡或窗口中打开“缓慢 动画 演示”页。 为此，请右键单击该链接，然后选择“ 在 InPrivate 窗口中打开链接”。 你将分析此页面，其中显示了上移和下移的图标数量不定。 有关 InPrivate 的详细信息，请参阅 在 Microsoft Edge 中浏览 InPrivate

    源代码： MicrosoftEdge/Demos > devtools-performance-get-started。

  2. 按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 打开 DevTools：

    左侧为演示，右侧为 DevTools

对于屏幕截图的其余部分，DevTools 显示为 未停靠到单独的窗口。

模拟移动 CPU

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

  1. 在 DevTools 中，打开 “性能 ”工具。

  2. 单击“ 捕获设置” (“ 捕获设置 ”) 。 DevTools 显示了有关如何捕获效果指标的设置。

  3. 对于 "CPU"，选择 4x 减速。 DevTools 会限制 CPU，使其比平时慢 4 倍。

    CPU 限制

    如果要确保页面在低端移动设备上正常工作，请将 CPU 设置为 6 倍减速。

设置演示

以下部分允许你自定义演示，以确保你的体验与屏幕截图和说明相对一致。

  1. 单击“ 添加元素 ”按钮，直到蓝色图标的移动速度明显比之前慢。 在高端计算机上，可以单击大约 20 次。

  2. 单击“ 优化”。 蓝色图标移动速度更快、更平稳。

  3. 若要更好地显示优化版本与未优化版本之间的差异，请单击“ 删除元素 ”按钮几次，然后重试。 如果添加过多的蓝色图标，可能会使 CPU 最大化，并且两个版本的结果可能不会有重大差异。

  4. 单击“慢”。 蓝色图标移动速度变慢，而且又更加迟钝。

记录运行时性能

运行优化版本的页面时，蓝色图标会移动得更快。 为什么？ 两种版本都应该在相同的时间内将图标移动相同的空间。 在 性能 工具中录制内容，了解如何检测未优化版本中的性能瓶颈。

  1. 在 DevTools 中，单击“ 记录 (记录) ”。 页面运行时，DevTools 将捕获效果指标。

    配置文件页面

  2. 稍等几秒钟。

  3. 单击停止。 DevTools 停止录制，处理数据，然后在 性能 工具中显示结果。

    配置文件的结果

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

分析结果

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

  1. CPU 图表沿顶部显示。 CPU 图表中的颜色对应于性能工具底部的“摘要”面板中的颜色。 CPU 图表显示，这些区域构成了一个大区域，这意味着 CPU 在录制期间已达到最大。 每当 CPU 长时间耗尽时，这表示页面性能不佳。

    CPU 图表和“摘要”面板

  2. 将鼠标悬停在 CPU 或 NET 图表上。 DevTools 将显示该时间点处的页面截图。 左右移动鼠标以重播录音。 该操作称为 “清理”，它可用于手动分析性能录制进度。

    鼠标悬停在框架上

奖励：打开帧呈现统计信息覆盖层

另一个方便的工具是 帧呈现统计信息 覆盖，它提供页面运行时 FPS 的实时估计值。 本教程不需要 帧呈现统计信息 覆盖，但可提供有用的见解。

  1. 在 DevTools 中，按 Ctrl+Shift+P (Windows、Linux) 或 Command+Shift+P (macOS) 打开 命令菜单。

  2. 开始在命令菜单中键入Rendering，然后单击“显示呈现”。

  3. 在 “呈现 ”工具中，打开 “帧呈现统计信息”。新的覆盖层显示在网页的左上角。

    FPS 覆盖

  4. 查看完 FPS 数据后，请清除 “帧呈现统计信息 ”复选框以隐藏覆盖层。

查找瓶颈

验证动画性能不佳后，下一步是回答问题“为什么？”

  1. 如果未选择任何事件，“ 摘要 ”面板会显示活动的细目。 页面大部分时间都在渲染。 由于性能是减少工作量的艺术，因此你的目标是减少花费在进行绘制工作上的时间。

    “摘要”面板

  2. 展开重点部分。 DevTools 将显示一段时间内主线程上活动的帧图表。 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 将你带到在 源 工具中强制布局的代码行：

    导致强制布局的代码行

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

分析优化版本

使用刚刚了解的工作流和工具，单击演示网页上的“ 优化 ”以打开优化的代码，进行另一次性能记录，然后分析结果。 从改进的帧速率到“主”节中绘制图表事件的减少，应用的优化版本执行的工作要少得多，从而产生更好的性能。

未优化的版本

将此 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 调整图标的方向。

优化版本

优化后的代码使用不同的操作序列来减少工作。 下面是应用优化版本中的相同 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 属性时，浏览器会将每个图标视为单个层，然后通过重新组合最终图像，将这些层显示在正确位置。

若要了解详细信息，请参阅 对动画使用转换和不透明度更改。

后续步骤

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

如果对结果有任何疑问，请在活动栏中选择“帮助” (“活动栏”) >“反馈”中的“帮助”图标。 或者，按 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 国际许可获得许可。