長時間的 JavaScript 工作是否拖慢了互動準備時間?

Addy Osmani
Addy Osmani

長時間工作是指會長時間套用主執行緒的 JavaScript 程式碼,造成 UI 「凍結」。

在網頁載入時,長時間工作會連結主執行緒,讓頁面沒有回應使用者輸入內容,即使網頁運作正常也無妨。由於事件監聽器和點擊處理常式等互動功能尚未附加至 UI 元素,因此點擊和輕觸功能通常無法運作。因此,長時間工作可能會大幅增加互動時間

Lighthouse 報告中顯示互動時間
Lighthouse 報告顯示 TTI 不佳。

Chrome 開發人員工具現在可以以視覺化方式呈現長工作,讓您更輕鬆地查看需要最佳化的工作。

什麼情況算是長時間工作?

需要超過 50 毫秒的複雜工作,會導致需要大量 CPU 的長時間工作。RAIL 模型建議在 50 毫秒內處理使用者輸入事件,以確保在 100 毫秒內才顯示可見的回應,並維持動作和回應之間的關聯。

重點:雖然 RAIL 模型建議在 100 毫秒內針對使用者輸入內容提供視覺回應,但「Interaction to Next Paint (INP)」指標門檻最多允許 200 毫秒,以便設定更高的期望值 (尤其是對速度較慢的裝置)。

我的網頁中是否出現會延遲互動時間的長篇任務?

目前,您必須在 Chrome 開發人員工具中手動找出超過 50 毫秒的「長黃色區塊」,或使用 Long Tasks API 找出哪些工作會延遲互動。

開發人員工具「效能」面板螢幕截圖,顯示短期工作和長時間工作之間的差異
黃色長條代表工作長度。

為了協助簡化效能稽核工作流程,開發人員工具現在能以視覺化方式呈現長時間工作。如果工作屬於「長工作」,則會有紅色旗標 (以灰色顯示)。

開發人員工具會在「效能」面板中以灰色長條顯示「長工作」,並在長時間工作中顯示紅色旗標

如要使用新的視覺化工具:

  1. 在載入網頁的「效能」面板中錄製追蹤記錄。
  2. 請查看主執行緒檢視畫面中是否有紅色旗標。您應該會看到工作以灰色標示,並加上「Task」標籤。
  3. 將遊標懸停在灰色長條上。您會看到顯示任務時間長度的對話方塊,以及該工作是否屬於長時間工作。

我的長時間工作會造成什麼影響?

如要找出長時間工作的原因,請選取灰色的「Task」列。在下方的導覽匣中,選取「Bottom-Up」和「Group by Activity」。透過這項工具,您可以瞭解哪些活動對工作費時最長 (所費時間) 最長 (總計)。在以下範例中,延遲原因似乎是一組耗費資源的 DOM 查詢。

在開發人員工具中選取較長的工作後,系統就會顯示相關活動。
開發人員工具會在這個選單中顯示長時間工作的原因。

哪些常用方式能將「長時間工作」最佳化?

大型指令碼通常是造成長時間工作的主要原因。不妨將資源分散。此外,請留意第三方指令碼,其中可能包含會延遲主要內容變成互動式的「長工作」。

將所有工作分段為執行時間不超過 50 毫秒的區塊,並在正確的位置和時間執行這些區塊。某些項目的正確位置可能不在服務工作站的主執行緒中。如需分解長時間工作的相關指引,請參閱「將長時間工作最佳化」和 Phil Walton 的「閒置直到緊急為止」一文。

確保網頁處於快速回應狀態。盡量減少長時間工作,是確保使用者造訪您的網站時享有愉快體驗的好方法。如要進一步瞭解長時間工作,請參閱以使用者為中心的效能指標