瀏覽器輸入網址後到出現頁面會發生什麼事情？

最近面試被問到這個問題，發現裡面觀念牽涉很廣，每個步驟都可以單獨找到很多觀念跟理論，簡單分享以下四個主要的步驟。

1. 輸入網址

使用者輸入 (假設 https://google.com/maps/search/shop )
因為瀏覽器無法根據 URL (Uniform Resource Locator) 直接定位到對應的資源，而是要根據 ip 才能找到，所以必須進行域名的解析

2. 進行域名解析 DNS(Domain Name System) 得到 IP

瀏覽器透過作業系統從中解析出「通訊協定（Protocol）」、「網域（Domain）」、「路徑（Path）」等資訊，經過本地瀏覽器快取及 DNS server 等查找方式來找到跟這些域名對應的 ip 位置

查找 ip 的順序 1. 檢查本地的 DNS 快取 2. 檢查電腦中的 .host 檔 3. 向 DNS 伺服器發送詢問

找到 ip 後丟回給瀏覽器，瀏覽器根據解析出的 IP，開始建立連線

3. TCP (Transmission Control Protocol）開始進行三次握手建立連線

透過 TCP/IP 協議 (是一種傳輸方式，browser 無法建立 HTTP、HTTPS、TCP 傳輸、從網址查找 IP，這些是由 TCP/IP 傳輸協定做的)，經過三次握手建立連線，

三次握手指的是像下面的請求與回應。完成後便可以讓 client 與 server 建立連線

client: 1.2.3.4 hello 你在嗎？我要準備跟你拿取資料摟
server: 我在喔，你可以來拿了。
client: 好，我要過去拿了

連線建立後，如果通訊協定是 HTTPS，瀏覽器會與伺服器建立 TLS 加密；隨後，瀏覽器依照 IP 位置及 port（http 預設 80，https 預設 443），準備發送請求並將資訊打包成一個個封包開始進行傳輸。

4. 發送 http 請求（後端資料處理、前端畫面渲染）

建立連線之後，就發送請求 (Request)，server 再根據請求的動作(get, post)決定後續資料的處理，在 server 端主要會是以 MVC 架構的流程進行（MVC 概念參考這篇介紹）

假設我們是要呈現出 google 目前的首頁頁面，routes 會帶我們找到對應 controller 的 action 上面，根據 action 寫好的方法，請 model 向資料庫溝通拿取對應的資料，回到 controller 再根據 action 將資料處理成最後 view 要使用的物件，交給對應的 view 去進行呈現。

參考資料：