浏览器新面试考点：核心网页交互新指标“INP”

本篇译自：web.dev/blog/inp-cw…

2020 年初，Google Chrome 团队推出了“核心 Web 指标”，旨在为网页提供一系列质量信号。

Google Chrome 团队即将对核心 Web 指标进行一些更改，以便更好地评估网页的用户体验质量。

在本文中，我们将探讨这一变化以及它带来的影响。

时间线：

曾经，First Input Delay (FID) 是核心 Web 指标中的一项响应性指标，但 FID 已知存在一些限制。

FID 是一种加载响应度指标，其背后的原理是，如果在加载阶段对页面的第一个交互没有明显的输入延迟，那么页面给人的第一印象就是良好的。缺点就是：FID 仅测量第一个交互的输入延迟，而不考虑运行事件处理程序的时间或呈现下一帧的延迟。

经过一年的测试并收集社区反馈后，Chrome 团队决定提升 INP 作为核心 Web 指标中的一项新的响应性指标，并从 2024 年 3 月起取代 FID。

也就是说：2024 年 3 月，INP 取代 FID 后，Search Console 报告将不再显示 FID 指标，并将 INP 用作新的响应性指标。

INP 的计算借助 Event Timing API，通过观察事件处理程序的延迟来确定交互的响应时间。

FID 只关注页面加载阶段的第一个交互，而 INP 考虑了页面的所有交互。它的目标是确保用户发起交互到下一帧渲染的时间尽可能短，以提供良好的用户体验。

具体来说：Google 测试会根据网站上大多数用户互动的持续时间得出一个 INP 分数。分数将为“好”、“需要改进”或“差”，具体取决于您的网站在视觉上更新所需的时间。

从这张表中不难看出：

• INP低于或等于200毫秒： 表明你的页面响应良好，用户体验优秀。
• INP在200毫秒以上但低于或等于500毫秒： 表明你的页面响应需要改进，存在一定的用户体验问题。
• INP高于500毫秒： 表明你的页面响应性差，用户体验较差，亟需优化。

谷歌官方强烈建议网站所有者实现良好的核心 Web 指标，确保用户在总体上获得良好的体验。

开发人员如何针对 INP 优化代码？

如果你是开发人员，如果想优化 INP 分数，可以作如下操作。

1. 立即确认用户输入

在优化 INP 分数时，有一件事非常重要，即是：你需要立即向所有用户输入提供视觉反馈；

用户应立即看到他们的输入被识别，并且系统正在对其执行操作。这将明显提高 INP 分数；

以下是一些示例：

• 如果用户单击某个元素，则应立即显示已单击该元素的内容。
• 如果用户提交表单，则需要立即显示某些内容以确认，例如消息等。
• 如果用户点击图像以在灯箱中打开它，则不要只是等待图像加载。相反，应该立即显示演示图像或缩略图。然后，加载图像后，再在窗口中显示它。

特别是如果需要进行繁重的JavaScript处理以响应用户输入，只需确保在开始任务之前更新 UI。之后，可以使用 Web worker 在 setTimeout 回调或单独的线程上执行 CPU 密集型工作，然后最终将结果呈现给用户。

2. 优化浏览器最耗时的环节

我们应该调查浏览器最耗时的环节，然后优化这些部分。

在谷歌浏览器中，当导航到查看 » 开发人员 » 开发人员工具 » 性能时，可以检查阻止下一个绘制的 JavaScript 函数和事件处理程序。

通过这样的办法减少用户 INP 时间。

3. 减少布局

有时，许多 CPU 活动由布局工作组成。

发生这种情况时，应该检查是否可以减少代码中的 relayout 函数。

4. 首先显示首屏内容

如果呈现页面内容很慢，那么 INP 分数很可能会受到影响。

所以，考虑先只显示重要的“首屏”内容，以便更快地体现帧的渲染结果。

说到这里，我们不难发现：成长与发展是学习与工作的主旋律 ~ 最后，自荐一下我和机械工业出版社联合出版的 《程序员成长手记》 一书：全书分为3大模块、8个章节：从入门程序员到程序员自驱成长，回归纸质阅读，相信能给你一个更全局的程序员视野，提供成长帮助。