瞭解如何診斷費用高昂的工作,以及阻止使用者互動的工作。
長時間「工作」會導致主執行緒保持忙碌狀態,延遲使用者互動。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。若要進一步瞭解長時間工作,請參閱以使用者為中心的成效指標。