HTML頁面渲染

上網對我大家來說只是點擊鼠標，敲敲鍵盤的小事，再簡單不過，可是作為程序猿，那麽整個過程背後又發生了什麽呢？

瀏覽器獲取HTML

• 瀏覽器獲取HTML大致可以分為以下的步驟：

  1. 輸入的網址或者點擊的鏈接進過DNS解析之後獲取服務器的IP地址

  2. 瀏覽器通過獲取的IP地址向服務器發送HTTP請求，經過TCP三次握手確認鏈接：

     1. 服務器接收請求後，解析主機頭對應的站點，把請求傳送給站點

     2. 站點接受轉發的請求作出回應並返回HTTP回應

     3. 瀏覽器接到返回的HTTP回應，解析頭信息和HTML主體

     4. 根據解析的頭信息設置必要的數據，如cookie，編碼，語言等聲明的處理

HTML解析

• HTML解析大致分為五部分：

  1. 解析HTML

  2. 構建DOM樹

  3. 構造呈現樹（Render Tree）

  4. 布局

  5. 繪制

解析與構建DOM樹

對於服務器返回的HTML瀏覽器有專門的HTML解析器進行解析，而後解析成一棵DOM樹

• 整個文檔是一個文檔節點

• 每個HTML元素是元素節點

• HTML內的文本是文本節點

• 每個HTMl‘屬性是屬性節點

• 註釋也是註釋節點

  

解析CSS樣式

對於獲得CSS文件瀏覽器也有專門的CSS解析器解析，並解析成樣式規則，將樣式表規則放大到對應的DOM節點上，形成一課帶有樣式的DOM，也就是呈現樹

布局

瀏覽器按照從上到下、從左到右的順序讀取DOM樹的節點，依次放到文檔流中，文檔流中，每一個節點姑且看作是一個盒子，這個盒子中包含著他的子節點，同時這個盒子也會被他的父節點包含，舉個栗子

上面這種情況P元素包含spani標簽，但是同時也會被div標簽包含，在文檔流中是這樣的

再根據呈現樹計算每個呈現樹節點的大小和位置信息，可能你會有疑問，之前css樣式附著DOM樹是不是已經有了樣式嗎，為什麽還有計算，原因：以上包含大小的樣式信息只是存在內存裏，並沒有實際使用，瀏覽器要根據窗口的實際大小來處理呈現樹節點的實際顯示大小和位置。就這樣遞歸的遍歷每一個節點進行布局。

繪制頁面

布局之後，完成的任務只是將每一個節點按照大小、位置進行擺放，並沒有進行可視化，那麽最後一步就是繪制啦。對於每一個呈現樹節點，繪制的順序如下：

1. 背景顏色

2. 背景圖片

3. 邊框

4. 子呈現樹節點

5. 輪廓

最後看到的才是我們日常所看到頁面。

文章有錯誤之處歡迎各位道友不吝指正

參考源：https://www.cnblogs.com/dojo-lzz/p/3983335.html

HTMl頁面渲染