一直沒有意識到HTML頁面的元素加載順序有什麼重要性，至多在操作DOM對象的時候注意把DOM對象寫在腳本前面。
最近研究網站首頁的優化，發現加載順序確實有很多說道，對網頁的加載速度，用戶體驗的好壞有較大的影響。索性做了幾個測試頁面，用HttpWatch和FireBug做了簡單的研究。
頁面加載，除了頁面文件本身，其餘加載的主要元素就是圖片、Flash、Silverlight、多媒體、外嵌腳本和CSS以及iframe。其中圖片無疑是最常見的元素。所以以下的測試研究基本都是以圖片爲主，其餘的元素其實情況和圖片也基本類似了。另外考慮Div是趨勢和主流，所以大部分採用了Div佈局，只在最後做對比分析的時候，使用了Table佈局。
測試環境：IE7 ，Firefox，Windows2003。
1、首先是最簡單的Div羅列：
代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>測試圖片加載順序</title>
</head>
<body>
<div id="div1"><img src="images/Div1.jpg" /></div>
<div id="div2"><img src="images/Div2.jpg" /></div>
<div id="div3"><img src="images/Div3.jpg" /></div>
<div id="div4"><img src="images/Div4.jpg" /></div>
<div id="div5"><img src="images/Div5.jpg" /></div>
<div id="div6"><img src="images/Div6.jpg" /></div>
<div id="div7"><img src="images/Div7.jpg" /></div>
<div id="div8"><img src="images/Div8.jpg" /></div>
<div id="div9"><img src="images/Div9.jpg" /></div>
<div id="div10"><img src="images/Div10.jpg" /></div>
<div id="div11"><img src="images/Div11.jpg" /></div>
<div id="div12"><img src="images/Div12.jpg" /></div>
</body>
</html>
在頁面中放置了12個Div，每個Div中放置一個9k的圖片，測試結果如下：
IE7+HttpWatch：
FF3.0+FireBug:
結論：
從兩張圖可以看出，在IE和FF中，圖片的加載順序和它們的出現順序是一致的，當然，並不僅僅是因爲它們分別包含在獨立的Div中，即使嵌套的Div，比如:
<div id="div1">
<img src="images/Div1.jpg" />
<div id="div2">
<img src="images/Div2.jpg" />
</div>
</div>
圖片的加載也只和圖片的Img標籤出現順序相關。而且所有圖片的下載都在頁面文件下載完成之後進行。
另外重要的一點則是，在IE中，默認TCP連接數是10，但有說法IE在同一域名下只能支持兩個併發連接，可能是因爲在內網下測試的緣故，沒有受這個限制。而在FF中，併發的連接數限制是5。從圖中可以看出，IE下有10張圖片同時連接下載，並在下載完成之後進行另兩張圖片的連接下載，FF與此類似，只是同時下載的是5張。
在頁面中使用較小的圖片可以更清楚的看到下載的隊列接續，而且404錯誤對順序也沒有影響：
IE7+HttpWatch：
FF3.0+FireBug:
flash和圖片的情況也基本一樣：
<div id="div1"><img src="images/Div1.jpg" /></div>
<div id="div2"><img src="images/Div2.jpg" /></div>
<div id="div3"><img src="images/Div3.jpg" /></div>
<div id="flashdiv1" >
<object type="application/x-shockwave-flash" width="878" height="199" data="images/flash1.swf"><param name="movie" value="images/flash1.swf" />
<param name="wmode" value="transparent" />
</object>
</div>
<div id="div4"><img src="images/Div4.jpg" /></div>
<div id="div5"><img src="images/Div5.jpg" /></div>
<div id="div6"><img src="images/Div6.jpg" /></div>
<div id="div7"><img src="images/Div7.jpg" /></div>
<div id="div8"><img src="images/Div8.jpg" /></div>
<div id="div9"><img src="images/Div9.jpg" /></div>
<div id="div10"><img src="images/Div10.jpg" /></div>
<div id="div11"><img src="images/Div11.jpg" /></div>
<div id="div12"><img src="images/Div12.jpg" /></div>
flash也被放於隊列中，順序加載了。
轉自:http://www.cnblogs.com/smjack/archive/2008/08/20/1272370.html#1795249