瀏覽器從輸入U(xiǎn)RL到渲染完頁(yè)面的整個(gè)過(guò)程是怎么樣的?

2022-05-29    分類: 網(wǎng)站建設(shè)


 瀏覽器的主要功能是將用戶選擇的web資源呈現(xiàn)出來(lái),它從服務(wù)器請(qǐng)求資源,并將得到的資源(HTML,PDF,image等等)顯示在瀏覽器窗口。那么從用戶敲入U(xiǎn)RL到完整渲染出來(lái),經(jīng)歷了什么過(guò)程呢?也就是說(shuō)整個(gè)瀏覽器的工作流程是怎樣的呢?

整個(gè)過(guò)程大致如下:


       1. 輸入U(xiǎn)RL,瀏覽器根據(jù)域名尋找IP地址
 2. 瀏覽器發(fā)送一個(gè)HTTP請(qǐng)求給服務(wù)器,如果服務(wù)器返回以301之類的重定向,瀏覽器根據(jù)相應(yīng)頭中的location再次發(fā)送請(qǐng)求
 3. 服務(wù)器接受請(qǐng)求,處理請(qǐng)求生成html代碼,返回給瀏覽器,這時(shí)的html頁(yè)面代碼可能是經(jīng)過(guò)壓縮的
 4. 瀏覽器接收服務(wù)器響應(yīng)結(jié)果,如果有壓縮則首先進(jìn)行解壓處理
 5. 瀏覽器開(kāi)始顯示HTML

     6. 瀏覽器發(fā)送請(qǐng)求,以獲取嵌入在HTML中的對(duì)象。在瀏覽器顯示HTML時(shí),它會(huì)注意到需要獲取其他地址內(nèi)容的標(biāo)簽。


這時(shí),瀏覽器會(huì)發(fā)送一個(gè)獲取請(qǐng)求來(lái)重新獲得這些文件——包括CSS/JS/圖片等資源,這些資源的地址都要經(jīng)歷一個(gè)和HTML讀取類似的過(guò)程。所以瀏覽器會(huì)在DNS中查找這些域名,發(fā)送請(qǐng)求,重定向等等…

 那么,一個(gè)頁(yè)面,究竟是如何從我們輸入一個(gè)網(wǎng)址到最后完整的呈現(xiàn)在我們面前的呢?還需要了解一下瀏覽器是如何渲染的。
首先是用戶輸入url,瀏覽器通過(guò)DNS查詢要訪問(wèn)頁(yè)面的IP,查詢到后,瀏覽器會(huì)替用戶去向這個(gè)IP地址發(fā)送請(qǐng)求拉取html文件,瀏覽器會(huì)派GUI線程去解析加載回來(lái)的html文件

html解析過(guò)程:01機(jī)器碼-》charter字符-》tokens令牌-》node節(jié)點(diǎn)-》dom樹(shù)


解析CSS,構(gòu)建CSSOM
有了骨骼以后,接下來(lái)就是確定長(zhǎng)相了,這是CSS要做的事情。和解析HTML類似,CSS解析各種樣式信息,生成網(wǎng)頁(yè)的“外觀”。但是有個(gè)問(wèn)題,CSSA(class選擇器)說(shuō),我喜歡藍(lán)色,我家網(wǎng)頁(yè)的所有文字都要是藍(lán)色。CSSB(id選擇器)就不樂(lè)意了,憑啥啊,我喜歡紅色,我家的標(biāo)題必須是紅色。由于id選擇器是親生的,那就標(biāo)題是紅色的吧,于是不同選擇器就有了不同的權(quán)重。最后生成CSSOM

因?yàn)闉g覽器解析文檔,如果遇到請(qǐng)求外部資源時(shí),如圖像,iconfont,JS等。瀏覽器將下載該資源。請(qǐng)求過(guò)程是異步的,并不會(huì)影響HTML文檔進(jìn)行加載,當(dāng)遇到