浏覽器渲染原理
浏覽器渲染分為五個階段。
graph LR
HTML解析 --> CSS解析
CSS解析 --> 樣式與結構合并
樣式與結構合并 -->頁面布局
頁面布局 --> 頁面繪制
第一階段：HTML解析 --> DOM樹
浏覽器不能夠直接了解 HTML文檔，首先對其進行解析，并在解析過程中發出頁面渲染所需的各種外部資源請求生成DOM樹。
第二階段： CSS解析 --> CSSOM樹
同樣浏覽器也辦法直接了解 CSS 代碼，需要将識别并加載的CSS 代碼處理成自己了解的 CSSOM 樹。
第三階段： 樣式與結構合并 --> 渲染樹
浏覽器将DOM 樹和 CSSOM 樹結合在一起生成渲染樹（:after :before 等僞元素會在這個環節被建構到 DOM 樹中）。
渲染樹特點：隻包含渲染網頁所需的節點。
建構渲染樹的過程
- 第一步：從 DOM 樹的根節點開始周遊，篩選出所有可見的節點；
- 第二步：對可見節點為其比對 CSSOM樹；
第四階段： 頁面布局 --> 布局渲染樹
浏覽器對渲染樹進行周遊，将元素間嵌套關系以盒子模型的形式寫入文檔流盒模型，并在布局過程中會計算出元素确切的大小和定位。計算完畢後，将相應的資訊寫回渲染樹上形成“布局渲染樹”。
第五階段： 頁面繪制 --> 顯示頁面
在這一階段浏覽器終于拿到了繪制頁面的所有資訊，将渲染樹上的每一個節點轉換成肉眼可見的像素點，最終将頁面呈現在我們面前。
重排
當我們修改DOM節點的寬、高或進行隐藏操作時，浏覽器就需要重新計算節點的幾何屬性，然後再将計算的結果繪制出來的過程叫做重排（也叫回流）。
浏覽器重排過程
觸發重排的條件
- 改變 DOM 樹的結構：節點的增減、移動等
- 擷取一些需要通過"即時計算"得到值的屬性：offsetWidth、offsetHeight、offsetTop、offsetLeft、 scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 等屬性以及調用 getComputedStyle 方法，或者 IE 的 currentStyle 方法。
重繪
當我們修改DOM的樣式（未影響其幾何屬性）時，浏覽器需要重新為元素繪制新的樣式過程叫做重繪。
浏覽器重繪過程
觸發重繪的條件
修改DOM的樣式，但未影響其幾何屬性會發生重繪。