---
# System prepended metadata

title: '[IM015] How a browser works (2) - DNS'
tags: [javascript, ironman]

---

# [IM015] How a browser works (2) - DNS

> **前言**
> 2020 秋天，我將用 30 天的時間，來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識，有些問題可能對有些讀者來說相對簡單，不過期待這趟旅程，能幫助自己、也幫助讀者打開不同的知識大門。有興趣的話，跟著我一起探索吧！

![](https://images.unsplash.com/photo-1522542550221-31fd19575a2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)

## Enter a URL in browser

現在當我們想要找到某一個網頁的時候，通常是直接在搜尋引擎上打上關鍵字，然後根據搜尋結果，點擊進入想去的網站。另外一個方式就是，在瀏覽器當中輸入網址然後直接前往。不過，當我們點擊網址、或是輸入網址之後，瀏覽器發生了什麼事情呢？

以輸入 URL 來說，Chrome browser process 當中的 UI thread 就會啟動，會先初步判斷使用者輸入的內容是 "searcg keyword" 還是 "URL"。若內容判斷是 "URL" ，接下來就會把 URL 交給 Network thread，來執行連線的任務。

不過 URL 本身是一個字串，而在網路世界當中，主機的位址其實是由一串數字所組成，也就是我們常說的 IP address (Internet Protocol address)，若想要順利抵達目標網頁並送出請求，那麼就需要找到目標網頁的 IP address

## How to find IP address

首先，瀏覽器會先去檢查本地端是否有快取資料可以使用，譬如過去曾經瀏覽過的頁面，就可能留下快取資料，供後續瀏覽使用。

若沒有快取資料，下一步瀏覽器則會去尋找電腦中的 hosts 檔案。根據 Wiki 的解釋：

> "The computer file hosts is an operating system file that maps hostnames to IP addresses. It is a plain text file. "

可以知道這個檔案就像是電話簿一樣，記錄著網址與 IP address 的對應。如果可以在這裡找到相對應的 IP address，那麼就可以直接前往目的地了！

但如果在快取資料和 hosts 檔案當中，都找不到對應的 IP address，那麼接下來，瀏覽器就要尋求外援。這個外援對象，就是 DNS server。

## DNS (domain name system)

> The Domain Name System (DNS) is a hierarchical and decentralized naming system for computers, services, or other resources connected to the Internet or a private network.

DNS 域名系統，是網際網路上的一個去中心化的服務，主要負責處理域名和 IP address 的對應關係，所以如果遇到不知道 IP address 的狀況時，找 DNS 就對了。

**local DNS server**

首先，瀏覽器會向 local DNS server 發出請求，不過這時候可能會問，瀏覽器怎麼知道要向哪一個 local DNS server 發出請求呢？其實通常網路服務提供商在幫我們建立網路連線的時候，就會提供一個 local DNS server 的位址，如果沒有，我們也可以自己在電腦當中的連線設定，手動設置 local DNS server 位址（譬如 `8.8.8.8`）

**Root DNS server**

當 local DNS server 收到 URL 查詢請求之後，會向 root DNS server 發出請求。全全球共有 13 組的 root DNS server 位址，不過實際上有 1000 多台 servers 在共同處理請求。當 root DNS server 收到 URL 之後，會先分析出 Top-level domain (TLD)。

TLD ，中文稱作頂級域名，基本上就是 URL 的最後一個部分，像是 `.com`, `.co`, `.tw` ... 等，也分別由不同的機構在管理。

經過 root DNS server 後，就會知道當前 URL 的 TLD ，以及負責該 TLD 的 DNS server 位址。因此下一步，就是向 TLD DNS server 發出詢問請求。

**TLD DNS server**

當 TLD DNS server  收到 URL 查詢請求之後，會繼續解析 URL 並找到 Second-level domain，如果以 `www.google.com` 來說，Second level domain 就是 `google`。

知道 second-level domain 後，就可以找到負責的 authoritative DNS server 並再次發出查詢請求


**Authoritative DNS server**

> An authoritative name server is a name server that gives answers in response to questions asked about names in a zone.

當我們來到 authoritative DNS server，基本上就可以得到目標網站的 IP address。

![](https://weibeld.net/misc/assets/dns.png)

所以整理一下

* Local DNS server - 向 Root DNS server 送出查詢請求
* Root DNS server - 找到對應的 Top-level Domain server
* TLD DNS server - 找到對應的 Second-level Domain server (authoritative DNS server)
* Authoritative DNS server - 找到目標網站對應的 IP address

## End

找到目標網站的 IP address 之後，就可以準備開始建立連線，但是要怎麼連線呢？明天就讓我們來看看鼎鼎大名的 TCP/IP 與 HTTP 吧！


## Ref
* [前端三十｜30. [WEB] 從輸入網址列到渲染畫面，過程經歷了什麼事情？](https://medium.com/schaoss-blog/%E5%89%8D%E7%AB%AF%E4%B8%89%E5%8D%81-30-web-%E5%BE%9E%E8%BC%B8%E5%85%A5%E7%B6%B2%E5%9D%80%E5%88%97%E5%88%B0%E6%B8%B2%E6%9F%93%E7%95%AB%E9%9D%A2-%E9%81%8E%E7%A8%8B%E7%B6%93%E6%AD%B7%E4%BA%86%E4%BB%80%E9%BA%BC%E4%BA%8B%E6%83%85-49341bcf6aff)
* [Inside look at modern web browser](https://developers.google.com/web/updates/2018/09/inside-browser-part1)
* [Root name server](https://en.wikipedia.org/wiki/Root_name_server)
* 


***
> **TD**
> Be curious as astronomer, think as physicist, hack as engineer, fight as baseball player
> 
> [More about me](https://tsungtingdu.github.io/profile/)
> 
> *"Life is like riding a bicycle. To keep your balance, you must keep moving."*

***

###### tags: `ironman` `javascript`