1. 程式人生 > >一個頁面從輸入url到頁面載入完成究竟經歷了些什麼

一個頁面從輸入url到頁面載入完成究竟經歷了些什麼

本人經參考謝希仁著《計算機網路(第 5版)》、《HTTP權威指南》和網路上關於瀏覽器渲染原理的介紹,結合自己理解,整理出以下結論,如有不正確或者不完善之處歡迎指正:

當用戶在瀏覽器的位址列輸入要找的頁面的url後,如輸入http://www.tsinghua.edu.cn/chn/yxsz/index.html,具體發生了以下步驟:

1、瀏覽器向DNS伺服器請求解析www.tsinghua.edu.cn的IP地址;

具體來說:

瀏覽器呼叫解析程式,併成為DNS伺服器的一個客戶,把待解析域名放在DNS請求報文中,以UDP使用者資料報方式發給本地域名伺服器,(使用UDP是為了減少開銷)。本地域名伺服器在查詢域名後,把對應的IP地址放在響應報文中返回。

如果本地域名伺服器無法查詢到對應域名,那麼該域名伺服器就成為DNS中的另一個客戶,並向其他域名伺服器發出查詢請求。這種過程直到找到能夠回答該請求的域名伺服器為止。

2、DNS解析出清華大學伺服器對應的IP地址為166.111.4.100並將查詢結果告訴瀏覽器;

3、瀏覽器採用三次握手與伺服器建立TCP連線(在伺服器端IP地址是166.111.4.100,埠是80);

4、瀏覽器發出HTTP請求報文;

5、伺服器傳送HTTP響應報文;

無論請求報文和響應報文都分為三部分:起始行、頭部、主體部分。請求報文的起始行說明了要做些什麼,響應報文的起始行則說明發生了什麼。首部欄位向請求或者響應報文中新增一些附加資訊,他們是一些名/值對的列表。主體部分可選,它是HTTP真正要傳輸的內容。
伺服器在響應報文的主體部分攜帶了HTML程式碼,用於瀏覽器進行頁面渲染。

6、釋放TCP連線;

7、瀏覽器依據伺服器傳來的響應報文(主體部分)資料從上到下解析HTML程式碼,在<head>部分獲取到CSS,然後後開始渲染頁面;

如果link標籤引入的外部樣式表放在<body>底部,由於從上到下解析,一開始不會顯示元素樣式,直到解析到link部分的CSS才會重新渲染頁面;

如果網速較慢,html程式碼載入完成後而css還沒載入完的話,這會導致頁面沒有樣式而難以閱讀,所以不推薦這種方式。

8、當瀏覽器在HTML程式碼中發現對一些資源的引用時(如<img>標籤引用了一張圖片),瀏覽器向伺服器發出非同步請求獲取這些資源。此時瀏覽器不會等到資源下載完,而是繼續渲染後面的程式碼;

9、伺服器返回瀏覽器需要的資源,瀏覽器回過頭來重新渲染該部分程式碼;

10、當瀏覽器發現包含JavaScript程式碼的<script>標籤時,立即執行它;如果JavaScript指令碼命令改變前面的佈局或者樣式,瀏覽器不得不重新渲染這部分程式碼;

11、</html>頁面渲染完畢。