重繪和回流？

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

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

1、頁面首次渲染

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

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

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

5、元素字體大小變化

6、添加或者刪除可見的DOM元素

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

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

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

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

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

如何避免重繪和回流？

css：

避免使用table布局，可能很小的一個小改動會造成整個table的重新布局

盡可能在DOM樹的最末端改變class。

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

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

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

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

使用transform替代top

使用visibility替換display: none，因為前者只會引起重繪，后者會引發(fā)回流（改變了布局）

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

js：

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

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

也可以先為元素設(shè)置display: none，操作結(jié)束后再把它顯示出來。因為在display屬性為none的元素上進行的DOM操作不會引發(fā)回流和重繪。

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

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