1.用戶輸入網址，瀏覽器發(fā)起DNS查詢請求

用戶訪問網頁，DNS服務器（域名解析系統(tǒng)）會根據用戶提供的域名查找對應的IP地址。 域名解析服務器是基于UDP協議實現的一個應用程序，通常通過監(jiān)聽53端口來獲取客戶端的域名解析請求。DNS查找過程如下： 瀏覽器緩存 –?瀏覽器會緩存DNS記錄一段時間。 有趣的是，操作系統(tǒng)沒有告訴瀏覽器儲存DNS記錄的時間，這樣不同瀏覽器會儲存?zhèn)€自固定的一個時間（2分鐘到30分鐘不等）。

系統(tǒng)緩存?– 如果在瀏覽器緩存里沒有找到需要的記錄，瀏覽器會做一個系統(tǒng)調用（windows里是gethostbyname）。這樣便可獲得系統(tǒng)緩存中的記錄。

路由器緩存?– 接著，前面的查詢請求發(fā)向路由器，它一般會有自己的DNS緩存。

ISP DNS 緩存?– 接下來要check的就是ISP緩存DNS的服務器。在這一般都能找到相應的緩存記錄。

遞歸搜索?– 你的ISP的DNS服務器從跟域名服務器開始進行遞歸搜索，從.com頂級域名服務器到Facebook的域名服務器。一般DNS服務器的緩存中會有.com域名服務器中的域名，所以到頂級服務器的匹配過程不是那么必要了。

2、建立TCP連接 瀏覽器通過DNS獲取到web服務器真的IP地址后，便向web服務器發(fā)起tcp連接請求，通過TCP三次握手建立好連接后，瀏覽器便可以將HTTP請求數據通過發(fā)送給服務器了。 ? 3、瀏覽器向 web 服務器發(fā)送一個 HTTP 請求 HTTP請求是一個基于TCP協議之上的應用層協議——超文本傳輸協議。一個http事務由一條(從客戶端發(fā)往服務器的)請求命令和一個(從服務器發(fā)回客戶端的)響應結果組成。 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、發(fā)送響應數據給客戶端

Web服務器通常通過監(jiān)聽80端口，來獲取客戶端的HTTP請求。與客戶端建立好TCP連接后，web服務器開始接受客戶端發(fā)來的數據，并通過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元素及屬性節(jié)點組成，樹的根是document對象。

（2）瀏覽器發(fā)送獲取嵌入在HTML中的對象

加載過程中遇到外部css文件，瀏覽器另外發(fā)出一個請求，來獲取css文件。遇到圖片資源，瀏覽器也會另外發(fā)出一個請求，來獲取圖片資源。這是異步請求，并不會影響html文檔進行加載。

但是當文檔加載過程中遇到js文件，html文檔會掛起渲染（加載解析渲染同步）的線程，不僅要等待文檔中js文件加載完畢，還要等待解析執(zhí)行完畢，才可以恢復html文檔的渲染線程。

（3）css解析（parser Render Tree）

瀏覽器下載css文件，將css文件解析為樣式表對象，并用來渲染dom tree。該對象包含css規(guī)則，該規(guī)則包含選擇器和聲明對象。

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

（4）js解析

瀏覽器UI線程：單線程，大多數瀏覽器（比如chrome）讓一個單線程共用于執(zhí)行javascrip和更新用戶界面。

js阻塞頁面：瀏覽器里的http請求被阻塞一般都是由js所引起，具體原因是js文件在下載完畢之后會立即執(zhí)行，而js執(zhí)行時候會阻塞瀏覽器的其他行為，有一段時間是沒有網絡請求被處理的，這段時間過后http請求才會接著執(zhí)行，這段空閑時間就是所謂的http請求被阻塞。

js阻塞原因：之所以會阻塞UI線程的執(zhí)行，是因為js能控制UI的展示，而頁面加載的規(guī)則是要順序執(zhí)行，所以在碰到js代碼時候UI線程會首先執(zhí)行它

轉載于:https://www.cnblogs.com/wpshan/p/6282061.html

總結

以上是生活随笔為你收集整理的网页解析的全过程(输入url到展示页面)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。