從一個url位址到頁面渲染完成，發生了什麼？

1. DNS解析，将域名解析為 ip 位址

• 浏覽器DNS緩存
• 系統DNS緩存
• 路由器DNS緩存
• 網絡營運商DNS緩存
• 遞歸搜尋： (blog.baidu.com為例)
  • .com 域名下查找DNS解析
  • .baidu 域名下查找DNS解析
  • blog 域名下查找DNS解析
  • 出錯了（都找不到）

2. TCP連接配接，TCP三向交握

1. 由浏覽器發起，告訴伺服器，我要發送請求了 （在嗎？）
2. 由伺服器發起，告訴浏覽器，我準備接收了，你趕緊發送吧 （又幹啥，麻溜的）
3. 由浏覽器發起，告訴伺服器，我馬上就發送了，你準備接收吧 （幫我查點東西，我現在拿給你看）

3. 發送請求

• 發送請求封包，HTTP協定的通信内容 （您看，就是這些）

4. 接受響應

• 接收響應封包 （查到了，拿去做事吧）

5. 渲染頁面

1. 遇見 HTML 标記，浏覽器調用HTML解析器解析成Token并建構DOM樹
2. 遇見 style/link 标記，浏覽器調用CSS解析器，處理CSS标記 并 建構CSSOM樹
3. 遇見 script 标記，調用javascript解析器，處理script代碼（綁定事件，修改DOM樹/CSSOM樹）
4. 将 DOM樹 和 CSSOM樹 合并成一個渲染樹
5. 根據渲染樹來計算布局，計算每一個節點的幾何資訊（布局）
6. 将各個節點顔色繪制到螢幕上（渲染）

   注意： 這幾個步驟不一定是按順序執行的，如果DOM樹或CSSOM樹被修改了，可能會執行多次布局和渲染 往往頁面中這些步驟都會執行多次

6. 斷開連接配接，TCP四次揮手

1. 由浏覽器發起，告訴伺服器，我東西（請求封包）發送完了，你準備關閉吧
2. 由伺服器發起，告訴浏覽器，我東西（請求封包）接收完了，我準備關閉了，你也準備吧
3. 由伺服器發起，告訴浏覽器，我東西（響應封包）發送完了，你準備關閉吧
4. 由浏覽器發起，告訴伺服器，我東西（響應封包）接收完了，我準備關閉了，你也準備吧