重繪和回流？

當(dāng)Render Tree中部分或全部元素的尺寸、結(jié)構(gòu)、或某些屬性發(fā)生改變時(shí)，瀏覽器重新渲染部分或全部文檔的過(guò)程稱為回流。

導(dǎo)致回流的操作：

1、頁(yè)面首次渲染

2、瀏覽器窗口大小發(fā)生改變

3、元素尺寸或位置發(fā)生改變

4、元素內(nèi)容變化（文字?jǐn)?shù)量或圖片大小改變而引起的計(jì)算值寬度和高度改變）

5、元素字體大小變化

6、添加或者刪除可見(jiàn)的DOM元素

7、激活CSS偽類（例如：:hover）

8、查詢某些屬性或調(diào)用某些方法

9、offsetWidth,width,clientWidth,scrollTop/scrollHeight的計(jì)算， 會(huì)使瀏覽器將漸進(jìn)回流隊(duì)列Flush，立即執(zhí)行回流。

當(dāng)頁(yè)面中元素樣式的改變并不影響它在文檔流中的位置時(shí)（例如：color、background-color、visibility等），瀏覽器會(huì)將新樣式賦予給元素并重新繪制它，這個(gè)過(guò)程稱為重繪。

回流必定會(huì)發(fā)生重繪，重繪不一定會(huì)引發(fā)回流。

如何避免重繪和回流？

css：

避免使用table布局，可能很小的一個(gè)小改動(dòng)會(huì)造成整個(gè)table的重新布局

盡可能在DOM樹(shù)的最末端改變class。

避免設(shè)置多層內(nèi)聯(lián)樣式。

將動(dòng)畫(huà)效果應(yīng)用到position屬性為absolute或fixed的元素上。

動(dòng)畫(huà)實(shí)現(xiàn)的速度的選擇，動(dòng)畫(huà)速度越快，回流次數(shù)越多，也可以選擇使用requestAnimationFrame

避免使用CSS表達(dá)式（例如：calc()）

使用transform替代top

使用visibility替換display: none，因?yàn)榍罢咧粫?huì)引起重繪，后者會(huì)引發(fā)回流（改變了布局）

將頻繁重繪或者回流的節(jié)點(diǎn)設(shè)置為圖層，圖層能夠阻止該節(jié)點(diǎn)的渲染行為影響別的節(jié)點(diǎn)

js：

避免頻繁操作樣式，最好一次性重寫(xiě)style屬性，或者將樣式列表定義為class并一次性更改class屬性。

避免頻繁操作DOM，創(chuàng)建一個(gè)documentFragment，在它上面應(yīng)用所有DOM操作，最后再把它添加到文檔中。

也可以先為元素設(shè)置display: none，操作結(jié)束后再把它顯示出來(lái)。因?yàn)樵赿isplay屬性為none的元素上進(jìn)行的DOM操作不會(huì)引發(fā)回流和重繪。

避免頻繁讀取會(huì)引發(fā)回流/重繪的屬性，如果確實(shí)需要多次使用，就用一個(gè)變量緩存起來(lái)。

對(duì)具有復(fù)雜動(dòng)畫(huà)的元素使用絕對(duì)定位，使它脫離文檔流，否則會(huì)引起父元素及后續(xù)元素頻繁回流。