在实验室中手动诊断互动速度缓慢的问题

了解如何将现场数据运用到实验室中重现问题，并通过手动测试找出导致互动缓慢的原因。

Jeremy Wagner

在优化 Interaction to Next Paint (INP) 时，一个难点在于找出导致 INP 不佳的原因。潜在原因有很多，例如在主线程上安排许多任务的第三方脚本、DOM 过大、事件回调开销很大以及其他问题。

改进 INP 并非易事。首先，您需要了解哪些互动往往是网页的 INP。如果您不知道从真实用户的角度来看，网站上的哪些互动速度往往最慢，请参阅查找现场速度缓慢的互动。有了实测数据作为指引后，您便可以在实验工具中手动测试这些特定互动，以找出这些互动速度缓慢的原因。

如果没有现场数据怎么办？

拥有实测数据至关重要，因为这样可以为您节省大量时间，让您试图弄清楚哪些互动需要优化。但您所在的位置可能没有现场数据。如果这符合你的情况，你仍然可能找到要改进的互动，但需要付出更多努力和使用其他方法。

总阻塞时间 (TBT) 是一项实验室指标，用于评估网页在加载过程中的响应情况，与 INP 密切相关。如果您的网页的待定时间较高，这可能意味着您的网页在网页加载时对用户互动反应缓慢。

要确定网页的 TBT，您可以使用 Lighthouse。如果网页的 TBT 较高，有可能是主线程在网页加载期间过于繁忙，这会影响网页在网页生命周期的关键时刻的响应速度。

若要在网页加载后找出缓慢的互动，您可能需要其他类型的数据，例如您可能已在网站的分析数据中发现的常见用户流。举个例子，如果您在电子商务网站上工作，常见的用户流就是用户在将商品添加到在线购物车并结账时执行的操作。

无论您是否有现场数据，下一步都是手动测试和重现缓慢互动，因为只有您可以重现缓慢互动，才能解决问题。

在实验室中重现缓慢交互

通过手动测试，在实验室中，有很多方法可以重现速度缓慢的交互，不过以下是一个您可以尝试的框架。

录制轨迹

我们推荐使用 Chrome 的性能分析器来诊断和排查缓慢互动问题。要在 Chrome 的性能分析器中分析互动情况，请按以下步骤操作：

1. 打开您要测试的网页。
2. 打开 Chrome 开发者工具，然后前往 Performance 面板。
3. 点击面板左上角的 Record（记录）按钮开始跟踪。
4. 执行您要进行问题排查的互动。
5. 再次点击录制按钮可停止跟踪。

在性能分析器填充后，首先应查看分析器顶部的 activity 摘要。活动摘要顶部会显示记录中发生耗时较长的任务的红色条。这让您可以快速放大问题区域。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Chrome 性能分析器顶部的活动摘要。时间较长的任务会在活动火焰图上方以红色突出显示。在本示例中，大量脚本工作承担了耗时较长任务中的大部分工作。

您可以在活动摘要中拖动并选择区域，以快速关注有问题的区域。您可以选择使用性能分析器中的面包屑导航功能来帮助缩小时间轴范围并忽略不相关的活动。

当您关注互动发生的位置后，Interactions 轨道可帮助您将互动与其下方的主线程轨道中发生的活动对应起来：

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 在 Chrome 开发者工具中的性能分析器中分析的互动。互动轨道会显示一系列与点击互动对应的事件。“Interactions”跟踪条目涵盖负责推动互动的各个任务。

您可以将鼠标悬停在互动轨道中的迭代操作上，详细了解哪部分互动用时最长：

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 将鼠标悬停在效果面板的互动轨道中的互动上时显示的提示。该提示会显示互动的各个部分所花的时间。

互动的条纹部分表示互动超过 200 毫秒的时间，200 毫秒是“良好”的达到网页 INP 的阈值。列出的互动部分包括：

1. 输入延迟 - 由左胡须直观呈现。
2. 处理时长 - 以左右胡须之间的实心块可视化。
3. 展示延迟 - 通过正确的胡须直观呈现。

接下来，您需要更深入地挖掘导致交互缓慢的问题，本指南的后面部分将会介绍相关内容。

Web Vitals Chrome 扩展程序

建议使用性能分析器来诊断已知缓慢的交互，但是，当您不知道哪些交互是有问题的交互时，可能需要一些时间来确定缓慢的交互。可以考虑使用 Web Vitals Chrome 扩展程序。此扩展程序可用于快速尝试多次交互，以找出有问题的交互，然后再进入性能分析器。

