在瀏覽器渲染頁面的過程中爪瓜，頁面中的代碼進行渲染時，已經使瀏覽器不堪重負了匙瘪，如果當用戶使用時铆铆，替換一個背景顏色，或者更換一個樣式丹喻，那么我們的瀏覽器又需要重新加載代碼薄货，而在這個過程中，瀏覽器又一次的受到了壓力碍论，日復一日說不定哪天就崩掉了谅猾。 而主要影響頁面渲染速度的為：reflow和repaint
1.reflow(回流)
為什么頁面加載會慢，因為瀏覽器需要花時間鳍悠、花精力去渲染税娜，尤其是當它發(fā)現(xiàn)某個部分發(fā)生變化時影響到布局，就需要倒回去重新渲染藏研，這個’倒回去渲染的過程‘就叫做reflow(回流)
2.repaint(重繪)
如果變化的元素敬矩，只是更改了元素的背景色，文字顏色蠢挡、邊框顏色等等不影響它周圍或者內部布局的屬性弧岳，那這種行為只會引起repaint(重繪)，所以repaint的速度明顯比reflow快
3.盡量減少reflow
1.reflow是導致DOM腳本執(zhí)行力較低的關鍵因素之一业踏，頁面上任何一個結點觸發(fā)reflow禽炬，都會導致它全部節(jié)點重新渲染。以下情況會導致reflow發(fā)生：
1.改變窗口大小
2.改變文字大小
3.添加/刪除樣式
4.內容的改變堡称，如用戶在輸入框進行輸入文字
5.激活偽類瞎抛，如hover艺演，active等
6.操作class屬性
7.腳本操作DOM
8.計算offsetWidth或者offsetHeight
9.設置style屬性
2.reflow是不可避免的却紧，只能將reflow對性能的影響見到最小：
- 盡可能限制reflow的影響范圍胎撤，需要改變元素的樣式晓殊，不要通過父級元素影響子元素，最好直接加在子元素上伤提。
- 通過設置style屬性改變節(jié)點樣式的話巫俺，每設置一次都會導致一次reflow。所以最好通過設置class的方式進行改變肿男。
3.該如何好的避免reflow
- 實現(xiàn)元素的動畫介汹，將定位position設為fixed或者absolute却嗡，就不會影響其他元素的布局。
- 權衡速度的平滑嘹承，比如實現(xiàn)一個動畫窗价，以1像素為單位移動最平滑，但是reflow會頻繁回流叹卷，我們可以進行節(jié)流設置撼港，動畫移動固定時間進行判斷一次，到達最終點為準骤竹。
- 不要用tables布局的另一個原因就是tables中某個元素一旦觸發(fā)reflow就會導致table里所有的其它元素reflow帝牡。在適合用table的場合，可以設置table-layout為auto或fixed蒙揣，這樣可以讓table一行一行的渲染靶溜，這種做法也是為了限制reflow的影響范圍。
- 減少不必要的 DOM 層級（DOM depth）懒震。改變 DOM 樹中的一級會導致所有層級的改變墨技，上至根部，下至被改變節(jié)點的子節(jié)點挎狸。這導致大量時間耗費在執(zhí)行 reflow 上面扣汪。
- 減少不必要的 DOM 層級（DOM depth）。改變 DOM 樹中的一級會導致所有層級的改變锨匆，上至根部崭别，下至被改變節(jié)點的子節(jié)點。這導致大量時間耗費在執(zhí)行 reflow 上面恐锣。
