盡量避免瀏覽器自動重排

作者:使用者體驗開發人員 Lindsey Simon

建議知識:HTML、基本 JavaScript、CSS 操作知識

自動重排是指網路瀏覽器程序名稱,用於重新計算文件中元素的位置和幾何圖形,目的是重新轉譯部分或全部文件中的部分。由於自動重排是瀏覽器中的使用者封鎖作業,因此開發人員可以學習如何改善自動重排時間,以及瞭解各種文件屬性 (DOM 深度、CSS 規則效率、不同類型的樣式變更) 對重排時間的影響。有時,在文件中重排單一元素時,可能需要重排其父項元素,以及後方的所有元素。

有許多不同的使用者動作和可能的 DHTML 變更都可能會觸發重排。調整瀏覽器視窗大小時,使用涉及運算樣式的 JavaScript 方法、在 DOM 中新增或移除元素,以及變更元素類別,是可能觸發重排的其中幾個項目。值得注意的是,部分作業可能會導致重排時間超出您預期的時間 - 請參考以下 Steve Souders 之評為「更快的網站速度」的圖表:

從上表上可以看出,在 JavaScript 中對樣式所做的部分變更,並非所有瀏覽器都會造成重排,且重排所需時間也不盡相同。這個版本也很清楚,新式瀏覽器在重排期間越來越進步。

Google 透過多種方式測試網頁與應用程式的速度,而自動重排是新增功能至使用者介面時考量的關鍵因素。我們致力於提供熱鬧 互動性佳且愉快的使用者體驗

規範

以下提供一些簡單的指南,協助您盡量減少網頁重排:

  1. 減少不必要的 DOM 深度。在 DOM 樹狀結構中,對一個層級的變更可能會導致樹狀結構中的每個層級發生變更,一直到根目錄到根層級,以及後到已修改節點的子項為止。這會花更多時間執行自動重排。
  2. 盡可能減少 CSS 規則,並移除未使用的 CSS 規則。
  3. 如果您進行複雜的轉譯變更 (例如動畫),請退出流程。使用絕對值或固定位置來達成這個目的。
  4. 請避免不必要的複雜 CSS 選取器 (特別是子系選取器),這會需要更多 CPU 效能才能比對選取器。

在這部影片中,Lindsey 介紹了盡量減少頁面自動重排的幾個簡單方法:

其他資源

意見回饋

本頁內容對你是否有幫助?