重繪和回流？
當(dāng)Render Tree中部分或全部元素的尺寸索抓、結(jié)構(gòu)、或某些屬性發(fā)生改變時(shí)耸黑，瀏覽器重新渲染部分或全部文檔的過程稱為回流篮幢。
導(dǎo)致回流的操作：
1、頁面首次渲染
2三椿、瀏覽器窗口大小發(fā)生改變
3、元素尺寸或位置發(fā)生改變
4搜锰、元素內(nèi)容變化（文字?jǐn)?shù)量或圖片大小改變而引起的計(jì)算值寬度和高度改變）
5、元素字體大小變化
6焊傅、添加或者刪除可見的DOM元素
7、激活CSS偽類（例如：:hover）
8、查詢某些屬性或調(diào)用某些方法
9鹏倘、offsetWidth,width,clientWidth,scrollTop/scrollHeight的計(jì)算， 會(huì)使瀏覽器將漸進(jìn)回流隊(duì)列Flush骆姐，立即執(zhí)行回流捏题。
當(dāng)頁面中元素樣式的改變并不影響它在文檔流中的位置時(shí)（例如：color、background-color公荧、visibility等），瀏覽器會(huì)將新樣式賦予給元素并重新繪制它循狰，這個(gè)過程稱為重繪券勺。
回流必定會(huì)發(fā)生重繪灿里，重繪不一定會(huì)引發(fā)回流。
如何避免重繪和回流匣吊？
css：
避免使用table布局，可能很小的一個(gè)小改動(dòng)會(huì)造成整個(gè)table的重新布局
盡可能在DOM樹的最末端改變class社痛。
避免設(shè)置多層內(nèi)聯(lián)樣式缕碎。
將動(dòng)畫效果應(yīng)用到position屬性為absolute或fixed的元素上。
動(dòng)畫實(shí)現(xiàn)的速度的選擇咏雌，動(dòng)畫速度越快，回流次數(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：
避免頻繁操作樣式，最好一次性重寫style屬性弦追，或者將樣式列表定義為class并一次性更改class屬性。
避免頻繁操作DOM劲件，創(chuàng)建一個(gè)documentFragment，在它上面應(yīng)用所有DOM操作苗分，最后再把它添加到文檔中牵辣。
也可以先為元素設(shè)置display: none摔癣，操作結(jié)束后再把它顯示出來。因?yàn)樵赿isplay屬性為none的元素上進(jìn)行的DOM操作不會(huì)引發(fā)回流和重繪拐云。
避免頻繁讀取會(huì)引發(fā)回流/重繪的屬性近她，如果確實(shí)需要多次使用，就用一個(gè)變量緩存起來粘捎。
對(duì)具有復(fù)雜動(dòng)畫的元素使用絕對(duì)定位，使它脫離文檔流攒磨，否則會(huì)引起父元素及后續(xù)元素頻繁回流。
