前言：瞭解並理解瀏覽器的渲染原理流程，對我們的性能優化有着至關重要的作用。
至於渲染引擎，我們大可忽略，知道這個概念就行。
流程如下：
1、下載html文本文件，生成dom樹。
2、下載css文件，解析CSS生成CSSOM規則樹。
3、將DOM樹與CSSOM規則樹合併在一起生成渲染樹。
4、遍歷渲染樹開始佈局，計算每個節點的位置大小信息。
5、將渲染樹每個節點 逐個 繪製到屏幕。
注意點：
dom樹生成過程中需注意：
1、下載html文檔同時可能會並行下載css文件，js文件。
2、DOM樹的生成過程中可能會被CSS和JS的加載執行阻塞。
3、當瀏覽器遇到一個 script 標記時，DOM 構建將暫停，直至腳本完成執行，然後繼續構建DOM。
4、如果JavaScript腳本還操作了CSSOM，而正好這個CSSOM還沒有下載和構建，瀏覽器甚至會延遲腳本執行和構建DOM，直至完成其CSSOM的下載和構建。
所以建議大家：
1、CSS 優先、JS置後，且JavaScript 應儘量少影響 DOM 的構建。
CSSOM規則樹生成過程中注意：
1、就近原則，優先使用class或id選擇器，少用後代選擇器，解析是需要代價的。
2、提高樣式的複用性。
構建渲染樹需注意：
通過DOM樹和CSS規則樹我們便可以構建渲染樹。瀏覽器會先從DOM樹的根節點開始遍歷每個可見節點。對每個可見節點，找到其適配的CSS樣式規則並應用。
後續js操作或者其他引起的重排和重繪：
重繪（replaint）：屏幕的一部分重畫，不影響整體佈局，比如某個CSS的背景色變了，但元素的幾何尺寸和位置不變。
重排（reflow）：意味着元件的幾何尺寸變了，我們需要重新驗證並計算渲染樹。是渲染樹的一部分或全部發生了變化。這就是Reflow，或是Layout。