一、總體過程
二、五步
1. HTML → DOM樹 （解析html）
DOM全稱為文件物件模型Document Object Model，其中一個DOM節點對應一個標籤，Dom樹即表示了HTML的文件結構。轉化過程如下圖所示：
- 解碼：瀏覽器從磁碟或網路讀取HTML的原始位元組，然後根據指定的檔案編碼格式（例如 UTF-8）將其轉換為相應字元
- 令牌化：瀏覽器把字元轉化成W3C HTML5 標準指定的各種確切的令牌，比如""、""以及其他在尖括號內的字串。每個令牌都有特殊的含義以及它自己的一套規則
- 詞法分析：生成的令牌轉化為物件，這個物件定義了它們的屬性及規則
- DOM樹構建：最後，由於HTML標記定義了不同標籤之間的關係（某些標籤巢狀在其他標籤中），建立的物件在樹狀的資料結構中互相連結，樹狀資料結構也捕獲了原始標籤定義的父子關係：HTML物件是body物件的父物件，body是p物件的父物件等等
2. CSS → CSSOM樹（解析CSS樣式）
CSSOM全稱為CSS物件模型CSS Object Model，CSSOM告訴了瀏覽器元素在渲染時是什麼樣的。與HTML一樣，我們需要將收到的 CSS 規則轉換為瀏覽器可以理解、能夠處理的東西。因此，我們重複與處理 HTML 非常相似的過程：
CSSOM只輸出包含有樣式的節點，最終輸出為：
3. 生成渲染樹Render Tree （計算可見節點和樣式）
DOM描述的是文件結構，CSSOM描述的是文件的樣式規則，構建這顆樹的目的是為了以正確的順序繪製文件內容，渲染樹為：
- 不包括Header 、 script 、meta 等不可見的節點
- 某些通過 CSS 隱藏的節點在渲染樹中也會被忽略，比如應用了 display:none 規則的節點，而visibility: hidden只是視覺不可見，仍佔據空間，不會被忽略。
4. （渲染）layout
依照盒子模型，計算出每個節點在螢幕中的位置及尺寸
5. （渲染）painting
按照算出來的規則，通過顯示卡，把內容畫到螢幕上。
三、重新渲染
1. reflow重排 （即重新layout）
當可見節點位置及尺寸發生變化時會發生重排，具體為下面情況：
- 頁面初始渲染
- 新增/刪除可見DOM元素
- 改變元素位置
- 改變元素尺寸（寬寬、高、內外邊距、邊框等）
- 改變元素內容**（文字、html等）**
- 改變元素字型大小
- 改變視窗尺寸
不會發生重排的行為：
- 讀取dom節點屬性、內容、樣式
2. repaint重繪 （即重新paint）
改變某個元素的背景色、文字顏色、邊框顏色等等不影響它周圍或內部佈局的屬性時，螢幕的一部分要重畫，但是元素的幾何尺寸沒有變。
它是一個可見節點改變除位置和大小以外的外觀所觸發的瀏覽器行為，有下面幾個特點：
- 重繪不一定導致重排
- 重排一定會導致重繪，因為重繪是瀏覽器渲染頁面的最後一步
問題
問：瀏覽器在什麼時候向伺服器傳送獲取css、js外部檔案的請求？
答：解析DOM時碰到外部連結，如果還有connection，則立刻觸發下載請求。
問：CSSOM DOM JavaScript三者阻塞關係？
答：CSSOM DOM互不影響，JavaScript會阻塞DOM樹的構建但JS前的HTML可以正常解析成DOM樹，CSSOM的構建會阻塞JavaScript的執行。這也解釋了為什麼JavaScript的執行都需要訪問DOM和CSSOM的能力，卻只受CSSOM的阻塞。