Mr. Browser

這篇應該叫做『在茫茫人海中瀏覽器先生如何找到正確的人』。

前言

我想應該很多人知道標題的出處,也就是經典工程師面試問題——當你在瀏覽器輸入 google.com 並且按下 Enter 之後發生什麼?,但我這邊不是想要在把這個流程說一次,從鍵盤產生電子訊號什麼的實在太深了,所以我就把重點放在你的瀏覽器在拿到網址之後,到底做了些什麼,才拿到正確的網頁然後顯示給你看呢?

網站與伺服器

世界上許許多多的網站,每個網站以及他們各自的檔案都放在各自的伺服器(server)上面,然後透過 IP 與整個網路世界連結,如果說你要看雅虎的網站,你就要知道雅虎的 IP ,如果你要去台北市政府,那你就要知道台北市政府的 IP ,但 IP 是一串數字又臭又長,到底誰會記得。

Internet

這個時候就有域名(Domain)來幫你,要做比喻的話,比較常見的有兩種比喻,第一種是 IP 是在世界上的絕對位置,而域名像是門牌。但我們這邊應該比較適合的是第二種比喻,IP 就像是電話號碼,而域名就像是你在通訊錄中紀錄的名稱這樣。

我們在瀏覽器上輸入域名之後,瀏覽器就會開始找 IP 在哪裡,然後直接跟 IP 拿『網頁資料』回來給你,經過頁面渲染之後,就成了我們看到的畫面啦!

那瀏覽器怎麼知道,IP 在哪裡呢?

DNS

既然我們講到域名,我們先來談 DNS, Domain Name System(域名系统)吧!

DNS 主要的任務就是把拿到的 Domain(域名)解析成為 IP 位置,其實 DNS 是一個相當大的樹狀結構,他的最頂端為一個叫做 Root 的根域名,而在他的下面就是 Top Level Domain(TLD)跟 Country Code TLD(ccTLD),再下來一層則是我們能夠購買的域名(Second Level Domain)

Domain Name System

沒有錯,域名的階層關係是由後往前的喔!

瀏覽器

瀏覽器,常見的大概就是 Chrome, Safari, FireFox 這三個,他們在這個時候做的事情就很簡單,就是把拿到的 HTML, CSS, JavaScript 檔案等等展示出來讓你看。

首先,假說我們想要去 www.bugtender.com 這個地方好了,我們在瀏覽器上的網誌列輸入完,一按下 Enter 之後,你的瀏覽器先生就會彈出來並收到一個指令:

Url

瀏覽器先生:『喔喔是 www.bugtender.com!』

但想要到 www.bugtender.com 的內容,就得要先知道他的伺服器在哪,就得要先拿到 IP 才行。

於是瀏覽器先生打開了自己的筆記本(瀏覽器 DNS 緩存),但他發現他並沒有紀錄這個網址,於是只好走到房間另一側的抽屜拿出另一個筆記本(系統 DNS 緩存),翻了翻,還是沒有。

cache

瀏覽器先生嘆了口氣,坐回他的位置上拿起電話,打給了一個叫做種花電信的傢伙(Local ISP 服務業者)。

瀏覽器先生:『你好,我想找一個叫做 www.bugtender.com 的 IP,你知道嗎?』

種花電信查閱了一下自己的巨大筆記本,裡面仍沒有這個紀錄。

Mr. browser and CHT

種花電信:『沒有欸,我們這附近沒人上過這個網站,我幫你問問其他人,請稍後。』

種花電信把與瀏覽器先生通話先擱著,拿起了另外一隻電話打給了一個叫做 Root 的人。

種花電信:『你好,我想知道 .com 這個頂級域名的 IP 在哪裡? 』

對方:『你好,在 xx.xx.xx.xx(IP 位置),謝謝,掰掰。』

種花電信撥了下一通電話給 xx.xx.xx.xx

種花電信:『你好,我想知道 bugtender 這個二級域名的 IP 在哪裡? 』

對方:『你好,在 yy.yy.yy.yy,謝謝,掰掰。』

種花電信撥了下一通電話給 yy.yy.yy.yy

種花電信:『你好,我想知道 www 這個三级域名的 IP 在哪裡? 』

對方:『你好,在 zz.zz.zz.zz,謝謝,掰掰。』

CHT and others

種花電信掛了電話後,把 zz.zz.zz.zz 寫進了自己的筆記本內,再拿起跟瀏覽器先生的話筒

種花電信:『喂?還在嗎?』

瀏覽器先生:『在』

種花電信:『噫!好了!我中了!在 zz.zz.zz.zz。』

瀏覽器先生:『Cool,感謝,掰掰!』

瀏覽器先生掛了電話,撥了一通電話到 zz.zz.zz.zz 要網頁資料,然後把它呈現在瀏覽器上給你看,於是你就看到了你眼前現在這個網頁。並且順手將 zz.zz.zz.zzwww.bugtender.com 一起記錄到自己的筆記本中,下次就不用在如此繁複的打電話,直接從這邊就查得到了。

DNS record

那個 8.8.8.8

如果你之前曾經設定過什麼 8.8.8.8 來加速瀏覽網頁,那其實道理也是一樣,8.8.8.8 就是 Google 自己的 DNS 伺服器,有設定的話,上面故事中瀏覽器先生打電話的對象就會從種花電信就會變成 Google。

那為何大部分的人設定之後都會變快呢?因為大家會瀏覽的網頁也通常都是聚集在某幾個大網站, Google DNS 紀錄了全世界大多數人會上的網站,很少有機會需要再從 Root 去一個一個詢問 IP,所以能即時回覆給你正確 IP,讓你瀏覽網頁上面速度增快。

最後

上面講的故事其實省略很多東西,原始版本出處在這篇 在浏览器地址栏输入一个URL后回车,背后会进行哪些技术步骤? 的第一個回答,我將他稍加修改一下,精簡了一些東西,對於生活在台灣的朋友應該比較好理解。

如果看不太懂的話也別擔心,只要略懂一些 Domain name(域名)與 IP 的關係就可以了。

大概是這樣,謝謝大家!