瀏覽器渲染過程：
在頁面加載時，瀏覽器把獲取到的HTML代碼解析成1個DOM樹，DOM樹裏包含了所有HTML標籤，包括display:none隱藏，還有用JS動態添加的元素等。
瀏覽器把所有樣式(用戶定義的CSS和用戶代理)解析成樣式結構體
DOM Tree 和樣式結構體組合後構建render tree（渲染樹）,然後根據渲染樹進行佈局，最後調用GPU進行繪製，顯示在屏幕上。
render tree類似於DOM tree，但區別很大，因爲render tree能識別樣式，render tree中每個NODE都有自己的style，而且render tree不包含隱藏的節點(比如display:none的節點，還有head節點)，因爲這些節點不會用於呈現，而且不會影響呈現的，所以就不會包含到 render tree中。我自己簡單的理解就是DOM Tree和我們寫的CSS結合在一起之後，渲染出了render tree。
如何加快首屏展示速度
- 從上一張圖中，我們就能看到，HTML和CSS的解析、加載都會阻塞渲染樹的生成，從而影響最後展示首屏的速度，因此我們可以通過優化文件大小，減少CSS層級來優化二者的解析和加載，從而加快首屏展示速度。
- 瀏覽器解析到<script>標籤時，會阻塞文檔的解析，直到腳本執行完成，因此我們通常把script標籤放在文檔底部，或者加上defer、async屬性來進行異步加載
什麼是迴流，什麼情況下會觸發迴流（重排）
- 當元素的尺寸或位置發生了變化，就需要重新計算render tree，這就是迴流
- 當DOM元素的幾何屬性（width / height / padding / margin /border）發生變化就會觸發迴流
- DOM元素移動或增加會觸發迴流
- 讀寫offset / scroll / client等屬性會觸發迴流
- 調用window.getComputedStyle會觸發迴流
什麼時重繪，什麼情況下會觸發重繪
- 當DOM樣式發生了變化，但沒有影響DOM幾何屬性時，會觸發重繪，而不會觸發迴流。重繪由於DOM位置信息不需要更新，省去了佈局的過程，因而性能上優於迴流
什麼是GPU加速，如何使用GPU加速，GPU加速的缺點
- 使用transform、opacity、filters等屬性時，會直接在GPU中完成處理，這些屬性的變化不會引起迴流和重繪
- 缺點：GPU渲染會導致字體模糊，過多的GPU處理會導致內存問題
如何減少迴流和重繪
-
使用class代替style，減少style的使用
-
使用resize、scroll時進行防抖和節流處理，這兩者會直接導致迴流
-
使用visibility替換display:none，因爲前者只會引起重繪，後者會引發迴流
-
批量修改元素時，可以先讓元素脫離文檔流，等修改完畢後，再放入文檔流
-
避免觸發同步佈局事件，我們在獲取offsetWidth這類的屬性時，可以使用變量將查詢結果存起來，避免多次查詢，每次對offset / scroll /client等屬性進行操作時都會觸發迴流
-
對於複雜動畫效果，使用絕對定位讓其脫離文檔流，複雜動畫效果會頻繁的觸發迴流和重繪，我們可以將動畫元素設置絕對定位從而脫離文檔流避免反覆迴流重繪。
