網頁解析的全過程

1、使用者輸入網址，瀏覽器發起DNS查詢請求

使用者訪問網頁，DNS伺服器（域名解析系統）會根據使用者提供的域名查詢對應的IP地址

域名解析伺服器是基於UDP實協議實現的一個應用程式，通常通過監聽53埠來獲取客戶端的域名解析請求。DNS查詢過過程如下：

瀏覽器快取-瀏覽器會快取DNS記錄一段時間。有趣的是作業系統沒有告訴瀏覽器儲存DNS記錄的時間，這樣不同瀏覽器會記錄他們各自固定的一個時間（2分鐘到30分鐘不等）

系統快取-如果在瀏覽器快取中沒有找到需要的記錄，瀏覽器會做一個系統呼叫（gethostbyname）。這樣便可獲得系統快取中的記錄。

路由器快取-接著前面的查詢請求發向路由器，他一般會有自己的DNS快取

ISP DNs快取-接下來要check的就是ISP快取DNS的伺服器。在這一般都能找到相應的快取記錄。

遞迴搜尋-你的ISP的DNS伺服器從域名伺服器開始進行遞迴搜尋，從com頂級域名伺服器到Facebook的域名伺服器。一般DNS伺服器的快取中會有.com域名伺服器中的域名，所以到頂級伺服器的匹配過程不是那麼必要了。

2、建立TCP連線

瀏覽器通過DNS獲取到web伺服器真的IP地址後，便向伺服器發起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元素及屬性節點組成，樹的根是docunment物件。

（2）瀏覽器傳送獲取嵌入在html中的物件

載入過程中遇到外部css檔案，瀏覽器另外發出一個請求，來獲取css檔案。遇到圖片資源，瀏覽器也會另發出一個請求，來獲取圖片資源。這是非同步請求，並不會影響html文件進行載入。

但是當文件載入過程中遇到js檔案，html文件會掛起渲染的執行緒，不僅要等待文件中的js檔案載入完畢，還要等待解析執行完畢，才能恢復html文件的渲染執行緒。

（3）css解析

瀏覽器下載css檔案，將css檔案解析為樣式表物件，並來用渲染dom tree。該物件包含css規則，該規則包含選擇器和宣告物件。

css元素遍歷的順序，是從樹的低端向上遍歷。

（4）js解析

瀏覽器UI執行緒：單執行緒，大多數瀏覽器讓一個單執行緒共用於執行JavaScript和更新使用者介面

js阻塞頁面：瀏覽器裡的http請求被阻塞一般都是由js所引起，具體原因是js檔案在下載完畢之後會立即執行，而js執行時候會阻塞瀏覽器的其他行為，有一段時間是沒好網路請求被處理的，這段空閒時間就是所謂的http請求被阻塞。

js被阻塞的原因：之所以會阻塞U執行緒的執行，是因為js能控制UI的展示，而頁面載入的規則是要順序執行，所以在碰到js程式碼時候UI執行緒會首先執行他。