概念區(qū)別
- 重繪：Repaint 當(dāng) render tree 中的一些元素需要更新屬性匹颤，這些屬性只影響元素的外觀蘸劈、風(fēng)格而不會(huì)影響布局鸥滨，稱之為重繪
- 回流：Reflow 當(dāng) render tree 中的元素需要更新屬性鸥咖，這些屬性影響元素的布局需要重新計(jì)算舍败，稱之為回流
- 回流必定引發(fā)重繪招狸，重繪不一定引發(fā)回流
瀏覽器優(yōu)化
- 瀏覽器通過隊(duì)列機(jī)制批量更新布局：瀏覽器會(huì)維護(hù)1個(gè)隊(duì)列敬拓，把所有會(huì)引起回流、重繪的操作放入這個(gè)隊(duì)列裙戏，等隊(duì)列中的操作到了一定的數(shù)量或者到了一定的時(shí)間間隔乘凸，瀏覽器就會(huì)進(jìn)行一個(gè)批處理。這樣就會(huì)讓多次的回流累榜、重繪變成一次回流重繪营勤。
- 當(dāng)我們獲取布局信息的時(shí)候 offsetTop、scrollTop壹罚、clientWidth葛作、width 等屬性，隊(duì)列中可能有會(huì)影響這些屬性或方法返回值的操作猖凛，即使沒有赂蠢，瀏覽器也會(huì)強(qiáng)制清空隊(duì)列，觸發(fā)回流與重繪來確保返回正確的值辨泳。所以我們要盡量避免使用這些屬性客年。
常見引起重繪與回流的屬性方法
重繪
image.png
回流
- 添加或者刪除可見的DOM元素；
- 元素尺寸改變——邊距漠吻、填充量瓜、邊框、寬度和高度
- 內(nèi)容變化途乃，比如用戶在input框中輸入文字
- 瀏覽器窗口尺寸改變——resize事件發(fā)生時(shí)
- 獲取或 （offsetTop绍傲、offsetLeft、 offsetWidth耍共、offsetHeight烫饼、scrollTop、scrollLeft试读、scrollWidth杠纵、scrollHeight、 clientTop钩骇、clientLeft比藻、clientWidth、clientHeight倘屹、getComputedStyle() (currentStyle in IE) 屬性
- 設(shè)置 style 屬性的值
減少重繪與回流
CSS
- 使用 transform 替代 top银亲，因?yàn)楦淖?transforms 只需要合成計(jì)算，而改變偏移量會(huì)觸發(fā)布局計(jì)算和重繪纽匙，因此會(huì)有損性能务蝠。
- 使用 visibility 替換 display: none ，因?yàn)榍罢咧粫?huì)引起重繪烛缔，后者會(huì)引發(fā)回流馏段，改變了布局
- 盡量避免使用 table 布局轩拨，對(duì) Render Tree 的計(jì)算通常只需要遍歷一次就可以完成，但 table 及其內(nèi)部元素除外院喜，他們可能需要多次計(jì)算亡蓉，通常要花3倍于同等元素的時(shí)間，這也是為什么要避免使用 table 布局的原因之一够坐。
- 避免使用CSS表達(dá)式，可能會(huì)引發(fā)回流崖面。
- 將動(dòng)畫效果應(yīng)用到 position 屬性為 absolute 或 fixed 的元素上元咙，避免影響其他元素的布局，這樣只是一個(gè)重繪巫员，而不是回流庶香，同時(shí)，控制動(dòng)畫速度可以選擇 requestAnimationFrame
- 將頻繁重繪或者回流的節(jié)點(diǎn)設(shè)置為圖層简识，圖層能夠阻止該節(jié)點(diǎn)的渲染行為影響別的節(jié)點(diǎn)赶掖，例如 will-change、video七扰、iframe 等標(biāo)簽奢赂，瀏覽器會(huì)自動(dòng)將該節(jié)點(diǎn)變?yōu)閳D層。
- CSS3 硬件加速（GPU加速）颈走，使用 css3 硬件加速膳灶，可以讓 transform、opacity立由、filters 這些動(dòng)畫不會(huì)引起回流重繪 轧钓。
JS
- 避免頻繁操作樣式，最好一次性重寫 style 屬性锐膜，或者將樣式列表定義為 class 并一次性更改 class 屬性毕箍。
- 避免頻繁操作DOM，創(chuàng)建一個(gè)documentFragment道盏，在它上面應(yīng)用所有DOM操作而柑，最后再把它添加到文檔中。
- 避免頻繁讀取會(huì)引發(fā)回流/重繪的屬性荷逞，如果確實(shí)需要多次使用牺堰，就用一個(gè)變量緩存起來。
- 對(duì)具有復(fù)雜動(dòng)畫的元素使用絕對(duì)定位颅围，使它脫離文檔流伟葫，否則會(huì)引起父元素及后續(xù)元素頻繁回流。
