前言

說(shuō)說(shuō)從輸入 URL 到頁(yè)面顯示的過(guò)程，這是一個(gè)在面試中經(jīng)常會(huì)被問(wèn)到的問(wèn)題，此問(wèn)題能比較全面地考察應(yīng)聘者知識(shí)的掌握程度。其中涉及到了網(wǎng)絡(luò)、操作系統(tǒng)、Web 等一系列的知識(shí)。

以 Chrome 瀏覽器為例，目前的 Chrome 瀏覽器有以下幾個(gè)進(jìn)程：

瀏覽器進(jìn)程。主要負(fù)責(zé)界面顯示、用戶交互、子進(jìn)程管理，同時(shí)提供存儲(chǔ)等功能。

渲染進(jìn)程。主要職責(zé)是把從網(wǎng)絡(luò)下載的 HTML、JavaScript、CSS、圖片等資源解析為可以顯示和交互的頁(yè)面。

GPU 進(jìn)程。其實(shí)，Chrome 剛開(kāi)始發(fā)布的時(shí)候是沒(méi)有 GPU 進(jìn)程的。而 GPU 的使用初衷是為了實(shí)現(xiàn) 3D CSS 的效果，只是隨后網(wǎng)頁(yè)、Chrome 的 UI 界面都選擇采用 GPU 來(lái)繪制，這使得 GPU 成為瀏覽器普遍的需求。

網(wǎng)絡(luò)進(jìn)程。主要負(fù)責(zé)頁(yè)面的網(wǎng)絡(luò)資源加載，之前是作為一個(gè)模塊運(yùn)行在瀏覽器進(jìn)程里面的，后面才獨(dú)立出來(lái)，成為一個(gè)單獨(dú)的進(jìn)程。

插件進(jìn)程。主要是負(fù)責(zé)插件的運(yùn)行，因插件易崩潰，所以需要通過(guò)插件進(jìn)程來(lái)隔離，以保證插件進(jìn)程崩潰不會(huì)對(duì)瀏覽器和頁(yè)面造成影響。

在了解了瀏覽器有哪些進(jìn)程，以及它們各自的職責(zé)之后，結(jié)合這些進(jìn)程，我們?cè)賮?lái)分析從輸入 URL 到頁(yè)面顯示的過(guò)程。

1. 用戶輸入

如果輸入的是內(nèi)容，地址欄會(huì)使用瀏覽器默認(rèn)的搜索引擎，來(lái)合成新的帶搜索關(guān)鍵字的 URL。

如果輸入的是 URL，那么地址欄會(huì)根據(jù)規(guī)則，把這段內(nèi)容加上協(xié)議，合成為完整的 URL。

2. URL 請(qǐng)求過(guò)程

瀏覽器進(jìn)程會(huì)通過(guò)進(jìn)程間通信（IPC）把 URL 請(qǐng)求發(fā)送至網(wǎng)絡(luò)進(jìn)程，網(wǎng)絡(luò)進(jìn)程接收到 URL 請(qǐng)求后，會(huì)在這里發(fā)起真正的 URL 請(qǐng)求流程。那具體流程是怎樣的呢？

網(wǎng)絡(luò)進(jìn)程會(huì)查找本地緩存是否緩存了該資源。如果有緩存資源，那么直接返回資源給瀏覽器進(jìn)程；如果在緩存中沒(méi)有查找到資源，那么直接進(jìn)入網(wǎng)絡(luò)請(qǐng)求流程。這請(qǐng)求前的第一步是要進(jìn)行 DNS 解析，以獲取請(qǐng)求域名的服務(wù)器 IP 地址。如果請(qǐng)求協(xié)議是 HTTPS，那么還需要建立 TLS 連接。

接下來(lái)就是利用 IP 地址和服務(wù)器建立 TCP 連接 (三次握手)。連接建立之后，瀏覽器端會(huì)構(gòu)建請(qǐng)求行、請(qǐng)求頭等信息，并把和該域名相關(guān)的 cookie 等數(shù)據(jù)附加到請(qǐng)求頭中，然后向服務(wù)器發(fā)送構(gòu)建的請(qǐng)求信息。

