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

1. DNS解析：将域名位址解析為IP位址

• 浏覽器DNS緩存

• 系統DNS緩存

• 路由器DNS緩存

• 網絡運作商DNS緩存

• 遞歸搜尋： 例如 csdn.jinxiaozhaung.com

  .com 域名下查找DNS解析
   .jinxiaozhuang 域名下查找DNS解析
   .csnd 域名下查找DNS解析
    出錯了 
             

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

• 第一次握手，由浏覽器發起，告訴伺服器我要發送請求了

• 第二次握手，由伺服器發起，告訴浏覽器我準備接受了，你發送吧

• 第三次握手，由浏覽器發送，告訴伺服器，我馬上就發送了，準備接受

3. 發送請求

• 請求封包：HTTP協定的通訊内容

4. 接受請求

• 響應封包

5. 渲染頁面

• 遇見HTMl标記，浏覽器調用HTML解析器解析成Token并建構成dom樹

• 遇見style/link标記，浏覽器調用css解析器，處理css标記并建構cssom樹

• 遇見script标記，調用javascript解析器，處理script代碼（綁定事件，修改dom樹/cssom樹）

• 将dom樹和cssom樹合并成一個渲染樹

• 根據渲染樹來計算布局，計算每個節點的幾何資訊（布局）

• 将各個節點顔色繪制到螢幕上（渲染）

  注意以上步驟不一定按順序執行，如dom樹或者cssom樹被修改了，可能會執行多次布局和渲染
             

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

• 第一次揮手，由浏覽器發起，發送給伺服器，我東西發送完了（請求封包），你準備關閉

• 第二次揮手，由伺服器發起的，告訴浏覽器，我東西接受完了（請求封包），我準備關閉，你也準備關閉吧

• 第三次揮手，由伺服器發起的，告訴浏覽器，我東西發送完了（響應封包），你準備關閉吧

• 第四次揮手，由浏覽器發起的，告訴伺服器，我東西接收完了，我準備關閉了（響應封包），你也準備關閉吧