安装后，如果您按照以下步骤操作，Web Vitals 扩展程序会在开发者工具控制台中显示互动数据：

1. 在 Chrome 中，点击地址栏右侧的扩展程序图标。
2. 在下拉菜单中找到 Web Vitals 扩展程序。
3. 点击右侧的图标即可打开扩展程序的设置。
4. 点击选项。
5. 在出现的屏幕中，选中控制台日志记录复选框，然后点击保存。

完成上述步骤后，在 Chrome 开发者工具中打开控制台，然后开始测试网页上的可疑互动。在您互动时，控制台中会显示诊断数据：

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Web Vitals 扩展程序可以在 Chrome 开发者工具中向控制台记录有关促成页面 INP 的互动的详细数据。

虽然 Web Vitals 扩展程序有助于识别缓慢的互动，并提供一些详细信息来帮助您调试 INP，但您可能仍需要使用性能分析器来诊断缓慢互动，因为它提供了详细数据，让您浏览网站的正式版代码，找到导致互动缓慢的原因。

如何识别互动速度的哪个部分

交互包括三部分：输入延迟、处理时长和呈现延迟。如何优化互动以降低网页的 INP，取决于互动过程的哪一部分用时最长。

如何识别长时间输入延迟

输入延迟可能会导致较长的互动延迟。输入延迟是互动的第一部分。这是指从操作系统首次收到用户操作，到浏览器能够开始处理该互动的首个事件处理脚本回调的这段时间。

若要在 Chrome 性能分析器中确定输入延迟，您可以在互动轨道中找到相应互动。左胡须的长度表示互动输入延迟的比例，您可以将鼠标悬停在效果分析器中的相应互动上，在提示中找到确切的值。

输入延迟永不为零，但您可以控制输入延迟的时长。关键是弄清楚主线程上是否有正在运行的工作阻止回调按预期运行。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 由第三方脚本中的计时器触发的任务导致的输入延迟。在互动轨道中显示的互动中，胡须的左侧部分直观呈现了输入延迟。

在上图中，当用户尝试与页面交互时，来自第三方脚本的任务正在运行，因此扩展了输入延迟。输入延迟延长会影响互动的延迟时间，进而影响网页的 INP。

<ph type="x-smartling-placeholder">

</ph> 了解详情：如需详细了解如何解决输入延迟问题，请参阅如何识别和缩短输入延迟。

如何确定处理时间过长

事件回调在输入延迟后立即运行，它们完成所需的时间称为处理时长。如果事件回调运行时间过长，就会延迟浏览器呈现下一帧，并且会显著增加互动的总延迟时间。较长的处理持续时间可能是因计算成本高昂的第一方或第三方 JavaScript 造成的，在某些情况下，两者兼有。在性能分析器中，这由互动轨道中互动的实体部分来表示。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 为响应点击互动而运行的事件回调，如 Chrome 开发者工具中的性能分析器中所示。请注意，处理时长较长。

通过在跟踪记录中观察特定交互的以下内容，可以找到开销大的事件回调：

1. 确定与事件回调关联的任务是否为长任务。为了更可靠地显示实验设置中的长时间运行的任务，您可能需要在性能面板中启用 CPU 节流，或者连接低层级到中等层级的 Android 设备并使用远程调试。
2. 如果运行事件回调的任务是一个耗时较长的任务，请在调用堆栈中查找事件处理程序条目（例如，名称为 Event: click 等名称的条目），这些条目的右上角有一个红色三角形。

您可以尝试以下策略之一来缩短互动的处理时长：

1. 尽量减少工作量。在代价高昂的事件回调中发生的一切是否绝对必要？如果可能，请考虑完全移除该代码；如果无法实现，请考虑将代码执行推迟到晚些时候。您还可以利用框架功能来提供帮助。例如，React 的记忆功能可以在组件属性未更改时，跳过不必要的组件渲染工作。
2. 将事件回调中的非呈现工作推迟到较晚的时间点。冗长的任务可以通过“让出到主线程”进行分解。每当让步于主线程时，您都会结束当前任务的执行，并将其余工作分解为一个单独的任务。这让渲染器有机会处理之前在事件回调中执行的用户界面更新。如果您恰好在使用 React，则其过渡功能可以为您代劳。

这些策略应该能够帮助您优化事件回调，从而缩短运行时间。

如何识别呈现延迟

输入延迟和处理时长过长并不是 INP 不佳的唯一原因。有时，为响应少量事件回调代码而发生的渲染更新也十分昂贵。浏览器向界面呈现可视更新以反映互动结果所需的时间称为“呈现延迟”。

