面試題：輸入一個url位址到最終頁面渲染完成發生了什麼的思考

目錄

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

2、TCP連接配接：TCP三向交握

3、發送請求

4、接收響應

5、渲染頁面

6、斷開連接配接：TCP四次揮手（伺服器先關閉，浏覽器後關閉）

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

• 浏覽器DNS緩存
• 系統DNS緩存
• 路由器DNS緩存 
• 網絡營運商DNS緩存（移動、聯通、電信）

如果上面方式都未解析出IP位址，将會遞歸搜尋（例如未被解析的域名為blog.baidu.com)

第一步：在.com域名下查找DNS

第二步：baidu

第三步:  blog

前三步仍未找到，出錯了

2、TCP連接配接：TCP三向交握

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

第二次：由伺服器發起，告訴浏覽器我準備接收了，你快點發送吧

第三次：由浏覽器發起，告訴伺服器，我馬上就發了，你準備接收吧

3、發送請求

請求封包

4、接收響應

響應封包

5、渲染頁面

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

遇見style、link标記，浏覽器調用css解析器，處理css标記構成cssom樹

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

将dom樹和cssom樹合并成渲染樹，根據渲染樹計算每個節點的幾何資訊（布局）

将各個節點顔色繪制到頁面上（渲染）

注意：如果上面五個步驟不一定按照順序執行，如果dom樹或cssom被修改了，可能會執行多次布局和渲染，往往實際頁面開發時，這些步驟都會執行多次。

6、斷開連接配接：TCP四次揮手（伺服器先關閉，浏覽器後關閉）

第一次揮手：由浏覽器發起，告訴伺服器，我把東西(請求封包)發送完了 你準備關閉吧

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

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

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