服務(wù)器接收到請(qǐng)求信息后，會(huì)根據(jù)請(qǐng)求信息生成響應(yīng)數(shù)據(jù)（包括響應(yīng)行、響應(yīng)頭和響應(yīng)體等信息），并發(fā)給網(wǎng)絡(luò)進(jìn)程。等網(wǎng)絡(luò)進(jìn)程接收了響應(yīng)行和響應(yīng)頭之后，就開(kāi)始解析響應(yīng)頭的內(nèi)容了。

Content-Type 是 HTTP 頭中一個(gè)非常重要的字段， 它告訴瀏覽器服務(wù)器返回的響應(yīng)體數(shù)據(jù)是什么類(lèi)型，然后瀏覽器會(huì)根據(jù) Content-Type 的值來(lái)決定如何顯示響應(yīng)體的內(nèi)容。

如果 Content-Type 字段的值被瀏覽器判斷為下載類(lèi)型，那么該請(qǐng)求會(huì)被提交給瀏覽器的下載管理器，同時(shí)該 URL 請(qǐng)求的導(dǎo)航流程就此結(jié)束。但如果是 HTML，那么瀏覽器則會(huì)繼續(xù)進(jìn)行導(dǎo)航流程。

3. 準(zhǔn)備渲染進(jìn)程

如果協(xié)議和根域名相同，則屬于同一站點(diǎn)。

但如果從一個(gè)頁(yè)面打開(kāi)了另一個(gè)新頁(yè)面，而新頁(yè)面和當(dāng)前頁(yè)面屬于同一站點(diǎn)的話，那么新頁(yè)面會(huì)復(fù)用父頁(yè)面的渲染進(jìn)程。

渲染進(jìn)程準(zhǔn)備好之后，還不能立即進(jìn)入文檔解析狀態(tài)，因?yàn)榇藭r(shí)的文檔數(shù)據(jù)還在網(wǎng)絡(luò)進(jìn)程中，并沒(méi)有提交給渲染進(jìn)程，所以下一步就進(jìn)入了提交文檔階段。

4. 提交文檔

所謂提交文檔，就是指瀏覽器進(jìn)程將網(wǎng)絡(luò)進(jìn)程接收到的 HTML 數(shù)據(jù)提交給渲染進(jìn)程，具體流程是這樣的：

首先當(dāng)瀏覽器進(jìn)程接收到網(wǎng)絡(luò)進(jìn)程的響應(yīng)頭數(shù)據(jù)之后，便向渲染進(jìn)程發(fā)起“提交文檔”的消息。

渲染進(jìn)程接收到“提交文檔”的消息后，會(huì)和網(wǎng)絡(luò)進(jìn)程建立傳輸數(shù)據(jù)的“管道”。

等文檔數(shù)據(jù)傳輸完成之后，渲染進(jìn)程會(huì)返回“確認(rèn)提交”的消息給瀏覽器進(jìn)程。

瀏覽器進(jìn)程在收到“確認(rèn)提交”的消息后，會(huì)更新瀏覽器界面狀態(tài)，包括了安全狀態(tài)、地址欄的 URL、前進(jìn)后退的歷史狀態(tài)，并更新 Web 頁(yè)面。

5. 渲染階段

一旦文檔被提交，渲染進(jìn)程便開(kāi)始頁(yè)面解析和子資源加載。

渲染進(jìn)程將 HTML 內(nèi)容轉(zhuǎn)換為能夠讀懂的 DOM 樹(shù)結(jié)構(gòu)。

渲染引擎將 CSS 樣式表轉(zhuǎn)化為瀏覽器可以理解的 styleSheets，計(jì)算出 DOM 節(jié)點(diǎn)的樣式。

創(chuàng)建布局樹(shù)，并計(jì)算元素的布局信息。

對(duì)布局樹(shù)進(jìn)行分層，并生成分層樹(shù)。

為每個(gè)圖層生成繪制列表，并將其提交到合成線程。

合成線程將圖層分成圖塊，并在光柵化線程池中將圖塊轉(zhuǎn)換成位圖。

合成線程發(fā)送繪制圖塊命令 DrawQuad 給瀏覽器進(jìn)程。

瀏覽器進(jìn)程根據(jù) DrawQuad 消息生成頁(yè)面，并顯示到顯示器上。

最后

以上就是筆者對(duì)這一?？济嬖囶}的一些總結(jié)，對(duì)于其中的一些具體過(guò)程并沒(méi)有詳細(xì)地列舉出來(lái)，更多關(guān)于輸入U(xiǎn)RL到頁(yè)面顯示過(guò)程的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！