了解html頁面的渲染過程以備學(xué)習(xí)前端的性能優(yōu)化(續(xù))

發(fā)布時(shí)間：2013-01-13 15:02:29 作者：佚名

上一篇關(guān)于瀏覽器的渲染過程只是通過一小段代碼解釋了一下，并沒有通過瀏覽器測(cè)試，說服力不夠，而且還有很多不完善的地方，今天在瀏覽器中測(cè)試了一下，并把測(cè)試的結(jié)果分享給大家，感興趣的朋友可以了解下，希望可以幫助你們

昨天晚上寫了一篇關(guān)于瀏覽器的渲染過程的隨筆，但只是通過一小段代碼解釋了一下，并沒有通過瀏覽器測(cè)試，說服力不夠，而且還有很多不完善的地方，今天在瀏覽器中測(cè)試了一下，并把測(cè)試的結(jié)果分享給大家，測(cè)試過程可能有點(diǎn)亂，希望大家理解。

測(cè)試瀏覽器：Chrome v24.0.1312.52 m，F(xiàn)irefox v18.0，Opera v12.12。

在WebKit內(nèi)核中，網(wǎng)頁在顯示的時(shí)候會(huì)有一個(gè)解析器（Parser）去解析html文檔，然后去生成渲染樹（Render Tree），最終渲染出頁面。這是在一個(gè)線程中進(jìn)行的，所以兩者不會(huì)同時(shí)進(jìn)行。

我分為了以下兩種情況，并分別在不同的瀏覽器中進(jìn)行測(cè)試。

樣式文件在head里，其他的連個(gè)腳本文件一個(gè)在body的開始部分，一個(gè)在body的底部。樣式文件在body的開始部分，腳本文件的位置和上面的一樣。

測(cè)試的結(jié)果是這樣的，在chrome中，樣式文件的位置會(huì)影響到圖片的下載時(shí)間，而在另外兩個(gè)瀏覽器中這兩種情況沒有區(qū)別。下面是詳細(xì)的測(cè)試過程。

測(cè)試一：樣式文件在head里，其他的連個(gè)腳本文件一個(gè)在body的開始部分，一個(gè)在body的底部。

測(cè)試的代碼：

復(fù)制代碼

代碼如下:

<!doctype html>
<html>
<head>
<title>測(cè)試頁面</title>
<link rel="stylesheet" type="text/css" href="example.aspx?sleep=3" />
</head>
<body>
<div>
Hi, there!</div>

<script type="text/javascript">
document.write("<script src='other.aspx?sleep=5'></scr" + "ipt>");
</script>

<div>
Hi, again!</div>
<img src="images/marx.jpg" alt="Marx" />
<img src="images/engels.jpg" alt="Engels" />
<img src="images/Lenin.jpg" alt="Lenin" />

<script src="last.aspx" type="text/javascript"></script>

</body>
</html>

1、在Chrome中的測(cè)試情況

我在瀏覽器中打開頁面后，迅速將網(wǎng)頁截了一張圖，如下所示（點(diǎn)擊可以查看大圖，下同）：

從上圖中可以看出，test.htm 文檔已經(jīng)加載完成，頁面上還沒有顯示任何東西，example.css處于pending狀態(tài)，但是，位于最底部的last.js卻加載完成了。這說明chrome進(jìn)行了預(yù)加載，提前下載，放在了瀏覽器的緩存里了。雖然last.js已經(jīng)加載完成，但是還沒有被執(zhí)行，因?yàn)樗懊娴臉邮轿募?huì)阻塞腳本的執(zhí)行。

接下來，當(dāng)example.css加載完成后，Hi there!顯示在了屏幕上，瀏覽器的截圖如下所示：

通過網(wǎng)絡(luò)請(qǐng)求可以看出，example.css已經(jīng)加載完成，other.js處于pending狀態(tài)，但此時(shí)script標(biāo)簽底下的三張圖片已經(jīng)下載下來了，這是由瀏覽器的預(yù)先加載的功能所致。但是由于瀏覽器的渲染被other.js腳本阻塞住，所以，這三張圖片連同它上面的“Hi again”都不會(huì)顯示出來。另外，此時(shí)last.js中的代碼還沒有執(zhí)行。

