最佳化輸入延遲時間

瞭解輸入延遲時間，並學習如何縮短輸入延遲時間，提升互動性。

Jeremy Wagner

網站上的互動行為相當複雜，因為瀏覽器會執行各種活動來驅動互動。不過，它們都會在事件回呼開始執行前，產生一些輸入延遲。本指南將說明輸入延遲時間的定義，以及如何盡可能減少延遲時間，讓網站互動速度加快。

什麼是輸入延遲？

輸入延遲時間是指從使用者首次與網頁互動 (例如輕觸螢幕、按下滑鼠或按下鍵) 開始，到互動事件回呼開始執行為止的時間長度。每項互動都會先有一段輸入延遲時間。

簡化的輸入延遲時間視覺化效果。左側是滑鼠游標的線條圖，後方有星芒，代表互動開始。右側是齒輪的線條圖，代表互動事件的事件處理常式何時開始執行。中間的空格會以大括號標示為輸入延遲。
輸入延遲時間背後的機制。作業系統收到輸入內容後，必須在互動開始前將其傳遞至瀏覽器。這項作業需要花費一段時間，且可能會因現有主執行緒工作而增加。

部分輸入延遲是無法避免的，因為作業系統需要一些時間才能辨識輸入事件並將其傳遞給瀏覽器。不過，這部分的輸入延遲通常不會明顯，而且網頁上發生的其他情況也可能導致輸入延遲時間過長，進而造成問題。

如何看待輸入延遲時間

一般來說，您應該盡可能縮短互動過程的每個部分，這樣無論使用者使用何種裝置，您的網站都有機會達到Interaction to Next Paint (INP) 指標的「良好」門檻。控制輸入延遲只是滿足這項門檻的其中一個條件。

因此，您應盡量縮短輸入延遲時間，以符合 INP 的「良好」門檻。不過，請注意，您無法完全消除輸入延遲。只要您在使用者嘗試與網頁互動時，避免過度執行主執行緒工作，輸入延遲時間就會足夠低，不會造成問題。

如何盡可能縮短輸入延遲時間

如前所述，某些輸入延遲是無法避免的，但另一方面，某些輸入延遲是可以避免的。如果您遇到輸入延遲時間過長的問題，請考量以下幾點。

避免啟動過多主執行緒工作的週期性計時器

JavaScript 中有兩個常用的計時器函式，可能會導致輸入延遲：setTimeout 和 setInterval。兩者之間的差異在於，setTimeout 會在指定時間後排定回呼執行時間。另一方面，setInterval 會排程回呼，讓回呼在每 n 毫秒執行一次，直到使用 clearInterval 停止計時器為止。

setTimeout 本身並無問題，事實上，它有助於避免長時間執行的作業。不過，這取決於逾時發生的時間，以及使用者在逾時回呼執行時是否嘗試與網頁互動。

此外，setTimeout 可在迴圈中執行或遞迴，這時的運作方式更像 setInterval，但最好在前一個疊代完成之前，不要排定下一個疊代。雖然這表示迴圈會在每次呼叫 setTimeout 時產生至主執行緒，但您仍應小心確保其回呼不會執行過多工作。

setInterval 會在間隔時間內執行回呼，因此更有可能影響互動。這是因為與 setTimeout 呼叫的單一例項不同，setInterval 是會重複執行的回呼，因此更有可能「會」影響使用者互動，進而增加互動的輸入延遲時間。

Chrome 開發人員工具中性能分析器的螢幕截圖，展示輸入延遲。由計時器函式觸發的工作會在使用者發起點擊互動之前發生。不過，計時器會延長輸入延遲時間，導致互動事件回呼的執行時間比原本晚。
由先前的 setInterval 呼叫註冊的計時器，會導致輸入延遲，如 Chrome 開發人員工具的「效能」面板所示。新增的輸入延遲會導致互動事件回呼的執行時間比原本晚。

如果計時器是在第一方程式碼中發生，您可以控制這些計時器。請評估是否需要這些工作，並盡可能減少工作量。不過，第三方指令碼中的計時器則是另一回事。您通常無法控制第三方指令碼的運作方式，因此要修正第三方程式碼的效能問題，通常需要與利害關係人合作，判斷是否需要使用特定第三方指令碼，如果需要，請與第三方指令碼供應商聯絡，瞭解如何修正這些指令碼可能對網站造成的效能問題。

避免長時間的工作

避免長時間執行的工作，是減少輸入延遲時間的一種方法。如果主要執行緒的工作量過多，導致在互動期間阻斷主要執行緒，就會在長時間工作完成前，增加輸入延遲時間。

工作延長輸入延遲時間的視覺化效果。在頂端，在單一長時間工作階段執行後不久就發生互動，導致輸入延遲時間過長，導致事件回呼執行時間比預期晚得多。在底部，互動會大致同時發生，但長時間的作業會透過交出作業而分成多個較小的作業，讓互動的事件回呼更快執行。
當工作過長，瀏覽器無法快速回應互動時，互動情形會發生什麼情況，以及當較長的工作分割成較小的工作時，互動情形會發生什麼情況。

除了盡量減少工作中的工作量 (您應一律盡量減少在主執行緒中執行的工作)，您也可以分割長項工作，以便提高對使用者輸入內容的回應速度。

留意互動重疊

在進行 INP 最佳化時，如果有重疊的互動，就會特別棘手。互動重疊是指在您與某個元素互動後，在初始互動尚未有機會轉譯下一個影格之前，您又與該網頁進行另一項互動。

這張圖片顯示工作重疊時可能造成的輸入延遲時間。在這個示意圖中，點擊互動與按下鍵互動重疊，因此增加了按下鍵互動的輸入延遲時間。
Chrome 開發人員工具中的效能分析器，以圖表呈現兩個同時發生的互動。初始點擊互動中的轉譯作業會導致後續鍵盤互動發生輸入延遲。

互動重疊的來源可能很簡單，例如使用者在短時間內進行多次互動。使用者在表單欄位中輸入內容時，可能會發生這種情況，因為在短時間內可能會發生許多鍵盤互動。如果某個重要事件的作業成本特別高，例如在自動完成欄位中向後端發出網路要求的常見情況，您可以選擇以下幾種做法：

  • 建議您去抖動輸入內容，限制事件回呼在特定時間內執行的次數。
  • 使用 AbortController 取消傳出 fetch 要求，以免主執行緒因處理 fetch 回呼而壅塞。注意：AbortController 例項的 signal 屬性也可用於中斷事件。

另外，動畫的運算成本高昂，也可能導致互動重疊，進而造成輸入延遲。特別是，JavaScript 中的動畫可能會觸發許多 requestAnimationFrame 呼叫，這可能會妨礙使用者互動。為解決這個問題，請盡可能使用 CSS 動畫，避免排入可能耗費大量資源的動畫影格。不過，如果您這麼做，請務必避免使用未經合成的動畫，讓動畫主要在 GPU 和合成器執行緒上執行，而非在主執行緒上執行。

結論

雖然輸入延遲可能不是互動執行時間的大部分，但請務必瞭解互動過程的每個部分都會耗費一定時間，而您可以縮短這段時間。如果您發現輸入延遲時間過長，可以採取一些措施來縮短延遲時間。避免重複的計時器回呼、分割長時間的作業，以及留意潛在的交互作用重疊，都能有助於減少輸入延遲，讓網站使用者更快地進行互動。

主頁橫幅圖片來自 Unsplash，由 Erik Mclean 提供。