作者:使用者體驗開發人員 Lindsey Simon
建議知識:HTML、基本 JavaScript、CSS 操作知識
自動重排是指網路瀏覽器程序名稱,用於重新計算文件中元素的位置和幾何圖形,目的是重新轉譯部分或全部文件中的部分。由於自動重排是瀏覽器中的使用者封鎖作業,因此開發人員可以學習如何改善自動重排時間,以及瞭解各種文件屬性 (DOM 深度、CSS 規則效率、不同類型的樣式變更) 對重排時間的影響。有時,在文件中重排單一元素時,可能需要重排其父項元素,以及後方的所有元素。
有許多不同的使用者動作和可能的 DHTML 變更都可能會觸發重排。調整瀏覽器視窗大小時,使用涉及運算樣式的 JavaScript 方法、在 DOM 中新增或移除元素,以及變更元素類別,是可能觸發重排的其中幾個項目。值得注意的是,部分作業可能會導致重排時間超出您預期的時間 - 請參考以下 Steve Souders 之評為「更快的網站速度」的圖表:
![](https://developers-dot-devsite-v2-prod.appspot.com/static/speed/images/reflow-chart.png?authuser=5&hl=zh-tw)
從上表上可以看出,在 JavaScript 中對樣式所做的部分變更,並非所有瀏覽器都會造成重排,且重排所需時間也不盡相同。這個版本也很清楚,新式瀏覽器在重排期間越來越進步。
Google 透過多種方式測試網頁與應用程式的速度,而自動重排是新增功能至使用者介面時考量的關鍵因素。我們致力於提供熱鬧 互動性佳且愉快的使用者體驗
規範
以下提供一些簡單的指南,協助您盡量減少網頁重排:
- 減少不必要的 DOM 深度。在 DOM 樹狀結構中,對一個層級的變更可能會導致樹狀結構中的每個層級發生變更,一直到根目錄到根層級,以及後到已修改節點的子項為止。這會花更多時間執行自動重排。
- 盡可能減少 CSS 規則,並移除未使用的 CSS 規則。
- 如果您進行複雜的轉譯變更 (例如動畫),請退出流程。使用絕對值或固定位置來達成這個目的。
- 請避免不必要的複雜 CSS 選取器 (特別是子系選取器),這會需要更多 CPU 效能才能比對選取器。
在這部影片中,Lindsey 介紹了盡量減少頁面自動重排的幾個簡單方法:
其他資源
- Opera 的重新繪製和回流
- Satoshi Ueyama 的偵錯 Firefox 回流示範:
- 〈Nicole Sullivan on Reflows and Repaints〉
意見回饋
本頁內容對你是否有幫助?