<ph type="x-smartling-placeholder">

</ph> 重要提示：呈现性能指南是帮助您了解浏览器呈现网页的方式的入门指南。像素的生命周期更深入地介绍了呈现在基于 Chromium 的浏览器中的工作原理。

。 <ph type="x-smartling-placeholder">

</ph>

呈现任务，如 Chrome 的性能分析器中所示。右侧的胡须可显示演示延迟的时长。

渲染工作通常包括样式重新计算、布局、绘制和合成等任务，在性能分析器的火焰图中以紫色和绿色块表示。总展示延迟时间由互动轨道中互动的右须显示。

<ph type="x-smartling-placeholder">

</ph> 重要提示：在分析因渲染工作高昂而导致的缓慢交互情况时，您应选中性能分析器顶部的 Screenshots 复选框。这有助于您将界面更新与主线程上的相应渲染工作保持一致。

在所有可能导致高互动延迟的原因中，呈现延迟可能是最难以排查和解决的。以下任何原因都可能会导致渲染工作过多：

• DOM 较大。更新页面呈现所需的渲染工作往往会随着页面 DOM 的大小增加。有关详情，请参阅 DOM 大的大小对互动性的影响以及您可以采取的措施。
• 强制自动重排。当您在 JavaScript 中对元素应用样式更改，然后立即查询相关工作的结果时，就会发生这种情况。结果是浏览器必须先执行布局工作，然后再执行任何其他操作，这样浏览器就可以返回更新后的样式。如需详细了解如何避免强制自动重排，请参阅避免大型、复杂的布局和布局抖动。
• requestAnimationFrame 回调涉及过多或不必要的工作。requestAnimationFrame() 回调在事件循环的渲染阶段运行，并且必须在呈现下一帧之前完成。如果您使用 requestAnimationFrame() 执行不涉及更改界面的工作，请注意，这可能会延迟下一帧。
• ResizeObserver 回调。此类回调在渲染之前运行，并且如果其中的工作成本高昂，可能会延迟呈现下一帧。与事件回调一样，推迟下一帧不需要的任何逻辑。

。 <ph type="x-smartling-placeholder">

</ph> 重要提示：在 Chrome 开发者工具中启用时间轴：事件发起者实验，可以更轻松地排查问题。启用此实验后，任何样式重新计算任务上将画一个箭头，指向启动该实验的 JavaScript 任务。要启用此实验，请转到 Chrome 开发者工具设置，点击左侧菜单中的实验，然后点击标有 Timeline: event initiators（时间轴：事件发起者）的复选框，然后重启开发者工具。

如果无法重现缓慢互动，该怎么办？

如果您的现场数据表明某个互动速度很慢，但您无法在实验室中手动重现该问题，该怎么办？导致这种情况的原因有多种。

首先，测试互动时的情况取决于硬件和网络连接。您使用的设备可能速度较快，但这并不意味着您的用户会这么做。如果出现上述情况，您可以尝试以下三种方法之一：

1. 如果您有实体 Android 设备，请使用远程调试在您的宿主机上打开 Chrome 开发者工具实例，并尝试在其中重现缓慢互动。移动设备通常不如笔记本电脑或台式机快，因此在此类设备上更容易观察到缓慢的互动。
2. 如果您没有实体设备，请在 Chrome 开发者工具中启用 CPU 节流功能。

另一个原因是，您在与页面交互之前等待页面加载完成，但用户没有这样做。如果您使用的是速度较快的网络，可以通过启用网络节流来模拟较慢的网络条件，然后在页面绘制后立即与该页面进行交互。您应该这样做，因为主线程在启动期间通常最繁忙，在该时间段内的测试可以揭示用户所遇到的问题。

INP 问题排查是一个迭代过程

要找出导致 INP 不佳的交互延迟时间较长的原因，需要付出大量的努力，但如果您能够查明原因，就已经完成了一半。通过采用有条不紊的方法排查 INP 不佳的问题，您可以可靠地找出导致问题的原因，并更快地找到正确的修复方案。如需审核，请执行以下操作：

• 依靠实测数据找出缓慢互动。
• 在实验室中手动测试有问题的字段交互，看看它们是否可重现。
• 确定是由于输入延迟较长、成本高昂的事件回调还是成本高昂的渲染工作所致。
• 重复。

最后一项是最重要的。与大多数其他提高网页性能的工作一样，问题排查和改进 INP 也是一个周期性过程。修复一次缓慢互动后，继续下一个互动，然后不断重复，直到开始看到成效。