HTML頁面渲染

上網(wǎng)對(duì)我大家來說只是點(diǎn)擊鼠標(biāo)，敲敲鍵盤的小事，再簡(jiǎn)單不過，可是作為程序猿，那么整個(gè)過程背后又發(fā)生了什么呢？

瀏覽器獲取HTML

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

  1. 輸入的網(wǎng)址或者點(diǎn)擊的鏈接進(jìn)過DNS解析之后獲取服務(wù)器的IP地址

  2. 瀏覽器通過獲取的IP地址向服務(wù)器發(fā)送HTTP請(qǐng)求，經(jīng)過TCP三次握手確認(rèn)鏈接：

     1. 服務(wù)器接收請(qǐng)求后，解析主機(jī)頭對(duì)應(yīng)的站點(diǎn)，把請(qǐng)求傳送給站點(diǎn)

     2. 站點(diǎn)接受轉(zhuǎn)發(fā)的請(qǐng)求作出回應(yīng)并返回HTTP回應(yīng)

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

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

HTML解析

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

  1. 解析HTML

  2. 構(gòu)建DOM樹

  3. 構(gòu)造呈現(xiàn)樹（Render Tree）

  4. 布局

  5. 繪制

解析與構(gòu)建DOM樹

對(duì)于服務(wù)器返回的HTML瀏覽器有專門的HTML解析器進(jìn)行解析，而后解析成一棵DOM樹

• 整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)

• 每個(gè)HTML元素是元素節(jié)點(diǎn)

• HTML內(nèi)的文本是文本節(jié)點(diǎn)

• 每個(gè)HTMl'屬性是屬性節(jié)點(diǎn)

• 注釋也是注釋節(jié)點(diǎn)

DOM-TREE.png

解析CSS樣式

對(duì)于獲得CSS文件瀏覽器也有專門的CSS解析器解析，并解析成樣式規(guī)則，將樣式表規(guī)則放大到對(duì)應(yīng)的DOM節(jié)點(diǎn)上，形成一課帶有樣式的DOM，也就是呈現(xiàn)樹

Render-TREE.png

布局

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

wendnagliu.png

上面這種情況P元素包含spani標(biāo)簽，但是同時(shí)也會(huì)被div標(biāo)簽包含，在文檔流中是這樣的

wendangliu.png

再根據(jù)呈現(xiàn)樹計(jì)算每個(gè)呈現(xiàn)樹節(jié)點(diǎn)的大小和位置信息，可能你會(huì)有疑問，之前css樣式附著DOM樹是不是已經(jīng)有了樣式嗎，為什么還有計(jì)算，原因：以上包含大小的樣式信息只是存在內(nèi)存里，并沒有實(shí)際使用，瀏覽器要根據(jù)窗口的實(shí)際大小來處理呈現(xiàn)樹節(jié)點(diǎn)的實(shí)際顯示大小和位置。就這樣遞歸的遍歷每一個(gè)節(jié)點(diǎn)進(jìn)行布局。

繪制頁面

布局之后，完成的任務(wù)只是將每一個(gè)節(jié)點(diǎn)按照大小、位置進(jìn)行擺放，并沒有進(jìn)行可視化，那么最后一步就是繪制啦。對(duì)于每一個(gè)呈現(xiàn)樹節(jié)點(diǎn)，繪制的順序如下：

1. 背景顏色

2. 背景圖片

3. 邊框

4. 子呈現(xiàn)樹節(jié)點(diǎn)

5. 輪廓

最后看到的才是我們?nèi)粘Ｋ吹巾撁妗?/p>

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

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