以如下html為例：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <title> 外部JS文件阻塞圖片 </title> 6 <script src="https://95598.gd.csg.cn/javascript/jquery-1.7.2.min.js" type="text/Javascript"></script> 7 </head> 8 <body> 9 <img src="https://95598.gd.csg.cn/images/secImages/logo.gif" alt="" />10 <img src="https://95598.gd.csg.cn/images/secImages/header_city_turn.png" width="50" height="21" alt="切換城市" />11 <img src="https://95598.gd.csg.cn/images/secImages/customer_service.jpg" width="150" height="150" />12 <img src="https://95598.gd.csg.cn/activity/images/wel_act.jpg" alt="" />13 <img src="https://95598.gd.csg.cn/images/secImages/sidebar_2.png" width="48" height="48"/> 14 <img src="https://95598.gd.csg.cn/images/secImages/sidebar_3.png" width="48" height="48"/>15 <img src="https://95598.gd.csg.cn/images/secImages/sidebar_top.png" width="48" height="48"/>16 <img src="https://95598.gd.csg.cn/images/secImages/electricity_t1.png" width="169" height="53" alt="" />17 <img src="https://95598.gd.csg.cn/images/secImages/electricity_t2.png" width="169" height="53" alt="" />18 <img src="https://95598.gd.csg.cn/images/secImages/electricity_t3.png" width="169" height="53" alt="" />19 <img src="https://95598.gd.csg.cn/images/secImages/icon_big_a1.png" width="64" height="64" alt="" />20 <img src="https://95598.gd.csg.cn/images/secImages/icon_big_a2.png" width="64" height="64" alt="" />21 <img src="https://95598.gd.csg.cn/images/secImages/icon_big_a3.png" width="60" height="60" alt=""/>22 <img src="https://95598.gd.csg.cn/images/secImages/icon_big_a4.png" width="64" height="64" alt="" />23 </body>24 </html>
經過firebug網絡分析：
圖 1-1
觀察圖1-1可以得出如下兩個結論：
1.瀏覽器針對請求（如圖片）是并發處理的，在IP、端口號相同時，Firefox的默認并發請求數是6（HTTP1.1和HTTP1.0的并發請求數因瀏覽器版本的不同而數量不同），可以看到6張圖片是同時從服務器下載
2.js文件加載完后，中間約有0.1s的空閑時間，這段時間瀏覽器沒有進行任何操作，這一現象可以稱作阻塞，外部js文件阻塞了body中的img請求（在IE下不存在阻塞）
如果將<script>塊置于img中間，也會產生阻塞（在IE下不存在阻塞）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <title> 外部JS文件阻塞圖片 </title> 6 </head> 7 <body> 8 <img src="https://95598.gd.csg.cn/images/secImages/logo.gif" alt="" /> 9 <img src="https://95598.gd.csg.cn/images/secImages/header_city_turn.png" width="50" height="21" alt="切換城市" />10 <script src="https://95598.gd.csg.cn/javascript/jquery-1.7.2.min.js" type="text/javascript"></script>11 <img src="https://95598.gd.csg.cn/images/secImages/customer_service.jpg" width="150" height="150" />12 <img src="https://95598.gd.csg.cn/activity/images/wel_act.jpg" alt="" />13 <img src="https://95598.gd.csg.cn/images/secImages/sidebar_2.png" width="48" height="48"/> 14 <img src="https://95598.gd.csg.cn/images/secImages/sidebar_3.png" width="48" height="48"/>15 <img src="https://95598.gd.csg.cn/images/secImages/sidebar_top.png" width="48" height="48"/>16 <img src="https://95598.gd.csg.cn/images/secImages/electricity_t1.png" width="169" height="53" alt="" />17 <img src="https://95598.gd.csg.cn/images/secImages/electricity_t2.png" width="169" height="53" alt="" />18 <img src="https://95598.gd.csg.cn/images/secImages/electricity_t3.png" width="169" height="53" alt="" />19 <img src="https://95598.gd.csg.cn/images/secImages/icon_big_a1.png" width="64" height="64" alt="" />20 <img src="https://95598.gd.csg.cn/images/secImages/icon_big_a2.png" width="64" height="64" alt="" />21 <img src="https://95598.gd.csg.cn/images/secImages/icon_big_a3.png" width="60" height="60" alt=""/>22 <img src="https://95598.gd.csg.cn/images/secImages/icon_big_a4.png" width="64" height="64" alt="" />23 </body>24 </html>
圖 1-2
如果將外部js文件置于</body>前，則可以消除阻塞現象
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5 <title> 外部JS文件阻塞圖片 </title> 6 </head> 7 <body> 8 <img src="https://95598.gd.csg.cn/images/secImages/logo.gif" alt="" /> 9 <img src="https://95598.gd.csg.cn/images/secImages/header_city_turn.png" width="50" height="21" alt="切換城市" />10 <img src="https://95598.gd.csg.cn/images/secImages/customer_service.jpg" width="150" height="150" />11 <img src="https://95598.gd.csg.cn/activity/images/wel_act.jpg" alt="" />12 <img src="https://95598.gd.csg.cn/images/secImages/sidebar_2.png" width="48" height="48"/> 13 <img src="https://95598.gd.csg.cn/images/secImages/sidebar_3.png" width="48" height="48"/>14 <img src="https://95598.gd.csg.cn/images/secImages/sidebar_top.png" width="48" height="48"/>15 <img src="https://95598.gd.csg.cn/images/secImages/electricity_t1.png" width="169" height="53" alt="" />16 <img src="https://95598.gd.csg.cn/images/secImages/electricity_t2.png" width="169" height="53" alt="" />17 <img src="https://95598.gd.csg.cn/images/secImages/electricity_t3.png" width="169" height="53" alt="" />18 <img src="https://95598.gd.csg.cn/images/secImages/icon_big_a1.png" width="64" height="64" alt="" />19 <img src="https://95598.gd.csg.cn/images/secImages/icon_big_a2.png" width="64" height="64" alt="" />20 <img src="https://95598.gd.csg.cn/images/secImages/icon_big_a3.png" width="60" height="60" alt=""/>21 <img src="https://95598.gd.csg.cn/images/secImages/icon_big_a4.png" width="64" height="64" alt="" />22 <script src="https://95598.gd.csg.cn/javascript/jquery-1.7.2.min.js" type="text/javascript"></script>23 </body>24 </html>
圖 1-3
對比圖1-1、圖1-2、圖1-3，同樣的文件加載，只是順序上的不同，圖1-3的加載時間比圖1-1、圖1-2節省了約0.1s(測試結果有一定隨機性)
新聞熱點
疑難解答
