INP（與下一個繪製的互動）衡量網頁對使用者互動的回應能力。本文揭開了 Google 的 Core Web Vitals 指標的神秘面紗，探討了它與已棄用的 FID 指標的不同之處，並概述瞭如何優化 JavaScript 執行路徑以獲得「良好」分數。
1.什麼是與下一個繪畫的互動（INP）？
INP 追蹤使用者造訪頁面期間所有使用者互動（點擊、敲擊和鍵盤輸入）的延遲。它測量使用者啟動操作和瀏覽器繪製顯示視覺更新的下一幀之間的持續時間。
它與 FID（首次輸入延遲）有何不同
FID 是 Google 之前的回應指標，但它有一些局限性，很容易被繞過：
- 首次互動偏差：FID 僅監控第一次使用者互動。由導航選單或點擊過濾器引起的任何後續延遲都將被忽略。
- 忽略腳本執行：FID 僅計算輸入延遲（瀏覽器接收事件所需的時間）。它忽略了執行實際 JavaScript 事件處理程序和繪製更新的 UI 所需的時間。
INP 透過追蹤會話整個生命週期中的所有交互作用、報告表現最差的交互作用（排除異常值）來解決這些限制。
INP 評分閾值
- 良好（通過）：200 毫秒或更短
- 需要改進：200ms 至 500ms
- 差：超過 500 毫秒
2. INP成績不佳的主要原因
INP 分數低的核心罪魁禍首是主線程阻塞。
由於瀏覽器在單一主執行緒上處理 UI 渲染和 JavaScript 執行，因此啟動複雜的腳本邏輯會立即阻止瀏覽器更新視窗。如果按一下觸發需要 300 毫秒的任務，則螢幕會在該視窗期間凍結，從而提高您的 INP 分數。
3. 優化 INP 的技術
1）任務產出（分解長任務）
任何運行時間超過 50 毫秒的 JavaScript 函數都會被標記為「長任務」。若要解決此問題，請將長時間運行的任務分解為模組化步驟，並將主執行緒傳回瀏覽器以處理 UI 框架。
// ✕ Bad: Continuous loop blocking the main thread
function processArray(items) {
for (let item of items) {
calculateComplexResult(item); // Freezes the browser
}
}
// ◯ Good: Yielding control periodically using async timeouts
async function processArrayOptimized(items) {
for (let i = 0; i < items.length; i++) {
calculateComplexResult(items[i]);
// Yield every 50 items to let the browser paint
if (i % 50 === 0) {
await yieldToMainThread();
}
}
}
function yieldToMainThread() {
// Use scheduler.yield if supported, otherwise fallback to setTimeout
if ('scheduler' in window && 'yield' in window.scheduler) {
return window.scheduler.yield();
}
return new Promise(resolve => setTimeout(resolve, 0));
}
2）優化使用者回饋循環
如果您必須執行繁重的邏輯，請確保在繁重的處理腳本開始之前**使用「載入微調器」或活動按鈕狀態更新 UI。
button.addEventListener('click', () => {
// Step 1: Update UI immediately (registers low INP latency)
toggleSpinner(true);
// Step 2: Queue the heavy calculation task for the next event loop
setTimeout(() => {
executeHeavyCalculation();
toggleSpinner(false);
}, 0);
});
4.結論
INP 優化不僅僅是勾選 SEO 審核。對使用者輸入提供即時視覺回饋可以提高轉換率並阻止使用者放棄無回應的頁面。使用 Chrome DevTools 的「效能」面板來追蹤長時間任務並優化您的使用者體驗。