INP指标

什么是INP（Interaction to Next Paint）

参考网站：webVital-INP文档

---

定义与核心目标

• INP 是一项稳定的 Core Web Vitals 指标，通过统计用户访问期间所有符合条件的互动约定时间，评估网页对用户操作的总体响应能力。
• 最终值：取观察到的最长互动时间（可能忽略高群值）。
• 用户体验目标 ：
  INP 应 ≤ 200 毫秒，建议以 P75（按设备类型细分）作为达标基准。

---

检测工具

1. Chrome插件 ：
   Web Vitals
2. 其他测试网站 ：
   PageSpeed Insights

---

指标计算规则

互动延迟由三阶段组成：

1. 输入延迟，从用户发起与网页的互动开始，在互动的事件回调开始运行时结束。
2. 处理时间，由事件回调运行完成所需的时间组成。
3. 呈现延迟时间，即浏览器呈现下一帧（包含互动的视觉效果）所需的时间。

这三个阶段的总和就是总互动延迟时间，总延迟 = 输入延迟 + 处理时间 + 呈现延迟。

互动的每个阶段都会计入互动总延迟时间，因此了解如何优化互动的每个部分，以尽可能缩短互动的运行时间。

---

优化措施

关键策略

1. 具体分析查找卡顿原因
   https://web.dev/articles/find-slow-interactions-in-the-field?hl=zh-cn#get_field_data_quickly_with_crux
   还可以使用 Chrome DevTools 定位缓慢的交互事件。

2. 将非关键更新推迟到下一帧执行，让渡主线程执行关键业务
   避免让当前执行的任务阻塞用户交互、阻塞页面渲染；或者页面渲染任务过重阻塞业务代码执行。
   学会使用requestAnimationFrame() 放置于代码中，它可以确保非关键代码不会阻塞下一帧。

3. 避免过于冗长的回调方法，它们都是顺序执行的，可以在关键更新执行后，剩下的回调方法放置于requestAnimationFrame()中执行。

   textBox.addEventListener('input', (inputEvent) => {
     // 关键更新立即执行
     updateTextBox(inputEvent);
     
     // 非关键逻辑延后
     requestAnimationFrame(() => {
       setTimeout(() => {
         const text = textBox.textContent;
         updateWordCount(text);
         checkSpelling(text);
         saveChanges(text);
       }, 0);
     });
   });