昨天晚上寫了一篇關於瀏覽器的渲染過程的隨筆，但只是通過一小段代碼解釋了一下，並沒有通過瀏覽器測試，說服力不夠，而且還有很多不完善的地方，今天在瀏覽器中測試了一下，並把測試的結果分享給大家，測試過程可能有點亂，希望大家理解。
測試瀏覽器：Chrome v24.0.1312.52 m，Firefox v18.0，Opera v12.12。
在WebKit核心中，網頁在顯示的時候會有一個解析器（Parser）去解析html文檔，然後去產生渲染樹（Render Tree），最終渲染出頁面。這是在一個線程中進行的，所以兩者不會同時進行。
我分為了以下兩種情況，並分別在不同的瀏覽器中進行測試。
測試的結果是這樣的，在chrome中，樣式檔案的位置會影響到圖片的下載時間，而在另外兩個瀏覽器中這兩種情況沒有區別。下面是詳細的測試過程。
測試一：樣式檔案在head裡，其他的連個指令檔一個在body的開始部分，一個在body的底部。
測試的代碼：
1 <!doctype html> 2 <html> 3 <head> 4 <title>測試頁面</title> 5 <link rel="stylesheet" type="text/css" href="example.aspx?sleep=3" /> 6 </head> 7 <body> 8 <div> 9 Hi, there!</div>10 11 <script type="text/javascript">12 document.write("<script src='other.aspx?sleep=5'></scr" + "ipt>");13 </script>14 15 <div>16 Hi, again!</div>17 <img src="images/marx.jpg" alt="Marx" />18 <img src="images/engels.jpg" alt="Engels" />19 <img src="images/Lenin.jpg" alt="Lenin" />20 21 <script src="last.aspx" type="text/javascript"></script>22 23 </body>24 </html>
1、在Chrome中的測試情況
我在瀏覽器中開啟頁面後，迅速將網頁截了一張圖，如下所示（點擊可以查看大圖，下同）：
從中可以看出，test.htm 文檔已經載入完成，頁面上還沒有顯示任何東西，example.css處於pending狀態，但是，位於最底部的last.js卻載入完成了。這說明chrome進行了預先載入，提前下載，放在了瀏覽器的緩衝裡了。雖然last.js已經載入完成，但是還沒有被執行，因為他前面的樣式檔案會阻塞指令碼的執行。
接下來，當example.css載入完成後，Hi there!顯示在了螢幕上，瀏覽器的如下所示：
通過網路請求可以看出，example.css已經載入完成，other.js處於pending狀態，但此時script標籤底下的三張圖片已經下載下來了，這是由瀏覽器的積極式載入的功能所致。但是由於瀏覽器的渲染被other.js指令碼阻塞住，所以，這三張圖片連同它上面的“Hi again”都不會顯示出來。另外，此時last.js中的代碼還沒有執行。
接下來，當other.js載入完成之後，瀏覽器就會構建出渲染樹，顯示出“Hi again”，並顯示出圖片。由於last.js先前已經被下載，所以last.js會立即執行。整個渲染過程完成。如所示：
由此看出，Chrome會積極式載入body中的指令碼資源（樣式檔案沒有測試），由JavaScript指令碼動態載入的JS不會影響圖片檔案的下載，但是會影響它下面圖片的渲染。
2、Firefox中的測試結果
在Firefox瀏覽中開啟頁面後迅速，如下所示：
和在Chrome中有很明顯的不同，"Hi there!"，已經顯示在了頁面上，但是背景色是白色，說明此時樣式檔案還沒有下載下來。而在Chrome中是不會顯示的，要等到樣式檔案載入完成。
接下來，當整個頁面載入完成之後，如下所示：
從請求的瀑布流中可以看出，和Chrome類似，瀏覽器對last.js進行了預先載入，和Chrome中不同的是，Firefox沒有對圖片進行預先載入，而是等到other.js載入完成之後再進行的載入。
Firefox中，樣式檔案並沒有影響文檔的渲染（最典型的現象就是，網頁一開始顯示的很亂，沒有樣式，當樣式檔案下載下來之後就顯示正常了），在body中，由JavaScript動態載入的JS檔案會阻塞它後面的圖片的下載。
3、在Opera瀏覽器中
經過在Opera中測試，發現Opera瀏覽器比較“守規矩”，所有的資源都是按順序載入的，並沒有出現所謂的積極式載入，下面是一張總的：
Opera中，樣式檔案會阻塞頁面的渲染，這和Chrome類似，但是，有Opera的請求瀑布流可以看出，頁面中的所有的資源都是按部就班的載入的，other.js提前於last.js載入。沒有預先載入。
測試二、樣式檔案在body的開始部分，指令檔的位置和測試一的一樣。
1 <!doctype html> 2 <html> 3 <head> 4 <title>測試頁面</title> 5 </head> 6 <body> 7 <link rel="stylesheet" type="text/css" href="example.aspx?sleep=3" /> 8 <div> 9 Hi, there!</div>10 11 <script type="text/javascript">12 document.write("<script src='other.aspx?sleep=5'></scr" + "ipt>");13 </script>14 15 <div>16 Hi, again!</div>17 <img src="images/marx.jpg" alt="Marx" />18 <img src="images/engels.jpg" alt="Engels" />19 <img src="images/Lenin.jpg" alt="Lenin" />20 21 <script src="last.aspx" type="text/javascript"></script>22 23 </body>24 </html>
經過測試，發現在Firefox和Opera中，結果和測試一的一樣，而在Chrome中稍微有些不同，在測試一中，圖片要等到head中樣式檔案載入完之後才會下載，但是測試二中會和樣式檔案並行下載，如：
總結：
預先載入確實是存在的，但是在Opera中沒有發現；Chrome的圖片可以和body中的樣式檔案並行下載，但是不能和head中樣式檔案並行下載。指令碼的執行要在它前面的樣式檔案載入完之後。Chrome和Opera中，未載入完的資源會阻塞它後面元素的渲染，而Firefox不會。測試結果可能和瀏覽器版本有關。
看完這些，大家是不是覺得有些亂了，我想儘可能的表達明白，但是限於我水平有限，只能做到這了，不妥之處希望大家指出，大家也可以親自做一下實驗看看。
相關連結：
js和css的循序關聯性
JS 和 CSS 的位置對其他資源載入順序的影響
How WebKit Works
（完）^_^
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
