由於瀏覽器的載入、解析、渲染是一個較為複雜的過程，本文將這三部分拆解開來，僅對瀏覽器渲染部分進行講解。如有錯誤，歡迎指正。

1.第一階段：構建DOM樹

1.進入正題，當網頁輸入URL時候，瀏覽器呼叫相應的資源載入器。

2.載入器依賴網頁模組建立連線，發起請求並接受回覆。

3.瀏覽器接收到各種網頁或者資源的資料，其中某些資源可能是同步的也可能是非同步的。

4.網頁被載入給html直譯器變為一系列的詞語（token）。

5.解析器根據詞語構建節點node，形成DOM樹。

6.如果節點是js程式碼的話則呼叫js引擎解釋執行並且阻塞DOM樹的構建與渲染（js程式碼可能會修改DOM樹的結構）。

7.如果節點需要依賴其他資源，例如圖片，CSS，視訊等，呼叫資源載入器載入他們，此過程為非同步，不會阻礙當前DOM樹的構建（CSS載入不會阻礙DOM樹的構建，但會阻塞渲染）。對於js資源的載入，則會阻塞DOM樹的構建和渲染，除非設定了script標籤的非同步屬性。特別的，載入資源是由單獨的下載執行緒進行非同步載入，瀏覽器會並行載入，不過具體並行最大載入數量是有一定限制的。

2.第二階段：構建CSS規則樹

與DOM樹的構建基本相同，都是要經過 Bytes→Characters→Tokens→Nodes→Objectmodel這個過程。但值得注意的是，CSS是一種渲染阻塞資源（render blocking resource），它需要完全被解析完畢後才能進入生成渲染樹的環節。

3.第三階段：CSS和DOM樹生成Render樹

1.DOM樹從根節點開始遍歷可見節點（script，meta，head等除外，visibility:hidden;opacity:0這種仍佔據空間的節點除外），瀏覽器會建立RenderObject物件，該物件儲存了為繪製DOM節點所必須的各種資訊，例如樣式佈局資訊

2.RenderObject物件構成一顆基於DOM樹的新樹，為了佈局計算和渲染等機制建立的一種新的內部表示。如果DOM樹中添加了新的節點，瀏覽器也需要建立相應的RenderObject物件。

4.第四階段：生成佈局（Generating the Layout）

有了各個節點的樣式資訊和屬性，但不知道各個節點的確切位置和大小，所以要通過佈局將樣式資訊和屬性轉化為實際可視視窗的相對大小和位置。可視視窗大小是由meta標籤的name屬性為viewport的內容設定所決定的，如果缺少這個標籤，預設的視口大小為980px。

5.第五階段：繪製（Painting）

最後，頁面上可見的內容就會通過GPU轉化為螢幕上的畫素點。繪製過程所需要花費的時間取決於DOM的大小以及元素的CSS樣式。有些樣式比較耗時，比如一個複雜的漸變背景色比簡單的單色背景色需要更多的渲染時間。

6.第六階段：迴流（reflow）與重繪（repaint）

當元素的內容、結構、位置、或尺寸發生了變化，需要重新計算元素樣式（reflow）。

當元素的樣式（背景色、邊框顏色、文字顏色等）發生變化，需要重新繪製元素（repaint）。

需要注意的是當出發reflow時都會觸發repaint，但是repaint不一定觸發reflow，即重繪可以單獨觸發。