瀏覽器是怎麼樣渲染一個頁面的

解析與構建DOM樹

解析html文件構建DOM樹的一些規則：

1，外部樣式會阻塞後續腳本執行，直到外部樣式加載並解析完畢。

2，外部樣式不會阻塞後續外部腳本的加載，但會阻塞外部腳本的執行。

3，若是後續外部腳本含有async屬性（IE下爲defer），則外部樣式不會阻塞該腳本的加載和運行。

4，對於動態建立的link標籤不會阻塞其後動態建立的script的加載與執行，無論script標籤是否具備async屬性，但對於其餘非動態建立的script，以上三條結論仍適用

構建呈現樹

HTML解析完畢後，開始構建呈現樹RenderTree，這一步的主要工做在於將css樣式應用到DOM節點上面，WebKit內核將這一過程稱爲附着，其餘瀏覽器有不一樣的概念。對前端工程師而言這個過程會涉及到css層疊問題。

首先將根據樣式重要性排序，由低到高依次爲：

1，瀏覽器聲明

2，用戶普通聲明

3，做者普通聲明

4，做者重要聲明

5，用戶重要聲明

對於同一重要級別，則是根據css選擇符的特指度來斷定優先級；

各級別的優先級：

important > 內聯  > ID > 類 > 標籤|僞類|屬性選擇器 > 僞對象 > 通配符 > 繼承

1，權值的大小跟選擇器的類型和數量有關

2，樣式的優先級跟樣式的定義順序有關

呈現樹的每個節點即爲與其對應的DOM節點的css框，框的類型與DOM節點的display屬性有關，block元素生成block框，inline元素生成inline框，每個呈現樹節點都有與之對應的DOM節點，但DOM節點不必定有與之相對應的呈現樹節點，你如display屬性爲none的DOM節點，並且呈現樹節點在呈現樹中的位置與他們在DOM樹中的位置不必定相同，好比float與絕對定位元素。

佈局 

定位元素的座標和大小，是否換行，各類 position, overflow， z-index 屬性

繪製

這裏有兩個概念，一個是 Reflow，另外一個是 Repaint。

repaint 屏幕的一部分要重畫，好比某個css的背景色變了，可是元素的幾何尺寸沒有變。

reflow 意味着元件的幾何尺寸變了，咱們須要從新驗證並計算render tree。是render tree的一部分或所有發生了變化，這就是reflow 或是layout。reflow的成本比repaint的成本高不少，DOM tree裏面的每一個節點都會有reflow方法，一個節點的reflow頗有可能致使子節點，甚至是父節點以及同級節點的reflow。

display:none 會觸發 reflow，而 visibility:hidden 只會觸發 repaint。

參考

答寒冬九問之講講輸入完網址按下回車，到看到網頁這個過程當中發生了什麼。

CSS選擇器、優先級與匹配原理