一、渲染過程
1.解析HTML文檔，構建DOM tree;
2.解析CSS文件，構建CSSOM tree;
3.合并DOM tree和CSSOM tree，生成render tree；
4.開始布局，計算每個節點的位置信息；
5.將render tree每個節點繪制顯示出來。
二、具體流程
1、解析HTML生成DOM tree
在瀏覽器接收到服務器響應來的HTML文檔之后，會遍歷文檔節點，生成DOM tree。但是DOM tree的生成過程中可能會被CSS和JS的加載執行阻塞。
2、解析CSS生成CSSOM tree
瀏覽器解析CSS文件生成CSSOM tree，每個CSS文件都被分析成StyleSheet對象，每個對象都包含CSS規則，CSS規則包括選擇器、一條或多條聲明。
3、將DOM tree和CSSOM tree合并在一起生成render tree
通過DOM tree和CSSOM tree可以合成render tree。瀏覽器會先從DOM tree的根節點開始遍歷每一個可見節點，然后找到與每一個可見節點適配的樣式并進行應用。
對于不可見的元素，它們是不會出現在render tree上的，但是visibility為hidden的元素會出現這顆樹上。
4、遍歷render tree開始布局，計算每個節點的位置大小信息
布局階段會從render tree的根節點開始遍歷，然后確定每個節點在頁面上的位置和大小，最后輸出一個盒子模型，它會精確的捕獲每個節點在屏幕上的確切位置和大小。
5、將render tree每個節點繪制顯示出來
繪制階段會遍歷render tree，調用渲染器的paint()方法在屏幕顯示內容。
render tree的繪制工作是由瀏覽器的UI后端組件完成的。
渲染阻塞:
瀏覽器解析文檔，當遇到<script>標簽時，會立即執行腳本，暫停文檔的解析。因為JS可能會改動DOM和CSS，直到腳本執行完成，然后才會繼續解析文檔。
如果是外部腳本，則會先下載完腳本，然后再繼續解析文檔。
兩個原則：CSS優先、JS置后。
三、reflow(回流)和repaint(重繪):
HTML默認是流式布局，CSS和JS會打破這種布局，改變DOM的外觀樣式以及大小和位置。
repaint：一般在改變DOM元素視覺效果時觸發，不影響整體布局，是對某個DOM元素進行重繪，比如元素的背景色變了，不影響元素的大小和位置。
repaint的常見場景：
- 字體顏色的修改；
- 背景顏色的修改；
- text-align的修改等；
reflow：某個DOM元素的位置或尺寸變了，需要重新計算所有DOM元素的位置和大小。所以repaint比reflow的影響要大得多，整個頁面需要重排，也就是對每個DOM元素進行重新渲染。
reflow的常見場景：
- width height padding margin border的修改；
- 窗口大小的改變；
- 文字大小的改變；
- 操作class屬性；
- 添加、刪除DOM元素或改變DOM元素的dispaly屬性等；
四、性能優化
應當盡量少的reflow和repaint
- 盡量減少DOM元素的相互影響，直接修飾你想修飾的元素，避免通過父元素作用域子元素
- 避免設置內聯樣式
- 設置動畫元素的position為fixed或absolute
- 權衡速度的平滑，動畫精度太強，會造成更多的reflow或repaint
- 避免使用table布局，table的每個元素的大小以及內容的改動，都會導致整個table進行重新計算
- 避免在CSS中使用運算表達式
有些情況下，修改了元素樣式之后，瀏覽器并不會立即reflow或repaint，而是將這樣的操作積攢一批，然后做一次reflow,這就叫做異步reflow或者增量異步reflow.
四、結語
如果本文存在錯誤的地方，歡迎指出批評~~~
