瀏覽器解析HTML，CSS過程

每個瀏覽器都會有自己的呈現引擎，不同內核瀏覽器之間的解析順序和方法存在差異，但都是大同小異；

a)呈現引擎，呈現引擎一開始會從網路層獲取請求文檔的內容，內容的大小一般限制在8000個塊以內，然後進行如下所示的基本流程：

1.Parsing HTML to construct theDOM tree;

2.Render tree construction;

3.Layout of the render tree;

4.Painting the render tree.

b)呈現引擎將開始解析HTML文檔，並將各標記逐個轉化成「內容樹」上的DOM節點(HTML 解析器的任務是將 HTML 標記解析成解析樹)。同時也會解析外部的CSS文件以及樣式元素中的樣式數據。HTML中的這些帶有視覺指令的樣式信息將用於創建另一個樹結構：呈現樹；

c)呈現樹包含多個帶有視覺屬性（如顏色和尺寸）的矩形，這些矩形的排列順序就是他們將在屏幕上顯示的順序；

d)呈現樹構建完畢之後，進入「布局」處理階段，也就是為每個節點分配一個應該出現在屏幕上的確切坐標，下一個階段是繪製-呈現引擎會遍歷呈現樹，由用戶界面後端層將每個節點繪製出來；需要著重指出的是，這是一個漸進的過程。為了達到更好的用戶體驗，呈現引擎會力求儘快將內容顯示在屏幕上，它不必等到整個HTML文檔解析完畢之後，就會開始構建呈現樹和設置布局，在不斷接收和處理來自網路的其餘內容的同時，呈現引擎會將部分內容解析並顯示出來。

e)語法分析和詞法分析；

f)使用js解釋器對JS文件進行解析；

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！