1. 程式人生 > 其它 >輸入URL網址到頁面渲染

輸入URL網址到頁面渲染

從一個url地址到最終頁面渲染完成,發生了什麼?
1.DNS解析:將域名地址解析為ip地址
-瀏覽器DNS快取
-系統DNS快取
-路由器DNS快取
-網路運營商DNS快取
-遞迴搜尋:blog.baidu.com
-.com域名下查詢DNS解析
-.baidu域名下查詢DNS解析
-blog域名下查詢DNS解析
-出錯了


2.TCP連線,三次握手
-第一次握手,由瀏覽器發起,告訴伺服器我要傳送請求了
-第二次握手:由伺服器發起的,告訴伺服器我準備接受了,你趕緊傳送吧
-第三次握手,由瀏覽器發起的,告訴伺服器,我馬上就發了,你準備接受吧



3.傳送請求
-請求報文:Http協議的通訊內容

4.接受響應
-響應報文

5.渲染頁面
-遇見html標記,瀏覽器呼叫HTML解析器解析成Token並構建成DOM樹
-遇見style/link標記,瀏覽器呼叫CSS解析器,處理CSS標記並構建CSSOM樹
-遇見script標記,呼叫javascript解析器,處理script程式碼(繫結事件,修改DOM樹......)
-將DOM樹和CSSOM樹合併成一個渲染樹
-根據渲染樹來計算佈局,計算每個節點的幾何資訊(佈局)
-將各個節點的顏色繪製到螢幕上(渲染)

注意:這個五個步驟不一定按照順序執行,如果DOM樹和CSSOM樹被修改了,可能會執行多次佈局和渲染,往往實際頁面中,這些步驟都會執行多次。




6.斷開連線:TCP四次揮手
-第一次揮手:由瀏覽器發起的,傳送給伺服器,我東西傳送完了(請求報文),你準備關閉
-第二次揮手,由伺服器發起的,告訴瀏覽器,我東西接收完了(請求報文),我準備關閉了,你也準備吧
-第三次揮手:由伺服器發起,告訴瀏覽器,我東西傳送完了(響應報文),你準備關閉吧
-第四次揮手:由瀏覽器發起,告訴伺服器,我東西接受完了(響應報文),你準備關閉吧,你也準備吧