在瀏覽器渲染頁面的過程中，頁面中的代碼進行渲染時，已經使瀏覽器不堪重負了，如果當用戶使用時，替換一個背景顏色，或者更換一個樣式，那么我們的瀏覽器又需要重新加載代碼，而在這個過程中，瀏覽器又一次的受到了壓力，日復一日說不定哪天就崩掉了。 而主要影響頁面渲染速度的為：reflow和repaint
1.reflow(回流)
為什么頁面加載會慢，因為瀏覽器需要花時間、花精力去渲染，尤其是當它發現某個部分發生變化時影響到布局，就需要倒回去重新渲染，這個’倒回去渲染的過程‘就叫做reflow(回流)
2.repaint(重繪)
如果變化的元素，只是更改了元素的背景色，文字顏色、邊框顏色等等不影響它周圍或者內部布局的屬性，那這種行為只會引起repaint(重繪)，所以repaint的速度明顯比reflow快
3.盡量減少reflow
1.reflow是導致DOM腳本執行力較低的關鍵因素之一，頁面上任何一個結點觸發reflow，都會導致它全部節點重新渲染。以下情況會導致reflow發生：
1.改變窗口大小
2.改變文字大小
3.添加/刪除樣式
4.內容的改變，如用戶在輸入框進行輸入文字
5.激活偽類，如hover，active等
6.操作class屬性
7.腳本操作DOM
8.計算offsetWidth或者offsetHeight
9.設置style屬性
2.reflow是不可避免的，只能將reflow對性能的影響見到最小：
- 盡可能限制reflow的影響范圍，需要改變元素的樣式，不要通過父級元素影響子元素，最好直接加在子元素上。
- 通過設置style屬性改變節點樣式的話，每設置一次都會導致一次reflow。所以最好通過設置class的方式進行改變。
3.該如何好的避免reflow
- 實現元素的動畫，將定位position設為fixed或者absolute，就不會影響其他元素的布局。
- 權衡速度的平滑，比如實現一個動畫，以1像素為單位移動最平滑，但是reflow會頻繁回流，我們可以進行節流設置，動畫移動固定時間進行判斷一次，到達最終點為準。
- 不要用tables布局的另一個原因就是tables中某個元素一旦觸發reflow就會導致table里所有的其它元素reflow。在適合用table的場合，可以設置table-layout為auto或fixed，這樣可以讓table一行一行的渲染，這種做法也是為了限制reflow的影響范圍。
- 減少不必要的 DOM 層級（DOM depth）。改變 DOM 樹中的一級會導致所有層級的改變，上至根部，下至被改變節點的子節點。這導致大量時間耗費在執行 reflow 上面。
- 減少不必要的 DOM 層級（DOM depth）。改變 DOM 樹中的一級會導致所有層級的改變，上至根部，下至被改變節點的子節點。這導致大量時間耗費在執行 reflow 上面。
