什么是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);});
   });