瀏覽器打開網頁發生了什麼事

主要分幾個步驟

1. DNS解析
2. TCP hand shake - 三次握手
3. 瀏覽器發送HTTP請求
4. Server處理請求返回HTTP
5. 與後端進行REST API請求
6. TCP hand wave - 四次揮手

DNS解析

輸入 https://www.google.com 給瀏覽器之後，瀏覽器會透過DNS查詢IP address
可能查詢的來源有這幾種caches

• 瀏覽器cache
  查詢之前瀏覽過並且記錄的DNS
• OS cache
  呼叫system call查詢DNS
• router cache
  如果有連結router的話，也會有自己的DNS紀錄
• ISP cache
  ISP有自己的DNS server

如果也不在ISP DNS裏面，ISP會發起DNS query查詢Domain Name對應到的IP address

查詢方式可參考這張圖：

為什麼要做cache？降低非必要的資料傳輸

TCP hand shack - 三次握手

又稱為Three-Way Handshake，需要向Client與Server透過發送三次封包來建立TCP連線。

瀏覽器發送HTTP request

建立TCP連線之後，Server會收到瀏覽器的GET document請求，因此產生HTML document送到瀏覽器
header也會夾帶一些metadata到瀏覽器

Server回傳HTTP response

瀏覽器收到Server回傳的HTML document

瀏覽器渲染頁面

瀏覽器開始解析HTML，因為HTML並不是程式語言，而是format，所以瀏覽器必須去解析他並且呈現給使用者
HTML本來只是format，如果要增加使用者互動體驗的話，就會用到JavaScript
JS可以讓我們去操控DOM的節點改變狀態與事件操作

來到重頭戲了，
主要過程：HTML DOM Tree與CSS DOM Tree合成render Tree

1. 解析HTML DOM Tree
   解析HTML的過程是深度優先解析的，因此我們都習慣說HTML解析是由上往下分析
   解析到script時，會先暫停直到解析完成為止

2. 解析CSS DOM Tree
   解析到CSS DOM Tree時，JS的執行將會暫停，直到完成為止

3. 合成render Tree
   根據render Tree計算每個節點的內容

與後端進行REST API請求

TCP hand wave - 四次揮手

參考