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