优化输入延迟

了解输入延迟是什么，并学习缩短输入延迟的技巧，以提高互动速度。

Jeremy Wagner

网络互动非常复杂，浏览器中会发生各种活动来推动互动。不过，它们都有一个共同点，即在事件回调开始运行之前，都会产生一些输入延迟。在本指南中，您将了解什么是输入延迟，以及可以采取哪些措施来最大限度地减少输入延迟，以加快网站的互动速度。

什么是输入延迟？

输入延迟是指从用户首次与页面互动（例如点按屏幕、使用鼠标或按下按键）开始，一直到互动事件回调开始运行这段时间。每次互动都会先有一段输入延迟。

输入延迟的简化可视化图表。左侧是鼠标光标的线条图案，后面有星形图案，表示互动开始。右侧是齿轮的线条图案，表示互动事件处理脚本何时开始运行。中间的空格被标注为带有大括号的输入延迟。
输入延迟背后的机制。当操作系统收到输入时，必须先将其传递给浏览器，然后才能开始互动。这需要一定的时间，并且可能会因现有主线程工作而增加。

部分输入延迟是不可避免的：操作系统始终需要一些时间来识别输入事件并将其传递给浏览器。不过，这部分输入延迟通常不会被察觉到，而且网页本身发生的其他情况可能会导致输入延迟时间过长，从而导致问题。

如何看待输入延迟

一般来说，您应尽可能缩短互动过程的每个部分，以便无论用户使用的是哪种设备，您的网站都能够尽可能达到 Interaction to Next Paint (INP) 指标的“良好”阈值。控制输入延迟只是达到该阈值的一个方面。

因此，您应力求尽可能缩短输入延迟时间，以满足 INP 的“良好”阈值。不过，请注意，您无法完全消除输入延迟。只要您避免在用户尝试与您的网页互动时执行过多主线程工作，输入延迟应该足够低，以避免出现问题。

如何最大限度地缩短输入延迟

如前所述，某些输入延迟是不可避免的，但另一方面，某些输入延迟是可以避免的。遇到输入延迟问题时，请考虑以下事项。

避免触发过多主线程工作的周期性计时器

JavaScript 中有两个常用的计时器函数可能会导致输入延迟：setTimeout 和 setInterval。两者的区别在于，setTimeout 会安排在指定时间后运行回调。另一方面，setInterval 会安排一个回调，以便在永久或在使用 clearInterval 停止计时器之前，每 n 毫秒运行一次。

setTimeout 本身没有问题，事实上，它有助于避免执行长时间的任务。不过，这取决于发生超时的时间，以及用户在超时回调运行时是否会尝试与网页交互。

此外，setTimeout 可以在循环中运行或以递归方式运行，其作用更类似于 setInterval，但最好等到前一个迭代完成时再安排下一次迭代。虽然这意味着每次调用 setTimeout 时循环都会让出主线程，但您应注意确保其回调不会最终执行过多工作。

setInterval 会按一定间隔运行回调，因此更有可能妨碍交互。这是因为，与 setTimeout 调用的单个实例不同（这是一个一次性回调，可能会妨碍用户互动），由于 setInterval 具有周期性，因此更有可能会妨碍互动，从而增加互动的输入延迟。

Chrome 开发者工具中性能分析器的屏幕截图，展示输入延迟。由计时器函数触发的任务会在用户发起点击互动之前发生。不过，计时器会延长输入延迟时间，导致互动事件回调的运行时间比正常情况下晚。
之前的 setInterval 调用注册的一个计时器，导致输入延迟，如 Chrome DevTools 的“Performance”面板中所示。增加的输入延迟会导致互动事件回调的运行时间比原来晚一些。

如果计时器是在第一方代码中运行的，那么您可以控制这些计时器。评估您是否需要这些步骤，或者尽可能减少其中的工作量。不过，第三方脚本中的计时器则另当别论。您通常无法控制第三方脚本的用途，修复第三方代码的性能问题通常需要与利益相关方合作，以确定是否有必要使用指定的第三方脚本。如果需要，请与第三方脚本供应商联系，确定可采取哪些措施来解决这些脚本可能导致的网站性能问题。

避免耗时较长的任务

减少输入延迟时间的一种方法是避免执行长任务。如果主线程工作过多，导致主线程在互动期间被阻塞，那么在长任务有机会完成之前，系统会增加输入延迟时间。

直观呈现任务延长输入延迟的时长。在顶部，在单个长任务运行后不久就会发生互动，导致明显的输入延迟，从而导致事件回调比预期晚得多。从底层来看，交互大致在同一时间发生，但系统会通过让出时间来将长任务拆分为多个较小的任务，从而让交互的事件回调能够更早运行。
与当任务时间过长且浏览器无法足够快速地响应互动时，与将较长的任务拆分为较小的任务相比，互动会发生什么情况的可视化。

除了尽可能减少在任务中完成的工作量（您应该始终尽量减少在主线程上完成的工作）之外，您还可以通过分解冗长的任务来提高对用户输入的响应速度。

注意互动重叠

如果您有重叠的互动，优化 INP 可能会特别具有挑战性。“互动重叠”是指，您与一个元素进行了互动后，在初始互动还来得及呈现下一帧之前与网页进行了另一次互动。

一张图片，显示了任务何时可能会重叠，从而导致较长的输入延迟。在此图示中，点击互动与按键互动重叠，以增加按键互动的输入延迟时间。
Chrome 开发者工具中性能分析器中两个并发互动的可视化图表。初始点击互动中的渲染工作会导致后续键盘互动出现输入延迟。

互动重叠的原因可能很简单，例如用户在短时间内进行了多次互动。当用户在表单字段中输入内容时，可能会发生这种情况，因为在很短的时间内可能会发生许多键盘互动。如果关键事件的工作量特别大（例如，在自动补全字段的常见情况下，系统会向后端发出网络请求），您可以选择以下几种方式：

  • 请考虑使输入去抖动，以限制事件回调在给定时间段内执行的次数。
  • 使用 AbortController 取消传出的 fetch 请求，使主线程在处理 fetch 回调时不会变得拥挤。注意：AbortController 实例的 signal 属性也可用于中止事件。

由于重叠互动而导致输入延迟增加的另一个原因可能是耗费资源的动画。特别是，JavaScript 中的动画可能会触发许多 requestAnimationFrame 调用，这可能会妨碍用户互动。为解决此问题，请尽可能使用 CSS 动画，以避免将可能高开销的动画帧加入队列。不过，如果您这样做，请务必避免使用非合成动画，以便动画主要在 GPU 和合成器线程上运行，而不是在主线程上运行。

总结

虽然输入延迟可能不是互动运行所需时间的大部分，但请务必了解，互动中的每个部分都会占用一定的时间，而您可以缩短这些时间。如果您发现输入延迟时间过长，则可以采取措施缩短延迟时间。避免重复的计时器回调、拆分长任务以及注意可能的互动重叠，都可以帮助您减少输入延迟，从而让网站用户更快地进行互动。

主打图片来自 Unsplash，作者：Erik Mclean。