淺析瀏覽器輸入URL到頁面輸出執行流程

01-29

本文是飢人谷學員的博客，原載於：淺析瀏覽器輸入URL到頁面輸出執行流程

第一次用MarkDown語言寫博文並發布於眾,排版造成閱讀不便處請多多諒解。n

此題經常作為前端工程師面試題出現,重要性不言而喻,同時也體現一個優秀前端工程師應該掌握該點的必要性。才疏學淺，如有語義不通之處,望請指出，鄙人將在第一時間內修正。

URL(uniform resource location) : 統一資源定位符,用來作為互聯網上各種資源的標識符，可理解為身份證號。

URL的基本結構: 協議名稱 :// 伺服器所在域名或者IP地址 : 埠號 / 所要訪問的文件路徑

注意點:瀏覽器為了保證安全性,設定了跨域保護策略, 即窗口之間的通信必須滿足使用相同協議, 相同域或者子域, 相同埠, 因此深入理解URL各組成部分的含義有助於我們判斷兩個窗口之間是否能互相通信。

IP(Internet Protocol) :互聯網中設備間進行通信都要遵從的一種協議,它規定了每台設備都要有且唯一的IP地址,用來標識自己在互聯網中的地址。格式通常為http://XXX.XXX.XXX.XXX，不同網段下IP地址的範圍也不同。如有興趣者,請自行百度。

域名(Domain Name) :由於IP協議規定的純數字IP地址在日常中難以記憶,因此人們便產生使用更加常見,好記的字元標識設備的地址,域名應運而生。一個域名就是一個更加容易記憶的目標主機的地址標識符。例如:百度的域名就為百度一下，你就知道,實際對應的IP地址為119.75.217.109

DNS(Domain Name System): 互聯網中實際定位設備時還是使用IP地址來定位,因此產生了DNS,一種專門用來將域名轉換為IP地址的協議,提供該協議服務的伺服器就叫DNS伺服器。

HTTP(HyberText Transfer Protocol) : 超文本傳輸協議，萬維網中傳輸超文本都要遵從的一個協議,可以理解為HTML文件的傳輸就是靠它。

解答部分

用戶在瀏覽器端輸入URL後,瀏覽器先做第一件事情就是找到目標域名的IP地址,大致經過以下幾個階段:

1.查詢瀏覽器端的DNS緩存中是否有目標域名的相關信息。

2.查詢本機的host文件中是否有目標域名的信息。

3.查詢本地的路由器中的DNS緩存中是否有目標域名的信息。

4.查詢 ISP(互聯網服務提供商,例如電信,移動)中的DNS伺服器中是否有目標域名的信息。

5.查詢根域名伺服器是否有目標域名的信息,如果沒有,則傳至子域名伺服器進行查詢，以此遞推。

6.查詢到目標IP地址後,則開始建立 TCP 三次握手 ,與目標伺服器建立連接。

7.通過 HTTP 協議向目標主機發送請求。

1.伺服器端接受到請求後,根據路由將url中的地址進行重定向到伺服器程序上的目標文件。

2.此處涉及到後台的MVC架構,大致如下:

URL中的文件地址部分經過伺服器上的路由程序重定向到對應的控制器(controller)對象,控制器對象根據URL中指定的操作執行相關的邏輯並調用目標數據的模型(Model)對象,模型對象與資料庫交互完成目標操作後,控制器將模型中反饋的數據填充到視圖中。

3.視圖部分(通常是HTML頁面)作為HTTP響應發送到瀏覽器端。

1.瀏覽器開始解析目標HTML文件,執行流的順序為自上而下。

2.HTML解析器將HTML結構轉換為基礎的DOM(文檔對象模型),構建DOM樹完成後,觸發DomContendLoaded事件。

3.CSS解析器將CSS解析為CSSOM(層疊樣式表對象模型),一棵僅含有樣式信息的樹。

4.CSSOM和DOM開始合併構成渲染樹,每個節點開始包含具體的樣式信息。

5.計算渲染樹中個各個節點的位置信息,即布局階段。

6.將布局後的渲染樹顯示到界面上。

注:圖片等外部資源在解析階段被載入，載入完畢後觸發load事件