外部js文件阻塞body中的图片
以如下html为例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> 外部JS文件阻塞图片 </title>
<script src="https://95598.gd.csg.cn/javascript/jquery-1.7.2.min.js" type="text/javascript"></script>
</head>
<body>
<img src="https://95598.gd.csg.cn/images/secImages/logo.gif" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/header_city_turn.png" width="50" height="21" alt="切换城市" />
<img src="https://95598.gd.csg.cn/images/secImages/customer_service.jpg" width="150" height="150" />
<img src="https://95598.gd.csg.cn/activity/images/wel_act.jpg" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/sidebar_2.png" width="48" height="48"/>
<img src="https://95598.gd.csg.cn/images/secImages/sidebar_3.png" width="48" height="48"/>
<img src="https://95598.gd.csg.cn/images/secImages/sidebar_top.png" width="48" height="48"/>
<img src="https://95598.gd.csg.cn/images/secImages/electricity_t1.png" width="169" height="53" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/electricity_t2.png" width="169" height="53" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/electricity_t3.png" width="169" height="53" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/icon_big_a1.png" width="64" height="64" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/icon_big_a2.png" width="64" height="64" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/icon_big_a3.png" width="60" height="60" alt=""/>
<img src="https://95598.gd.csg.cn/images/secImages/icon_big_a4.png" width="64" height="64" alt="" />
</body>
</html>
script 在<head>中
经过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下不存在阻塞）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> 外部JS文件阻塞图片 </title>
</head>
<body>
<img src="https://95598.gd.csg.cn/images/secImages/logo.gif" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/header_city_turn.png" width="50" height="21" alt="切换城市" />
<script src="https://95598.gd.csg.cn/javascript/jquery-1.7.2.min.js" type="text/javascript"></script>
<img src="https://95598.gd.csg.cn/images/secImages/customer_service.jpg" width="150" height="150" />
<img src="https://95598.gd.csg.cn/activity/images/wel_act.jpg" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/sidebar_2.png" width="48" height="48"/>
<img src="https://95598.gd.csg.cn/images/secImages/sidebar_3.png" width="48" height="48"/>
<img src="https://95598.gd.csg.cn/images/secImages/sidebar_top.png" width="48" height="48"/>
<img src="https://95598.gd.csg.cn/images/secImages/electricity_t1.png" width="169" height="53" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/electricity_t2.png" width="169" height="53" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/electricity_t3.png" width="169" height="53" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/icon_big_a1.png" width="64" height="64" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/icon_big_a2.png" width="64" height="64" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/icon_big_a3.png" width="60" height="60" alt=""/>
<img src="https://95598.gd.csg.cn/images/secImages/icon_big_a4.png" width="64" height="64" alt="" />
</body>
</html>
scipt置于中间
图 1-2
如果将外部js文件置于</body>前，则可以消除阻塞现象
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> 外部JS文件阻塞图片 </title>
</head>
<body>
<img src="https://95598.gd.csg.cn/images/secImages/logo.gif" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/header_city_turn.png" width="50" height="21" alt="切换城市" />
<img src="https://95598.gd.csg.cn/images/secImages/customer_service.jpg" width="150" height="150" />
<img src="https://95598.gd.csg.cn/activity/images/wel_act.jpg" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/sidebar_2.png" width="48" height="48"/>
<img src="https://95598.gd.csg.cn/images/secImages/sidebar_3.png" width="48" height="48"/>
<img src="https://95598.gd.csg.cn/images/secImages/sidebar_top.png" width="48" height="48"/>
<img src="https://95598.gd.csg.cn/images/secImages/electricity_t1.png" width="169" height="53" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/electricity_t2.png" width="169" height="53" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/electricity_t3.png" width="169" height="53" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/icon_big_a1.png" width="64" height="64" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/icon_big_a2.png" width="64" height="64" alt="" />
<img src="https://95598.gd.csg.cn/images/secImages/icon_big_a3.png" width="60" height="60" alt=""/>
<img src="https://95598.gd.csg.cn/images/secImages/icon_big_a4.png" width="64" height="64" alt="" />
<script src="https://95598.gd.csg.cn/javascript/jquery-1.7.2.min.js" type="text/javascript"></script>
</body>
</html>
调整script位置到末尾
图 1-3
对比图1-1、图1-2、图1-3，同样的文件加载，只是顺序上的不同，图1-3的加载时间比图1-1、图1-2节省了约0.1s(测试结果有一定随机性)