盡量避免瀏覽器自動重排

作者：使用者體驗開發人員 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 介紹了盡量減少頁面自動重排的幾個簡單方法：

其他資源

意見回饋

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