瀏覽器載入渲染網頁過程解析 (轉)

標籤：c   ext   http   color   a   get   

瀏覽器的工作機制，一句話概括起來就是：web瀏覽器與web伺服器之間通過HTTP協議進行通訊的過程。所以，C/S之間握手的協議就是HTTP協議。瀏覽器接收完畢開始渲染之前大致過程如下：

 

 

從瀏覽器地址欄的請求連結開始，瀏覽器通過DNS解析查到網域名稱映射的IP地址，成功之後瀏覽器端向此IP地址取得串連，成功串連之後，瀏覽器端將請 求頭資訊 通過HTTP協議向此IP地址所在伺服器發起請求，伺服器接受到請求之後等待處理，最後向瀏覽器端發迴響應，此時在HTTP協議下，瀏覽器從伺服器接收到 text/html類型的代碼，瀏覽器開始顯示此html，並擷取其中內嵌資源地址，然後瀏覽器再發起請求來擷取這些資源，並在瀏覽器的html中顯示。

離我們最近並能直接顯示一個完整通訊過程的工具就是Firebug了，看:

 

 

其中黃色的tips浮層告訴了我們”colorBox.html”從發起請求到關閉串連整個過程中每個環節的時間長度（網域名稱解析 -> 建立串連 -> 發起請求 -> 等待響應 -> 接收資料），點擊該請求，可以獲得HTTP的headers資訊，包含回應標頭資訊與要求標頭資訊，如：

//回應標頭資訊 HTTP/1.1 304 Not Modified Date: Wed, 02 Mar 2011 08:20:06 GMT Server: Apache/2.2.4 (Win32) PHP/5.2.1 Connection: Keep-Alive Keep-Alive: timeout=5, max=100 Etag: "1e483-1324-a86f5621"

//要求標頭資訊 GET /Docs/eva/api/colorBox.html HTTP/1.1 Host: ued.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-CN; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: zh-cn,zh;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: GB2312,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Connection: keep-alive Referer: http://ued.com/Docs/ If-Modified-Since: Thu, 17 Feb 2011 10:14:07 GMT If-None-Match: "1e483-1324-a86f5621" Cache-Control: max-age=0

另外，ajax非同步請求同樣遵循HTTP協議，原理大同小異。

瀏覽器載入顯示html頁面內容的順序

我們經常看到瀏覽器在載入某個頁面時,部分內容先顯示出來,又有些內容後顯示。那麼瀏覽器載入顯示html究竟是按什麼順序進行的呢?

其實瀏覽器載入顯示html的順序是按下面的順序進行的：
1、IE下載的順序是從上到下，渲染的順序也是從上到下，下載和渲染是同時進行的。
2、在渲染到頁面的某一部分時，其上面的所有部分都已經下載完成（並不是說所有相關聯的元素都已經下載完）。
3、如果遇到語義解釋性的標籤嵌入檔案（JS指令碼，CSS 劍 敲創聳盜E的下載過程會啟用單獨串連進行下載。
4、並且在下載後進行解析，解析過程中，停止頁面所有往下元素的下載。
5、樣式表在下載完成後，將和以前下載的所有樣式表一起進行解析，解析完成後，將對此前所有元素（含以前已經渲染的）重新進行渲染。
6、JS、CSS中如有重定義，後定義函數將覆蓋前定義函數。

Firefox處理下載和渲染順序大體相同，只是在細微之處有些差別，例如：iframe的渲染

如果你的網頁比較大，希望部分內容先顯示出來，粘住瀏覽者，那麼你可以按照上面的規則合理的布局你的網頁，達到預期的目的。

 JS的載入
不能並行下載和解析（阻塞下載）
當 引用了JS的時候，瀏覽器發送1個jsrequest就會一直等待該request的返回。因為瀏覽器需要1個穩定的DOM樹結構，而JS中很有可能有代 碼直接改變了DOM樹結構，比如使用 document.write 或 appendChild,甚至是直接使用的location.href進行跳轉，瀏覽器為了防止出現JS修改DOM樹，需要重新構建DOM樹的情況，所以 就會阻塞其他的下載和呈現.

 

