1. 程式人生 > >從輸入URL到頁面展示

從輸入URL到頁面展示

當我們輸入 URL 並按回車後,瀏覽器會對 URL 進行檢查,首先判斷URL格式,比如是ftp http ed2k等等,我們這裡假設這個URL是http://hellocassie.cn,那麼瀏覽器會對這個 URL 進行安全檢查,然後瀏覽器核心會先檢視快取,再決定是發起請求,下載頁面,還是從快取獲取頁面,如果是第一次訪問,這時候還沒有快取,所以會去向伺服器發起一個網路請求。

clipboard.png

下載頁面

首先我們要確定伺服器的網路地址,才能把請求發給它,所以要把這個URL轉換成對應的IP地址,瀏覽器會依次從瀏覽器快取,系統快取,路由器快取,本地DNS伺服器進行一個遞迴查詢,如果本地DNS伺服器也沒有對應的IP地址的記錄,這時候它會把請求發至13臺根域名伺服器,根域名伺服器收到請求後會判斷這個域名是誰來授權管理,然後返回一個負責該頂級域名伺服器的一個IP。本地DNS伺服器收到IP資訊後,再去聯絡頂級域名伺服器。頂級域名伺服器收到請求後,如果自己無法解析,再返回下一級域名伺服器的IP,進行這樣一個迭代查詢之後,一直到子域名伺服器。

clipboard.png

這個時候有兩種情況,第一種是子域名伺服器返回了這個URL對應的IP地址,第二種情況是經過了CDN排程,如果目標網站使用了CDN服務,則需要在CDN服務商的平臺設定相應的CNAME記錄,這個記錄是CDN服務廠商的一個DNS伺服器的域名,子域名伺服器會返回這個CNAME記錄,本地DNS伺服器得到這個記錄後,會向CDN服務廠商的DNS伺服器查詢,然後CDN服務廠商的DNS伺服器返回CDN服務廠商的一臺GSLB裝置(全域性負載均衡裝置)的IP,本地DNS伺服器攜帶自身的IP地址和要查詢的域名向GSLB裝置發起請求,GSLB裝置根據IP,以及要查詢的域名,選擇一臺使用者所屬區域的區域負載均衡裝置,區域負載均衡裝置根據一定的演算法和策略,會向GSLB裝置返回一個最適合的CDN節點的IP地址,比如說返回一個距離使用者最近的CDN節點,因為CDN伺服器快取了網站的源伺服器的資料,而且會像源伺服器一樣,響應使用者的請求. 而且它離使用者更近,所以能獲得更快的響應速度。最後本地DNS伺服器拿到這個CDN節點的IP地址。

clipboard.png

得到IP後,會建立TCP連線,如果是https開頭的URL,還會建立SSL連線,進行一個請求證書,生成對話金鑰的過程。然後開始進行HTTP請求,瀏覽器會先生成一個HTTP資料包,包含這次請求的資訊,主要是請求方法、請求的說明和請求附帶的資料,這個HTTP資料包經過傳輸層,頭部加入雙方的埠資訊,被封裝成一個TCP資料包,然後經過網路層,頭部加入雙方的IP地址資訊,被封裝成一個IP資料包,然後經過資料鏈路層,頭部設定雙方的MAC地址,封裝成乙太網資料包,最後變成二進位制資料,傳送到伺服器。

clipboard.png

clipboard.png

clipboard.png

然後伺服器作出響應,返回一個HTTP報文給瀏覽器,這個HTTP報文包含了狀態行,訊息報頭,訊息正文(就是HTML)。

快取獲取頁面

然後我們再看第二種情況,如果本地有快取,瀏覽器會先判斷快取是否過期,通過Expires和Cache-Control欄位來判斷是否命中強制快取,Expires是伺服器返回該請求結果快取的到期時間,Cache-Control的max-age會返回一個相對時間,因為無法確定客戶端的時間是否與服務端的時間同步,所以同時存在時,Cache-Control的優先順序更高。如果強制快取失效,進行協商快取過程,瀏覽器攜帶快取標識向伺服器發起請求,由伺服器根據快取標識決定是否使用本地快取。

clipboard.png

渲染頁面

在解析HTML的過程中,開始構建DOM樹,當遇到外鏈資源比如CSS/JS,瀏覽器會並行下載 CSS 和 JavaScript,CSS下載時非同步,不會阻塞瀏覽器構建DOM樹,但是會阻塞渲染,JS會阻塞HTML的解析,需等待指令碼下載完成並執行後才會繼續解析HTML,而且因為 JS 可能會查詢 CSSOM,所以必須在下載 CSS 檔案之前將其阻止,然後才能執行 JavaScript。img圖片類資源會非同步下載,不會阻塞解析,下載完畢後直接用圖片替換原有src的地方。

clipboard.png

然後合併DOM樹和CSSOM樹,生成render樹,從 DOM 樹的根節點開始遍歷每個可見節點,忽略指令碼標記、元標記、display: none的節點,對於每個可見節點,為其找到適配的 CSSOM 規則並應用它們。然後開始佈局,從渲染樹的根節點開始進行遍歷,計算每個節點在網頁的確切位置和大小。佈局完成後,將渲染樹轉換成螢幕上的畫素,顯示頁面。

clipboard.png