頁面渲染：過程分析

1、整體過程

2、五步

1. HTML → DOM樹 （解析html）

DOM全稱爲文檔對象模型Document Object Model，其中一個DOM節點對應一個標籤，Dom樹即表示了HTML的文檔結構。轉化過程以下圖所示：

1. 解碼：瀏覽器從磁盤或網絡讀取HTML的原始字節，而後根據指定的文件編碼格式（例如 UTF-8）將其轉換爲相應字符
2. 令牌化：瀏覽器把字符轉化成W3C HTML5 標準指定的各類確切的令牌，好比""、""以及其餘在尖括號內的字符串。每一個令牌都有特殊的含義以及它本身的一套規則
3. 詞法分析：生成的令牌轉化爲對象，這個對象定義了它們的屬性及規則
4. 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

按照算出來的規則，經過顯卡，把內容畫到屏幕上。

3、從新渲染

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的阻塞。