前言

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

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

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

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

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

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

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

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

1. 用戶輸入

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

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

2. URL 請求過程

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

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

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

服務(wù)器接收到請求信息后，會根據(jù)請求信息生成響應(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)頭之后，就開始解析響應(yīng)頭的內(nèi)容了。

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

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

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

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

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

渲染進(jìn)程準(zhǔn)備好之后，還不能立即進(jìn)入文檔解析狀態(tài)，因為此時的文檔數(shù)據(jù)還在網(wǎng)絡(luò)進(jìn)程中，并沒有提交給渲染進(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)程接收到“提交文檔”的消息后，會和網(wǎng)絡(luò)進(jìn)程建立傳輸數(shù)據(jù)的“管道”。

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

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

5. 渲染階段

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

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

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

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

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

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

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

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

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

最后

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

最新評論