Web開發學習筆記——瀏覽器是如何工作的

西流河發表於2018-04-05
Web筆記瀏覽器

在Web 開發學習筆記——關於網際網路和網際網路應用 這篇部落格中，我簡單介紹了網際網路、全球資訊網以及網路應用這些基本概念，這一篇，我來介紹瀏覽器是如何工作的，或者說，一個經典的面試問題，在瀏覽器中輸入一個網址，按下Enter鍵，在所在地址的網頁呈現出來的過程中到底發生了什麼？

在接下來的內容中，我將隨著以下幾個基本概念來解釋這個過程，不詳之處請各位指正。

  • 網址（URL）
  • IP地址
  • DNS域名系統

網址（URL）的幾個部分

在瞭解整個過程之前，我們有必要先來了解一個網址，也就是 URL 的組成，舉個例子，我們以我的 Github 主頁地址 github.com/fanyj1994 為例，解剖一下這個網址到底包含了什麼。

我們在瀏覽器的位址列輸入 github.com/fanyj1994，這部分內容就是我們常說的網址，又叫做統一資源定位符，也就是 URL(Uniform Resource Locator)，URL 是 URI 的一種常見形式。

那麼， URI 又是什麼呢？

URI(Unicode Resource Identifier)，也叫做統一資源識別符號，它是一個用於標識網際網路資源的字串，你可以理解為網際網路上每個資源的名字，就像我們每個人的名字一樣。除了 URL，還有一種 URI 形式是URN，也叫做統一資源名稱，這種形式比較罕見，不多介紹。

在這個 URL 中，https 稱為協議，是超文字傳輸協議的縮寫。後面的 github.com 是網站所屬的主機名，而後面剩餘的部分則是路徑。對於一個網站來說，它可能包括很多頁面，而這些路徑則決定了具體網頁所在的位置，有的時候，這些路徑會作為子域放到主機的前面。

還有一些網站會加上一些埠號，例如我們常見的80埠，另外，在 GET 模式的窗體下，最後會有以"?"為起點的的查詢引數，例如github.com/fanyj1994?t… 中的 tab=repositories 部分則查詢的是 tab 為 repositories 的標籤頁。也就如下圖所示：

URL圖介

IP地址(Internet Protocol Address)

接下來來介紹一個經常聽到的名詞：IP 地址。

IP 地址是分配給網路上使用網際協議的裝置的數字標籤，網際協議也就是 IP 協議，IP 協議是TCP/IP 協議中網路層的主要協議，其任務是根據源主機和目的主機的地址傳送資料。常見的 IP 地址有 IPv4 和 IPv6 兩大類，前者由32位二進位制陣列成，而後者長度變長，由32位十進位制陣列成。

也就是說，每一個使用 IP 協議的裝置都會有一個獨立的 IP 地址，所以，每個網址後面其實也就對應一個獨一無二的 IP 地址，來代表網路裝置的所在位置。

DNS域名系統(Domain Name System)

我們知道，全世界已經有數百億臺網際網路裝置，也就是說，已經存在數百億個 IP 地址，而且這個數字在不斷攀升，當輸入一個網址，要尋找其對應的 IP 地址就是一項十分艱鉅的任務了，而DNS 就是負責這項任務的服務，它是一個域名與 IP 地址相互對映的分散式資料庫，它可以將人們不能讀懂的 IP 地址轉換為相對應的語義化的域名，就像我們看到www.google.com 自然知道這是谷歌搜尋,但是看到 216.58.210.142 這串數字並不知道它指向哪裡，而事實上這就是 google.com 對應的 IP 地址。

這個查詢的基本過程是這樣的：客戶端（瀏覽器）會傳送一個查詢報文（大概是 query google.com 這樣的）到 DNS 伺服器，DNS 會首先檢查自身的快取，如果已經收錄了這個域名，它會直接返回它對應的 IP 地址，如果沒有找到，則 DNS 會繼續傳送查詢報文到根域名伺服器（最頂級的域名伺服器），根域名伺服器會返回 .com 域的頂級域名伺服器（也即 TLD 伺服器 top-level-domain）的地址（人家是頂級的，只管這些頂級域名），得到頂級域名伺服器的地址之後，DNS 伺服器會接著傳送查詢報文到這個地址，然後得到 google.com 的權威域名伺服器地址，取得這個地址後，DNS 伺服器會將這個地址存入自身的快取（下次再用就不用這麼費勁咯）並將結果返回給客戶端，然後客戶端會根據所得到的 IP 地址，進行定位，併傳送請求。

所以 DNS 資料庫就像一個具有主觀能動性的電話簿，其基本結構如下圖。

域名伺服器層次圖

第二層也就是是權威伺服器。

值得注意的是，對於擁有子域名的一些 URL，例如谷歌地圖，在 DNS 查詢過程中，.com的頂級域名伺服器在返回 google.com 的權威域名伺服器地址時，會附上它所有子域名(map/translate/play等)的資訊，這個過程被形象地稱為膠水。

關於更詳盡的關於 DNS 系統如何工作，請看這裡生動有趣的闡釋~

瀏覽器的工作

瞭解了這些名詞之後，我們正式瞭解，當在瀏覽器中輸入網址 github.com/fanyj1994 並按下回車後，到拿到這個頁面，整個過程發生了什麼。

輸入地址後，瀏覽器會通過 DNS 來查詢到與這個地址相匹配的 IP 地址 192.30.253.112，發起連線請求（其實就是我們常講的 TCP 三次握手），等待目標地址（也就是 Github 伺服器）確認連線之後，瀏覽器會發出一個 HTTP 請求（我在下一篇中介紹 HTTP 請求的內容），Github 的伺服器收到請求之後，會根據請求進行相關的響應和操作（資料查詢之類的），然後會返回一個網頁（HTML 頁面）或者相應的資料，瀏覽器接到頁面之後，進行解析（CSS 渲染，JS 行為新增等），然後呈現在我們面前。

這就是一次簡單的網路訪問過程。

相關文章