從輸入URL到⻚面展現，這中間發生了什麼?

在前端開發領域，不少面試官常常掛在嘴邊問「瀏覽器從輸入URL到⻚面展現，這中間發生了什麼?」咱們不去想面試官有多瞭解瀏覽器工做原理，去問問本身有沒有掌握瀏覽器相關工做原理。這道面試題比較全面考察應聘者知識的掌握程度，其中涉及到了網絡、操做系統、Web等一系列的知識。

下面的圖來自於學習極客時間《瀏覽器工做原理與實踐》

這張完整的流程示意圖，和本人以前看別人面試題解答的不同，它不是爲了面試而去答題，是從學習瀏覽器原理的角度去看待這個面試題，按照以往的面試題答案是從輸入URL判斷ip地址和域名，若是是域名就先解析域名得到ip地址而後找到目標服務器，再根據請求信息返回響應的信息給瀏覽器，而後瀏覽器開始渲染工做，最後渲染完成後呈現頁面。對於未曾瞭解過瀏覽器原理的人來講，只能死記硬背答案，對於域名解析、ip尋址、http網絡請求、渲染過程等一律不知。下面就從學習到的做者視角出發，從大的角度去分析這個問題。

從上圖中看出，整個過程須要各個進程之間配合，進程職責具體以下：

• 瀏覽器進程主要負責用戶交互、子進程管理和文件儲存等功能。
• 網絡進程是面向渲染進程和瀏覽器進程等提供網絡下載功能。
• 渲染進程的主要職責是把從網絡下載的HTML、JavaScript、CSS、圖片等資源解析爲能夠顯示和交互的⻚面。由於渲染進程全部的內容都是經過網絡獲取的，會存在一些惡意代碼利用瀏覽器漏洞對系統進行攻 擊，因此運行在渲染進程裏面的代碼是不被信任的。這也是爲何Chrome會讓渲染進程運行在安全沙箱裏，就是爲了保證系統的安全。

關於什麼是進程、什麼是線程，看到一篇好文解釋的不錯，推薦你們閱讀《從瀏覽器多進程到JS單線程，JS運行機制最全面的一次梳理》

• 進程是cpu資源分配的最小單位（是能擁有資源和獨立運行的最小單位）
• 線程是cpu調度的最小單位（線程是創建在進程的基礎上的一次程序運行單位，一個進程中能夠有多個線程） 一個進程就是一個程序的運行實例，當啓動一個程序的時候，操做系統會爲該程序建立一塊內存，用來存放代碼、運行中的數據和一個執行任務的主線程，咱們把這樣的一個運行環境叫進程。

再回頭看上面的圖用藍色背景標記的節點：

• 首先，用戶從瀏覽器進程裏輸入請求信息;
• 而後，網絡進程發起URL請求;
• 服務器響應URL請求以後，瀏覽器進程就又要開始準備渲染進程了;
• 渲染進程準備好以後，須要先向渲染進程提交⻚面數據，咱們稱之爲提交文檔階段;
• 渲染進程接收完文檔信息以後，便開始解析⻚面和加載子資源，完成⻚面的渲染。

從輸入URL到⻚面展現

從幾個核心節點具體再來細說一下

用戶輸入

當用戶輸入URL後瀏覽器開始加載地址，標籤頁上的圖標變成加載狀態，表示正在等待請求URL地址的響應，等到接收響應數據及提交文檔階段，頁面的內容纔會發生變化。

URL請求過程

地址URL和頁面資源URL請求過程須要瀏覽器進程與網絡進程通訊，移交給網絡進程處理。網絡進程首先會查找本地緩存是否命中資源，若是是則直接返回，若是沒有則進入網絡請求流程，請求前的第一步是要進行DNS解析，以獲取請求域名的服務器IP地址。若是請求協議是HTTPS，那麼還須要創建TLS鏈接。 當IP地址和服務器創建TCP鏈接後，瀏覽器端會構建請求行、請求頭等信息，並 把和該域名相關的Cookie等數據附加到請求頭中，而後向服務器發送構建的請求信息。 服務器接收到請求信息後，會根據請求信息生成響應數據(包括響應行、響應頭和響應體等信息)，併發給網絡進程。等網絡進程接收了響應行和響應頭以後，就開始解析響應頭的內容了。 根據響應頭狀態碼200和字段Content-Type來處理返回的數據（如狀態碼爲30一、302則重定向從新創建鏈接），另外Content-Type是HTTP頭中一個很是重要的字段， 它告訴瀏覽器服務器返回的響應體數據是什麼類型，而後瀏覽器會根據Content-Type的值來決定如何顯示響應體的內容。

準備渲染進程

通常來講，瀏覽器打開一個新⻚面採用的渲染進程策略就是：

• 一般狀況下，打開新的⻚面都會使用單獨的渲染進程;
• 若是從A⻚面打開B⻚面，且A和B都屬於同一站點(相同的協議和根域名)的話，那麼B⻚面複用A⻚面的渲染進程;若是是其餘情 況，瀏覽器進程則會爲B建立一個新的渲染進程。

提交文檔

注意這裏的「文檔」是指URL請求的響應體數據

• 「提交文檔」的消息是由瀏覽器進程發出的，渲染進程接收到「提交文檔」的消息後，會和網絡進程創建
• 傳輸數據的「管道」。 等文檔數據傳輸完成以後，渲染進程會返回「確認提交」的消息給瀏覽器進程。
• 瀏覽器進程在收到「確認提交」的消息後，會更新瀏覽器界面狀態，包括了安全狀態、地址欄的URL、前 進後退的歷史狀態，並更新Web⻚面。

  

這也就解釋了爲何在瀏覽器的地址欄裏面輸入了一個地址後，以前的⻚面沒有立⻢消失，而是要加載一會 兒纔會更新⻚面。

渲染階段

一旦文檔被提交，渲染進程便開始⻚面解析和子資源加載了，關於這個階段的完整過程，比較重要關乎到瀏覽器內核知識點，需另外一篇學習筆記着重理解。

敬請期待下一篇學習筆記《瀏覽器頁面的渲染流程》

參考

極客時間課程《瀏覽器工做原理與實踐》