長時間工作是指會長時間套用主執行緒的 JavaScript 程式碼,造成 UI 「凍結」。
在網頁載入時,長時間工作會連結主執行緒,讓頁面沒有回應使用者輸入內容,即使網頁運作正常也無妨。由於事件監聽器和點擊處理常式等互動功能尚未附加至 UI 元素,因此點擊和輕觸功能通常無法運作。因此,長時間工作可能會大幅增加互動時間。
Chrome 開發人員工具現在可以以視覺化方式呈現長工作,讓您更輕鬆地查看需要最佳化的工作。
什麼情況算是長時間工作?
需要超過 50 毫秒的複雜工作,會導致需要大量 CPU 的長時間工作。RAIL 模型建議在 50 毫秒內處理使用者輸入事件,以確保在 100 毫秒內才顯示可見的回應,並維持動作和回應之間的關聯。
重點:雖然 RAIL 模型建議在 100 毫秒內針對使用者輸入內容提供視覺回應,但「Interaction to Next Paint (INP)」指標門檻最多允許 200 毫秒,以便設定更高的期望值 (尤其是對速度較慢的裝置)。
我的網頁中是否出現會延遲互動時間的長篇任務?
目前,您必須在 Chrome 開發人員工具中手動找出超過 50 毫秒的「長黃色區塊」,或使用 Long Tasks API 找出哪些工作會延遲互動。
為了協助簡化效能稽核工作流程,開發人員工具現在能以視覺化方式呈現長時間工作。如果工作屬於「長工作」,則會有紅色旗標 (以灰色顯示)。
如要使用新的視覺化工具:
- 在載入網頁的「效能」面板中錄製追蹤記錄。
- 請查看主執行緒檢視畫面中是否有紅色旗標。您應該會看到工作以灰色標示,並加上「Task」標籤。
- 將遊標懸停在灰色長條上。您會看到顯示任務時間長度的對話方塊,以及該工作是否屬於長時間工作。
我的長時間工作會造成什麼影響?
如要找出長時間工作的原因,請選取灰色的「Task」列。在下方的導覽匣中,選取「Bottom-Up」和「Group by Activity」。透過這項工具,您可以瞭解哪些活動對工作費時最長 (所費時間) 最長 (總計)。在以下範例中,延遲原因似乎是一組耗費資源的 DOM 查詢。
哪些常用方式能將「長時間工作」最佳化?
大型指令碼通常是造成長時間工作的主要原因。不妨將資源分散。此外,請留意第三方指令碼,其中可能包含會延遲主要內容變成互動式的「長工作」。
將所有工作分段為執行時間不超過 50 毫秒的區塊,並在正確的位置和時間執行這些區塊。某些項目的正確位置可能不在服務工作站的主執行緒中。如需分解長時間工作的相關指引,請參閱「將長時間工作最佳化」和 Phil Walton 的「閒置直到緊急為止」一文。
確保網頁處於快速回應狀態。盡量減少長時間工作,是確保使用者造訪您的網站時享有愉快體驗的好方法。如要進一步瞭解長時間工作,請參閱以使用者為中心的效能指標。