最大限度的減少瀏覽器的重新佈局（Reflow&Repaint）
摘要：
減少瀏覽器重新佈局是優化web效能的一個重要手段。這是因為重新佈局是瀏覽器在請求網路資源後所做的一個必要的工作，這也是瀏覽器渲染web頁面的重要機制（詳情可參考瀏覽器的執行原理）。在瀏覽器獲得新的資源後，它會重新計算文件中個元素的位置和形狀，以便重新整理web頁面（可以是部分內容，也可以是...
減少瀏覽器重新佈局是優化web效能的一個重要手段。這是因為重新佈局是瀏覽器在請求網路資源後所做的一個必要的工作，這也是瀏覽器渲染web頁面的重要機制（詳情可參考瀏覽器的執行原理）。在瀏覽器獲得新的資源後，它會重新計算文件中個元素的位置和形狀，以便重新整理web頁面（可以是部分內容，也可以是全部），這個過程就是重新佈局,有的人把這個過程稱為web頁面的重繪。
但是在重新佈局的過程中，瀏覽器會阻止使用者在瀏覽器中的其它操作，那麼很顯然，瞭解重新佈局對於提升web應用的效能很重要，尤其是它可以顯著的提升使用者的體驗效果。當然除了瞭解重新佈局外，我們還需要了解各種文件屬性對瀏覽器重新佈局的影響因素，如：DOM深度、CSS規則，以及樣式的改變等。
有的時候，對HTML文件中的單個元素進行重新佈局可能會影響到它的父級元素，或者它的兄弟元素，以及它的子元素的重新佈局。
觸發瀏覽器重新佈局的因素
- 使用者操作
- 頁面的初始化載入
- 調整瀏覽器視窗的大小
- HTML文件修改
margin: 0 auto;
那麼，有沒有一個規範可以縮短頁面進行重新佈局的呢？答案是肯定的。
減少瀏覽器重新佈局的規範
- 減少不必要的 DOM 深度。在 DOM 樹中的一個級別進行修改可能會致使該樹的所有級別（上至根節點，下至所修改節點的子級）都隨之變化。這會導致花費更多的時間來執行重排。
- 儘可能減少 CSS 規則的數量，並移除未使用的 CSS 規則。
- 如果你想進行復雜的渲染修改（如：動畫），請在瀏覽器重新佈局流程外執行此操作。你可以使用 position-absolute 或 position-fixed 來實現此目的。
- 避免使用不必要且複雜的 CSS 選擇器，尤其是後代選擇器，因為此類選擇器會消耗更多的 CPU 處理能力來執行選擇器匹配。
具體的開發中要注意的地方可參考下面兩篇文章，它們會告訴你如何書寫css會有效減少瀏覽器重新佈局。
參考資料
ofollow,noindex">前端效能優化：細說瀏覽器渲染的重排與重繪