從輸入URL到頁面顯示過程原理是什么

這篇文章主要講解了“從輸入URL到頁面顯示過程原理是什么”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“從輸入URL到頁面顯示過程原理是什么”吧！

前言

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

以 Chrome 瀏覽器為例，目前的 Chrome 瀏覽器有以下幾個進程：

瀏覽器進程。主要負責界面顯示、用戶交互、子進程管理，同時提供存儲等功能。

渲染進程。主要職責是把從網絡下載的 HTML、JavaScript、CSS、圖片等資源解析為可以顯示和交互的頁面。

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

網絡進程。主要負責頁面的網絡資源加載，之前是作為一個模塊運行在瀏覽器進程里面的，后面才獨立出來，成為一個單獨的進程。

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

1. 用戶輸入

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

如果輸入的是 URL，那么地址欄會根據規則，把這段內容加上協議，合成為完整的 URL。

2. URL 請求過程

瀏覽器進程會通過進程間通信（IPC）把 URL 請求發送至網絡進程，網絡進程接收到 URL 請求后，會在這里發起真正的 URL 請求流程。那具體流程是怎樣的呢？

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

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

服務器接收到請求信息后，會根據請求信息生成響應數據（包括響應行、響應頭和響應體等信息），并發給網絡進程。等網絡進程接收了響應行和響應頭之后，就開始解析響應頭的內容了。

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

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

3. 準備渲染進程

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

但如果從一個頁面打開了另一個新頁面，而新頁面和當前頁面屬于同一站點的話，那么新頁面會復用父頁面的渲染進程。

渲染進程準備好之后，還不能立即進入文檔解析狀態，因為此時的文檔數據還在網絡進程中，并沒有提交給渲染進程，所以下一步就進入了提交文檔階段。

4. 提交文檔

所謂提交文檔，就是指瀏覽器進程將網絡進程接收到的 HTML 數據提交給渲染進程，具體流程是這樣的：

首先當瀏覽器進程接收到網絡進程的響應頭數據之后，便向渲染進程發起“提交文檔”的消息。

渲染進程接收到“提交文檔”的消息后，會和網絡進程建立傳輸數據的“管道”。

等文檔數據傳輸完成之后，渲染進程會返回“確認提交”的消息給瀏覽器進程。

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

5. 渲染階段

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

渲染進程將 HTML 內容轉換為能夠讀懂的 DOM 樹結構。

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

創建布局樹，并計算元素的布局信息。

對布局樹進行分層，并生成分層樹。

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

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

合成線程發送繪制圖塊命令 DrawQuad 給瀏覽器進程。

瀏覽器進程根據 DrawQuad 消息生成頁面，并顯示到顯示器上。

感謝各位的閱讀，以上就是“從輸入URL到頁面顯示過程原理是什么”的內容了，經過本文的學習后，相信大家對從輸入URL到頁面顯示過程原理是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！