在瀏覽器輸入URL後發生什麼事？

前言

如果在面試的時候被問到這一題，最沒有技術含量的回答當然是「輸入網址後，瀏覽器在網際網路中找到該網頁，然後渲染網頁」；但如果是面試工程師職位的時候這樣說出來，話一輸出口可能就會看到面試官那難以言喻的表情……所以本文算是防範未然、在查看課程以及相關資料後的筆記。

瀏覽器的process

以目前市佔率最高的Chrome為例，當打開Google網頁，查看一下 chrome dev，可以發現有多個process在進行：

首先就可以得到「瀏覽器是multi-process」；先說為什麼要用 multi-process，因為在以前 single-process的瀏覽器上，所有的模塊都是運行在同一個process上，如網路I/O、Javascript運行環境、渲染畫面等等，導致假如其中一個環節有錯的話整個process就會崩潰；另外還會有安全問題，如果某個第三方插件是有惡意代碼，很容易釋放病毒或獲取瀏覽器中的敏感資料（帳號密碼等）。

而現在的瀏覽器process架構，迭代到5個process：

• Browser Process
  • 主要負責頁面顯示、 用戶交互、child-process管理等，同時也提供存儲管理（LocalStorage等）
• Render Process
  • 負責將HTML、CSS、Javascript渲染成用戶交互的頁面。排版引擎Blink和JS引擎V8都在此process內
• GPU Process
  • 加速繪製頁面、3D計算等等。
• Network Process
  • 由Browser Process獨立出來的，負責網路資源的加載
• Plugin Process
  • 其他插件都在這個process進行，為可選的process。把plugin process獨立出來，來保證當插件崩潰的話不會造成main process的崩潰
    

數據的旅程

數據在互聯網上，是以數據包的形式被傳送；而要如何保證數據包被傳送到對的地方、且保證數據的完整性？保證數據包傳送到對的地方，是基於IP和UDP，而數據的完整性則是TCP協議

IP：把數據包送到目標server

在現實世界要傳遞物品到不同地方時，靠的是地址；而計算機世界中的地址就是IP Adress。假設要把數據從主機A傳到主機B，就要附上主機B的IP Adress，還有一些其他的資訊，如主機A本身的IP、IP版本、存活時間等（詳細可查wiki）

UDP：把數據包送達應用程式

IP協議把數據送到主機B後，主機B其實並不知道這個數據是要給瀏覽器、還是其他程式；而加上UDP協議（User Datagram Protocol）可以在數據包上加上 UPD header，裡面包含了 port資訊，因此主機B就可以透過該port端口號來把數據包送到目標程式。

然而，UDP並不能保證數據的完整性，而且沒有提供重發機制；但其優點是速度快，因此UDP協議很適合需要快速傳輸但對數據完整沒有那麼要求的場景，如線上影片、互動遊戲等。

TCP：把數據完整送到應用程式

TCP（Transmission Control Protocol）除了跟UDP一樣在header中有port來讓目標主機把數據包送到正確的應用程式之外，還有以下特點：

• 對於數據丟失的情況，TCP提供了重傳機制
• TCP引入了數據包排序機制，用來把亂序的數據包組合成正確的文件

一個TCP連接的生命週期

1. 三次握手建立連接。所謂三次握手，是指client side和server side總共要傳送三個數據包來確認連接已經建立。
   • A：「喂有聽到嗎？」
   • B：「有聽到喔！你咧有聽到嗎？」
   • A：「我也有聽到，可以通話了耶」
2. 傳送數據階段。client side接收從server side傳送的數據，同時會檢查數據的丟失、以及排序組合成正確的文件
3. 四次揮手斷開連接。

回答「在瀏覽器輸入URL後發生什麼事」

基於上面的背景知識，應該就可以稍微專業地回答此問題。

1. 在瀏覽器輸入URL之後，Browser Process會判斷該字段搜尋用的關鍵詞還是符合規則的URL。如果是搜尋用關鍵字，Browser Process會自動合成搜尋用的URL；如果是符合URL規則的字串，Browser Process會根據規則把字串加上協議，合成完整的URL（如 youtube.com 合成為 https://www.youtube.com）
2. Browser Process利用 Process 通信（IPC）把URL請求發送至 Network Process，而Network Process則根據此來發送真正的URL請求
3. 透過DNS解析，找到正確的IP地址
4. 建立TCP連接，Network Process開始接收數據
5. Browser Process接收到Network Process的數據header後，假設接收到的是HTML文件，Browser Process會讓Render Process和Network Process建立傳輸數據的管道
6. 文檔傳輸完成後，Render Process 會返回「確認提交」的消息給Browser Process（此時還是空白頁）
7. Render Process開始頁面解析以及子資源的加載，繪製頁面。

ChangeLog

• 20221025 - 初稿

Ref

• 極客時間：《瀏覽器原理與實踐》

• ← Previous Post
• Next Post →