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