(轉)網頁解析的全過程(輸入url到展示頁面)
會用到哪些協議:
瀏覽器中輸入URL,首先瀏覽器要將URL解析為IP地址,解析域名就要用到DNS協議,首先主機會查詢DNS的快取,如果沒有就給本地DNS傳送查詢請求。DNS查詢分為兩種方式,一種是遞迴查詢,一種是迭代查詢。如果是迭代查詢,本地的DNS伺服器,向根域名伺服器傳送查詢請求,根域名伺服器告知該域名的一級域名伺服器,然後本地伺服器給該一級域名伺服器傳送查詢請求,然後依次類推直到查詢到該域名的IP地址。DNS伺服器是基於UDP的,因此會用到UDP協議。
得到IP地址後,瀏覽器就要與伺服器建立一個http連線。因此要用到http協議。http生成一個get請求報文,將該報文傳給TCP層處理。如果採用https還會先對http資料進行加密。TCP層如果有需要先將HTTP資料包分片,分片依據路徑MTU和MSS。TCP的資料包然後會發送給IP層,用到IP協議。IP層通過路由選路,一跳一跳傳送到目的地址。當然在一個網段內的定址是通過乙太網協議實現(也可以是其他物理層協議,比如PPP,SLIP),乙太網協議需要直到目的IP地址的實體地址,有需要ARP協議。
1.使用者輸入網址,瀏覽器發起DNS查詢請求
使用者訪問網頁,DNS伺服器(域名解析系統)會根據使用者提供的域名查詢對應的IP地址。
域名解析伺服器是基於UDP協議實現的一個應用程式,通常通過監聽53埠來獲取客戶端的域名解析請求。DNS查詢過程如下:
瀏覽器快取 – 瀏覽器會快取DNS記錄一段時間。 有趣的是,作業系統沒有告訴瀏覽器儲存DNS記錄的時間,這樣不同瀏覽器會儲存個自固定的一個時間(2分鐘到30分鐘不等)。
系統快取 – 如果在瀏覽器快取裡沒有找到需要的記錄,瀏覽器會做一個系統呼叫(windows裡是gethostbyname)。這樣便可獲得系統快取中的記錄。
路由器快取 – 接著,前面的查詢請求發向路由器,它一般會有自己的DNS快取。
ISP DNS 快取 – 接下來要check的就是ISP快取DNS的伺服器。在這一般都能找到相應的快取記錄。
遞迴搜尋 – 你的ISP的DNS伺服器從跟域名伺服器開始進行遞迴搜尋,從.com頂級域名伺服器到Facebook的域名伺服器。一般DNS伺服器的快取中會有.com域名伺服器中的域名,所以到頂級伺服器的匹配過程不是那麼必要了。
2、建立TCP連線
瀏覽器通過DNS獲取到web伺服器真的IP地址後,便向web伺服器發起tcp連線請求,通過TCP三次握手建立好連線後,瀏覽器便可以將HTTP請求資料通過傳送給伺服器了。
3、瀏覽器向 web 伺服器傳送一個 HTTP 請求
HTTP請求是一個基於TCP協議之上的應用層協議——超文字傳輸協議。一個http事務由一條(從客戶端發往伺服器的)請求命令和一個(從伺服器發回客戶端的)響應結果組成。
1 2 3 4 5 6 7 |
|
4、傳送響應資料給客戶端
Web伺服器通常通過監聽80埠,來獲取客戶端的HTTP請求。與客戶端建立好TCP連線後,web伺服器開始接受客戶端發來的資料,並通過HTTP解碼,從接受到的網路資料中解析出請求的url資訊以前其他諸如Accept-Encoding、Accept-Language等資訊。Web伺服器根據HTTP請求頭的資訊,得到響應資料返回給客戶端。一個典型的HTTP響應頭資料報如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
至此,一個HTTP通訊過程完成。web伺服器會根據HTTP請求頭中的Connection欄位值決定是否關閉TCP連結通道,當Connection欄位值為keep-alive時,web伺服器不會立即關閉此連線。(這一步一開始也許還會有重定向及瀏覽器跟蹤重定向地址等)。
5、瀏覽器解析http response
(1)html文件解析(DOM Tree)
在瀏覽器沒有完整接受全部HTML文件時,它就已經開始顯示這個頁面了。生成解析樹即dom樹,是由dom元素及屬性節點組成,樹的根是document物件。
(2)瀏覽器傳送獲取嵌入在HTML中的物件
載入過程中遇到外部css檔案,瀏覽器另外發出一個請求,來獲取css檔案。遇到圖片資源,瀏覽器也會另外發出一個請求,來獲取圖片資源。這是非同步請求,並不會影響html文件進行載入。
但是當文件載入過程中遇到js檔案,html文件會掛起渲染(載入解析渲染同步)的執行緒,不僅要等待文件中js檔案載入完畢,還要等待解析執行完畢,才可以恢復html文件的渲染執行緒。
(3)css解析(parser Render Tree)
瀏覽器下載css檔案,將css檔案解析為樣式表物件,並用來渲染dom tree。該物件包含css規則,該規則包含選擇器和宣告物件。
css元素遍歷的順序,是從樹的低端向上遍歷。
(4)js解析
瀏覽器UI執行緒:單執行緒,大多數瀏覽器(比如chrome)讓一個單執行緒共用於執行javascrip和更新使用者介面。
js阻塞頁面:瀏覽器裡的http請求被阻塞一般都是由js所引起,具體原因是js檔案在下載完畢之後會立即執行,而js執行時候會阻塞瀏覽器的其他行為,有一段時間是沒有網路請求被處理的,這段時間過後http請求才會接著執行,這段空閒時間就是所謂的http請求被阻塞。
js阻塞原因:之所以會阻塞UI執行緒的執行,是因為js能控制UI的展示,而頁面載入的規則是要順序執行,所以在碰到js程式碼時候UI執行緒會首先執行它