網頁解析的全過程(輸入url到展示頁面)

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事務由一條(從客戶端發往服務器的)請求命令和一個(從服務器發回客戶端的)響應結果組成。
GET http://www.cricode.com/ HTTP/1.1
Host: www.cricode.com
Connection: keep-alive
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Accept-Encoding: gzip,deflate,sdch
Accept-Language: zh-CN,zh;q=0.8

  

 
4、發送響應數據給客戶端

Web服務器通常通過監聽80端口,來獲取客戶端的HTTP請求。與客戶端建立好TCP連接後,web服務器開始接受客戶端發來的數據,並通過HTTP解碼,從接受到的網絡數據中解析出請求的url信息以前其他諸如Accept-Encoding、Accept-Language等信息。Web服務器根據HTTP請求頭的信息,得到響應數據返回給客戶端。一個典型的HTTP響應頭數據報如下:

HTTP/1.1 200 OK
Date: Fri, 24 Oct 2014 13:55:18 GMT
Server: Apache
X-Powered-By: PHP/5.4.32
Keep-Alive: timeout=5, max=10000
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8
a0f6
<</span>!DOCTYPE HTML>
<</span>html>
<</span>head>
<</span>meta charset="UTF-8">
<</span>meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8">
<</span>meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<</span>title><</span>/title>
<</span>body class="home"><</span>/body>
<</span>/html>

  

至此,一個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線程會首先執行它

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章