接下來，當(dāng)other.js加載完成之后，瀏覽器就會(huì)構(gòu)建出渲染樹，顯示出“Hi again”，并顯示出圖片。由于last.js先前已經(jīng)被下載，所以last.js會(huì)立即執(zhí)行。整個(gè)渲染過程完成。如下圖所示：

由此看出，Chrome會(huì)預(yù)先加載body中的腳本資源（樣式文件沒有測(cè)試），由JavaScript腳本動(dòng)態(tài)加載的JS不會(huì)影響圖片文件的下載，但是會(huì)影響它下面圖片的渲染。

2、Firefox中的測(cè)試結(jié)果

在Firefox瀏覽中打開頁面后迅速截圖，如下所示：

和在Chrome中有很明顯的不同，"Hi there!"，已經(jīng)顯示在了頁面上，但是背景色是白色，說明此時(shí)樣式文件還沒有下載下來。而在Chrome中是不會(huì)顯示的，要等到樣式文件加載完成。

接下來，當(dāng)整個(gè)頁面加載完成之后，截圖如下所示：

從請(qǐng)求的瀑布流中可以看出，和Chrome類似，瀏覽器對(duì)last.js進(jìn)行了預(yù)加載，和Chrome中不同的是，火狐沒有對(duì)圖片進(jìn)行預(yù)加載，而是等到other.js加載完成之后再進(jìn)行的加載。

火狐中，樣式文件并沒有影響文檔的渲染（最典型的現(xiàn)象就是，網(wǎng)頁一開始顯示的很亂，沒有樣式，當(dāng)樣式文件下載下來之后就顯示正常了），在body中，由JavaScript動(dòng)態(tài)加載的JS文件會(huì)阻塞它后面的圖片的下載。

3、在Opera瀏覽器中

經(jīng)過在Opera中測(cè)試，發(fā)現(xiàn)Opera瀏覽器比較“守規(guī)矩”，所有的資源都是按順序加載的，并沒有出現(xiàn)所謂的預(yù)先加載，下面是一張總的效果圖：

Opera中，樣式文件會(huì)阻塞頁面的渲染，這和Chrome類似，但是，有Opera的請(qǐng)求瀑布流可以看出，頁面中的所有的資源都是按部就班的加載的，other.js提前于last.js加載。沒有預(yù)加載。

測(cè)試二、樣式文件在body的開始部分，腳本文件的位置和測(cè)試一的一樣。


復(fù)制代碼
代碼如下:

<!doctype html>
 <html>
 <head>
     <title>測(cè)試頁面</title>
 </head>
 <body>
     <link rel="stylesheet" type="text/css" href="example.aspx?sleep=3" />
     <div>
         Hi, there!</div>
 
     <script type="text/javascript">
         document.write("<script src='other.aspx?sleep=5'></scr" + "ipt>");
     </script>
 
     <div>
         Hi, again!</div>
     <img src="images/marx.jpg" alt="Marx" />
     <img src="images/engels.jpg" alt="Engels" />
     <img src="images/Lenin.jpg" alt="Lenin" />
 
     <script src="last.aspx" type="text/javascript"></script>
 
 </body>
 </html>

經(jīng)過測(cè)試，發(fā)現(xiàn)在火狐和Opera中，結(jié)果和測(cè)試一的一樣，而在Chrome中稍微有些不同，在測(cè)試一中，圖片要等到head中樣式文件加載完之后才會(huì)下載，但是測(cè)試二中會(huì)和樣式文件并行下載，如下圖：

總結(jié)：

預(yù)加載確實(shí)是存在的，但是在Opera中沒有發(fā)現(xiàn)；Chrome的圖片可以和body中的樣式文件并行下載，但是不能和head中樣式文件并行下載。腳本的執(zhí)行要在它前面的樣式文件加載完之后。Chrome和Opera中，未加載完的資源會(huì)阻塞它后面元素的渲染，而火狐不會(huì)。測(cè)試結(jié)果可能和瀏覽器版本有關(guān)。

看完這些，大家是不是覺得有些亂了，我想盡可能的表達(dá)明白，但是限于我水平有限，只能做到這了，不妥之處希望大家指出，大家也可以親自做一下試驗(yàn)看看。

（完）^_^