　　為了更清楚的顯示頁面元素的載入順序，動手寫了一個程式，程式對頁面中的每個元素都延遲10秒。

程式的位置在見附件。

首先查看TestHtmlOrder.aspx這個頁面，使用HttpWatcher來檢測頁面元素的載入。

從下面的圖中可以看到載入順序。

 

IE首先載入了首頁面TestHtmlOrder.aspx，

下載了首頁面後，頁面首先顯示的是“紅色劍靈”、“藍色劍靈”幾個字，但此時顯示的是只是黑色字型，沒有樣式，因為樣式還沒有下載下來。

接下來頁面中的標籤是JS標籤，屬於嵌入檔案，因此IE需要將其下載下來。這有兩個檔案，雖然IE同時能夠和WebServer建立兩個連結，但是此時並沒有使用兩個串連，而是使用一個串連，在下載完成後，接下來才下載另外一個檔案。

究其原因，是因為JS包含了文法定義，在第二個檔案裡面的函數可能用到了第一個檔案裡面的變數和函數，IE沒有辦法判斷，或者需要很耗時的判斷，才 能判斷檔案下載的先後順序。而在解釋方面，IE對JS檔案是下載一個，解釋一個(可以執行檔案TestJsOrder2.aspx)。如果先下載的是第二 個檔案，此時就會發生解釋錯誤。因此需要開發人員自己在放置JS檔案位置時，按先後順序放好，IE依次下載進行解釋。後面的函數覆蓋前面的函數定義

在下載完成後，我們看到helloWorld，helloworld2，開始順序執行。而此時字型的樣式表和圖片仍然沒有下載下來。

在helloWorld，helloWorld2執行過程時，此時頁面停留在函數執行的中斷點(alert部分)。此時IE並沒有去下載CSS的檔案。由此說明JS函數的執行會阻塞IE的下載。

接下來我們看到CSS檔案的下載也是使用了一個串連，也是串列下載。其串列下載的原因和JS串列下載原因是一樣的。

在兩個CSS檔案下載過程中，我們看到“紅色劍靈”，“藍色劍靈”依次變為紅色和藍色，兩者顏色的轉換時間相差在10秒，說明樣式檔案和JS檔案一樣是下載完一個解析一個的。

現在轉到TestCssOrder.aspx看一下，可以看到 開始時“紅色劍靈”，“紅色強壯劍靈”，顯示為紅色，過了10秒“藍色劍靈”顯示為藍色，再過10秒，“紅色強壯劍靈”字型變粗了，同時“紅色強壯劍靈 2”開始出現。在剛開始“紅色劍靈”，“紅色強壯劍靈”顯示紅色時，第三個樣式還沒有下載下來，此時IE使用已經下載到樣式對上面的元素渲染了一遍，此時 雖然“紅色劍靈”，“紅色強壯劍靈”樣式定義不同，但是顯示效果一樣。第三個檔案下載後，此時IE又重新對“紅色強壯劍靈”渲染了一遍，此時其變為加粗， 以上所有的檔案載入並且渲染完成後，開始渲染下面的標籤“紅色強壯劍靈2”

有一點需要證明：在IE使用樣式對標籤進行渲染時，是不是停止了其他頁面元素的下載?原來我想通過加長渲染時間(利用濾鏡，將標籤元素數目增大)來檢測，不過沒有驗證成功。只是從JS函數的執行推斷CSS的渲染也是如此。

接下來看到的是圖片檔案下載，此時看到的是兩個圖片同時開始下載，而且是下載完成後，立即在頁面上開始顯示，直到所有的圖片下載完成。

註：一個測試檔案在網路傳輸上所花費時間的辦法。

首先需要明白檢測中w ait值的意義：wait = 伺服器所花時間 + 網路時間

伺服器所花時間我們可以用Thread.Sleep(10000);來讓其休息10s，

比如這個：

 

由此大概可以計算出 10.002-10 = 0.002秒，這就是大概在網路上所花的時間。