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

瞭解如何診斷費用高昂的工作，以及阻止使用者互動的工作。

Addy Osmani

長時間「工作」會導致主執行緒保持忙碌狀態，延遲使用者互動。Chrome 開發人員工具現在能以視覺化方式呈現長時間工作，讓您更輕鬆地查看最佳化工作。

如果您使用 Lighthouse 稽核網頁，應該已熟悉互動時間。這項指標代表使用者何時能與頁面互動並獲得回應。但您知道長 (JavaScript) 工作會嚴重影響 TTI 的品質不佳嗎？

什麼是長時間工作？

「長時間工作」是指將主執行緒長時間執行背景作業的 JavaScript 程式碼，導致 UI「凍結」。

在網頁載入時，「長時間工作」可以連結主執行緒，讓網頁沒有回應使用者輸入的內容，即使網頁沒有回應也無回應。點擊和輕觸通常無效，因為尚未附加事件監聽器、點擊處理常式等。

工作處理時間超過 50 毫秒，因此需要大量 CPU 資源。為什麼是 50 毫秒？RAIL 模型會在 50 毫秒內處理使用者輸入事件，以確保 100 毫秒內獲得可見的回應。否則動作和回應之間的連結將會中斷。

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

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

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

• 在載入網頁的「效能」面板錄製追蹤記錄。
• 請查看主執行緒檢視畫面中是否有紅色旗標。畫面上應該會顯示工作 (「工作」)。
• 將滑鼠懸停在長條上，即可查看工作持續時間，以及工作是否為「長」。

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

如要查看造成長時間工作的原因，請選取灰色的「工作」列。在下方的導覽匣中，選取「Bottom-Up」和「Group by Activity」。這樣一來，您就能瞭解哪些活動花費最多且耗時才能完成的工作。下方範例似乎是一組昂貴的 DOM 查詢。

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

大型指令碼通常是導致工作時間過長的主因，因此建議您將指令碼分割。此外，請留意第三方指令碼；這類指令碼可能導致主要內容無法互動。

請將所有工作拆成數個小型區塊 (在 50 毫秒內執行)，並在適當的位置和時間執行這些區塊；即使是在工作站中，最佳位置也可能不在主執行緒內。Phil Walton 撰寫的《Idle Until Orgent》也很適合探討這個主題。另請參閱最佳化長時間工作一文，瞭解管理和解析長時間工作的一般策略。

確保網頁處於快速回應狀態。想要確保使用者造訪您的網站時，可以獲得愉快的體驗，請盡量減少使用 Long Tasks。若要進一步瞭解長時間工作，請參閱以使用者為中心的成效指標。