1. 程式人生 > 其它 >輸入url到頁面渲染完成,發生了什麼?

輸入url到頁面渲染完成,發生了什麼?

從輸入url到頁面渲染完成,經歷了以下幾個步驟:

1.DNS解析,將域名解析為IP地址
- 瀏覽器dns快取
- 系統dns快取
- 路由器dns快取
- 網路運營商dns快取
- 遞迴搜尋
2.TCP連線,TCP三次握手
- 第一次握手,由瀏覽器發起,告訴伺服器我要傳送請求了
- 第二次握手,由伺服器發起,告訴瀏覽器我準備接受了,你趕緊傳送吧
- 第三次握手,由瀏覽器發起,告訴伺服器,我馬上就發了,準備接受吧
3.傳送請求
- 請求報文:HTTP協議的通訊內容
4.接受響應
- 響應報文
5.渲染頁面
- 遇見html標記,瀏覽器呼叫html解析器解析成token並構建dom樹
- 遇見style/link標記,瀏覽器呼叫css解析器,處理css標記並構建cssom樹

- 遇見script標記,呼叫JavaScript解析器,處理script程式碼
- 將dom樹和cssom樹合成一個渲染樹
- 根據渲染樹來計算佈局,計算每個節點的幾何資訊(佈局)
- 將各個節點顏色繪製到螢幕上(渲染)

注意:這五個步驟不一定按照順序執行,如果dom樹和cssom樹被修改了,可能會執行多次佈局和渲染。
往往實際頁面中,這寫步驟都會執行多次的。
6.斷開連線,TCP四次揮手
- 第一次揮手:由瀏覽器發起的,告訴伺服器,我東西法傳送完了(請求報文),你準備關閉吧
- 第二次揮手:由伺服器發起,告訴瀏覽器,我東西接受完畢了(請求報文),我準備關閉了,你也準備吧
- 第三次揮手:由伺服器發起,告訴瀏覽器,我東西傳送完了(響應報文),你準備關閉吧

- 第四次揮手:由瀏覽器發起,告訴伺服器,我東西接受完了(響應報文),我準備關閉了,你也準備吧