理解瀏覽器重繪和回流
大家好，我是前端西瓜哥。今天帶大家理解瀏覽器的重繪和回流。
瀏覽器渲染過程
我們先簡單了解一些瀏覽器是怎么渲染頁面的。
進入頁面時會請求一個 HTML，HTML 會被解析為 DOM（文檔對象模型） 樹，其根節(jié)點為 documentElement，也就是 <html>。
然后請求 CSS （層疊樣式表）文件。
CSS 來源很豐富，有瀏覽器自己的兜底樣式（User-Agent stylesheets）、通過 link 或 @import 導(dǎo)入的各種外部樣式、style 寫的內(nèi)嵌樣式、以及在標(biāo)簽上基于 style 屬性的內(nèi)聯(lián)樣式。
加載完后就會解析它們，會根據(jù)繼承規(guī)則、層疊規(guī)則合并成一個 CSSOM 樹，該樹表示特定選擇器嵌套下的最終樣式。
最后將 DOM 和 CSSOM 組合，生成渲染樹（render）。
渲染樹會將不可見標(biāo)簽丟棄掉，比如像 <head> 僅承載信息不表示結(jié)構(gòu)的標(biāo)簽，或是設(shè)置了 display: none 的元素。這里的每個節(jié)點都是一個盒子（box），應(yīng)用盒子模型，有它們各自的 width、padding、margin 等元素。
渲染樹生成后，先是會計算 “布局”，然后分層，最后進行柵格化（渲染）。
重繪（repaint）
重繪，就是重新繪制。發(fā)生了不改變元素物理信息的情況下只會進行重繪。比如將元素的背景色修改了，就要將元素的盒子做一個重新渲染。
重繪不會改變頁面的布局，只是對局部區(qū)域重新渲染，一般來說不會導(dǎo)致嚴重的性能問題。
重排（reflow）
重排，就是重新排布。
當(dāng)元素的物理信息發(fā)生變化時，其后的元素就會改變位置，此時就要重新進行布局，計算元素的物理信息。
比如修改元素的高度，將元素設(shè)置為 display: none; 等操作會導(dǎo)致重排。
下面是維基百科的頁面重排的可視化展示：
如何避免重繪重排
- 減少 DOM 操作。像是 Vue 和 React 通過虛擬 DOM 找出不同，以減少更新 DOM 的操作；
- 盡量將要添加的元素都生成好，再一次性添加到文檔流中，而不是一個個加上去；
- 緩存好要用的布局信息。對于同時調(diào)用多次修改 DOM 的 API 操作，瀏覽器是有優(yōu)化的，會將這些操作緩存起來，然后一次性更新。但如果在這過程中訪問了布局相關(guān)信息（比如 scrollHeight、getBoundingClientRect）時，就會強制進行重渲染去獲取最新布局數(shù)據(jù)；
- 將經(jīng)常變化的元素放到新的層。通過 transform 或絕對定位產(chǎn)生新的渲染層，防止影響文檔流；
結(jié)尾
平時我們應(yīng)該盡量避免頻繁一次性修改大量 DOM。好在我們平常使用類似 Vue 和 React 的框架，能夠通過對比新舊虛擬 DOM 減少對真實 DOM 的操作，將 GPU 密集轉(zhuǎn)移到了 CPU 密集，也算各有利弊吧。
