深入剖析從輸入URL到頁面顯示過程原理
前言
說說從輸入 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)程。其實(shí)，Chrome 剛開始發(fā)布的時候是沒有 GPU 進(jìn)程的。而 GPU 的使用初衷是為了實(shí)現(xiàn) 3D CSS 的效果，只是隨后網(wǎng)頁、Chrome 的 UI 界面都選擇采用 GPU 來繪制，這使得 GPU 成為瀏覽器普遍的需求。
網(wǎng)絡(luò)進(jìn)程。主要負(fù)責(zé)頁面的網(wǎng)絡(luò)資源加載，之前是作為一個模塊運(yùn)行在瀏覽器進(jìn)程里面的，后面才獨(dú)立出來，成為一個單獨(dú)的進(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é)議和根域名相同，則屬于同一站點(diǎn)。
但如果從一個頁面打開了另一個新頁面，而新頁面和當(dāng)前頁面屬于同一站點(diǎn)的話，那么新頁面會復(fù)用父頁面的渲染進(jìn)程。
渲染進(jìn)程準(zhǔn)備好之后，還不能立即進(jìn)入文檔解析狀態(tài)，因?yàn)榇藭r的文檔數(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，計(jì)算出 DOM 節(jié)點(diǎn)的樣式。
創(chuàng)建布局樹，并計(jì)算元素的布局信息。
對布局樹進(jìn)行分層，并生成分層樹。
為每個圖層生成繪制列表，并將其提交到合成線程。
合成線程將圖層分成圖塊，并在光柵化線程池中將圖塊轉(zhuǎn)換成位圖。
合成線程發(fā)送繪制圖塊命令 DrawQuad 給瀏覽器進(jìn)程。
瀏覽器進(jìn)程根據(jù) DrawQuad 消息生成頁面，并顯示到顯示器上。
最后
以上就是筆者對這一常考面試題的一些總結(jié)，對于其中的一些具體過程并沒有詳細(xì)地列舉出來，更多關(guān)于輸入URL到頁面顯示過程的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家介紹了架構(gòu)中404我們更怕200錯誤的解決及分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
VSCode使用ssh密鑰免密遠(yuǎn)程登錄服務(wù)器的方法
本文主要介紹了VSCode使用ssh密鑰免密遠(yuǎn)程登錄服務(wù)器的方法，文中通過圖文代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Git如何修改已提交的commit注釋問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
學(xué)習(xí)編程的人對Get方法和Post方法并不陌生吧，GET是從服務(wù)器上獲取數(shù)據(jù)，POST是向服務(wù)器傳送數(shù)據(jù)，不了解的朋友可以詳細(xì)參考下2013-10-10
玩轉(zhuǎn)VSCode插件之Remote-SSH的使用情況
這篇文章主要介紹了玩轉(zhuǎn)VSCode插件之Remote-SSH的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了使用swipe方法模擬屏幕滑動與手勢密碼繪制 ,本文通過實(shí)力代碼，圖文效果的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
12種實(shí)現(xiàn)301網(wǎng)頁重定向方法的代碼實(shí)例（含Web編程語言和Web服務(wù)器）
這篇文章主要介紹了11種實(shí)現(xiàn)301網(wǎng)頁重定向方法的代碼實(shí)例,文中包含9種編程語言和3種WEB服務(wù)器配置方法,共計(jì)12種,需要的朋友可以參考下2014-07-07
這篇文章主要為大家介紹了級聯(lián)分類器算法的原理解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
這篇文章主要介紹了15個開發(fā)者必須知道的chrome技巧,需要的朋友可以參考下2017-09-09
這篇文章主要為大家介紹了詳解如何設(shè)置git命令縮寫，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09