最大限度的減小瀏覽器的從新佈局（Reflow&Repaint）

減小瀏覽器從新佈局是優化web性能的一個重要手段。這是由於從新佈局是瀏覽器在請求網絡資源後所作的一個必要的工做，這也是瀏覽器渲染web頁面的重要機制（詳情可參考瀏覽器的運行原理）。在瀏覽器得到新的資源後，它會從新計算文檔中個元素的位置和形狀，以便刷新web頁面（能夠是部份內容，也能夠是所有），這個過程就是從新佈局,有的人把這個過程稱爲web頁面的重繪。

可是在從新佈局的過程當中，瀏覽器會阻止用戶在瀏覽器中的其它操做，那麼很顯然，瞭解從新佈局對於提高web應用的性能很重要，尤爲是它能夠顯著的提高用戶的體驗效果。固然除了瞭解從新佈局外，咱們還須要瞭解各類文檔屬性對瀏覽器從新佈局的影響因素，如：DOM深度、CSS規則，以及樣式的改變等。

有的時候，對HTML文檔中的單個元素進行從新佈局可能會影響到它的父級元素，或者它的兄弟元素，以及它的子元素的從新佈局。

觸發瀏覽器從新佈局的因素

1. 用戶操做

• 頁面的初始化加載
• 調整瀏覽器窗口的大小

1. HTML文檔修改

• 使用js修改樣式而引發的計算，如：margin: 0 auto;
• 在DOM中添加或移除元素
• 修改某個元素的類（class & id）

那麼，有沒有一個規範能夠縮短頁面進行從新佈局的呢？答案是確定的。

減小瀏覽器從新佈局的規範

1. 減小沒必要要的 DOM 深度。在 DOM 樹中的一個級別進行修改可能會導致該樹的全部級別（上至根節點，下至所修改節點的子級）都隨之變化。這會致使花費更多的時間來執行重排。
2. 儘量減小 CSS 規則的數量，並移除未使用的 CSS 規則。
3. 若是你想進行復雜的渲染修改（如：動畫），請在瀏覽器從新佈局流程外執行此操做。你能夠使用 position-absolute 或 position-fixed 來實現此目的。
4. 避免使用沒必要要且複雜的 CSS 選擇器，尤爲是後代選擇器，由於此類選擇器會消耗更多的 CPU 處理能力來執行選擇器匹配。

具體的開發中要注意的地方可參考下面兩篇文章，它們會告訴你如何書寫css會有效減小瀏覽器從新佈局。

參考資料

前端性能優化：細說瀏覽器渲染的重排與重繪

迴流 & 重繪：CSS性能讓你的JAVASCRIPT慢了嗎？