長時間工作是指會長時間套用主執行緒的 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 的「閒置直到緊急為止」一文。
確保網頁處於快速回應狀態。盡量減少長時間工作，是確保使用者造訪您的網站時享有愉快體驗的好方法。如要進一步瞭解長時間工作，請參閱以使用者為中心的效能指標。