長時間工作是指 JavaScript 程式碼會長時間獨佔主執行緒，導致 UI 出現「凍結」的情形。
在網頁載入期間，長時間工作可能會綁定主執行緒，導致網頁無法回應使用者輸入內容，即使網頁看起來已就緒也一樣。點擊和輕觸通常無法運作，因為互動式功能 (例如事件監聽器和點擊處理常式) 尚未附加至 UI 元素。因此，長時間工作可能會大幅增加互動準備時間。
Chrome 開發人員工具現在可以將長時間工作階段以圖形化方式呈現，方便您查看需要最佳化的任務。
什麼情況會計為長時間執行的工作？
耗用大量 CPU 的長時間工作會導致複雜工作耗時超過 50 毫秒。RAIL 模型建議您在 50 毫秒內處理使用者輸入事件，確保在 100 毫秒內顯示回應，並維持動作和反應之間的連結。
重點：雖然 RAIL 模型建議在 100 毫秒內對使用者輸入內容提供視覺回應，但與下一個顯示的內容互動 (INP) 指標的門檻可達 200 毫秒，可設定更切合實際的期望值，特別適用於速度較慢的裝置。
網頁中是否有可能延遲互動性的長時間工作？
在此之前，您必須在 Chrome 開發人員工具 中手動尋找超過 50 毫秒的「長黃色區塊」，或是使用 Long Tasks API 來找出延遲互動性的任務。
為簡化您的效能稽核工作流程，DevTools 現在會將長時間工作列出圖形。如果工作為長時間工作，系統會在工作 (以灰色顯示) 上加上紅色標記。
如何使用新的視覺化工具：
- 在「Performance」面板中記錄載入網頁的追蹤記錄。
- 請在主執行緒檢視畫面中尋找紅色旗標。您現在應該會看到工作以灰色標示，並標示為「工作」。
- 將游標懸停在灰色列上。您會看到對話方塊，其中顯示工作時間長度，以及是否視為長時間工作。
造成長時間工作項目的原因為何？
如要找出工作耗時過長的原因，請選取灰色的「Task」列。在下方抽屜中，選取「自下而上」和「依活動分組」。這樣一來，您就能瞭解哪些活動 (總計) 對工作耗時過長的情況影響最大。在以下範例中，延遲的原因似乎是耗費大量資源的 DOM 查詢集。
有哪些常見方法可用於改善長時間工作？
大型指令碼通常是造成長時間工作的主要原因。建議您分開處理。請留意第三方指令碼，因為其中也可能包含會延遲主要內容互動性質的長時間工作。
將所有工作分割成可在 50 毫秒內執行的區塊，並在適當的位置和時間執行這些區塊。其中部分內容的適當位置可能位於服務工作者中，而非主要執行緒。如需分割長時間工作任務的指引，請參閱「Optimize Long Tasks」和 Phil Walton 的「Idle Until Urgent」。
確保網頁能即時回應。減少長時間的作業是確保使用者在造訪網站時獲得愉快體驗的絕佳方法。如要進一步瞭解長時間工作，請參閱「以使用者為中心的效能指標」。