INP和FID之间的关系INP更可靠

Folas · 发表于 2023-12-19 12:29:33

因此，交互后大量执行 JavaScript 可能会长时间阻塞主线程并延迟对交互的响应，并且开发人员的文章揭示了导致脚本阻塞的一些常见原因，以及我们可以应用的一些快速修复方法。未优化的 JavaScript。冗余代码或不良的代码分割和加载策略可能会导致 JavaScript 代码膨胀并长时间阻塞主线程。代码分割、渐进式加载和分割长任务可以显着缩短响应时间。第三方脚本。处理交互有时不需要的第三方脚本（例如广告脚本）可能会阻塞主线程并导致不必要的延迟。确定必要脚本的优先级有助于减少第三方脚本的负面影响。多个事件处理程序。与每次交互关联的多个事件处理程序（每个事件处理程序运行不同的脚本）可能会相互干扰并导致长时间延迟。其中一些任务可能不是必需的，可以安排在网络工作人员上或在浏览器空闲时执行。事件处理的框架开销。框架可能具有用于事件处理的附加功能/语法。

例如，Vue 使用 v-on 将事件侦听器附加到元素，而 Angular 则负责用户事件处理程序。与标准 JavaScript 相比，实现这些功能需要额外的框架代码。 Hydration。使用 JavaScript 框架时，服务器为页面生成初始 HTML 的情况并不少见，然后需要使用事件处理程序和应用程序状态来完成该操作，以便它可以在 Web 浏览器中进行交互。这个过程称为水合。这可能是一个繁重的加载过程，具体取决于 JavaScript 加载和完 WhatsApp 号码数据成水合所需的时间。它还可以使页面看起来不具有交互性。通常，水合会在页面加载或延迟加载期间自动发生（例如，基于用户交互），并且可能由于任务调度而影响 INP 或处理时间。在像 React 这样的库中，可以利用 useTransition 使组件的部分渲染发生在下一帧中，并将更“昂贵”的资源级副作用留给后续帧。

因此，与更紧急的更新（例如点击）相关的转换中的更新可能是 INP 的有用模式。预取。如果做得好，积极预取后续导航所需的资源可以带来性能优势。但是，如果您同步预取和渲染 SPA 路径，最终可能会对 INP 产生负面影响，因为所有这些渲染都是昂贵的昂贵在一个框架内完成。当您没有预取路径并开始必要的工作（例如， fetch() ）并解冻视图时，就会出现这种情况。因此，值得回顾一下框架的预取方法是否提供了最佳的用户体验，以及这可能如何（如果有的话）影响 INP。因此，为了获得良好的 INP 分数，开发人员最终需要重点检查页面每次交互后运行的代码并优化第一方和第三方脚本的分块、重新水合、加载策略以及每次 render() 更新的大小。欢迎来到Next Paint互动 Google 员工表示，INP 分数旨在成为“更好的网站指南针”，以提高响应能力和性能，建立衡量用户真正感知的页面响应能力的新水平。