外部js文件阻塞body中的图片

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

外部js文件阻塞body中的图片以如下html为例:

1<!DOCTYPE HTML>2<html>3<head>4<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>5<title>外部JS文件阻塞图片</title>6<scriptsrc="https://95598.gd.csg.cn/javascript/jquery-1.7.2.min.js"type="text/Javascript"></script>7</head>8<body>9<imgsrc="https://95598.gd.csg.cn/images/secImages/logo.gif"alt=""/>10<imgsrc="https://95598.gd.csg.cn/images/secImages/header_city_turn.png"width="50"height="21"alt="切换城市"/>11<imgsrc="https://95598.gd.csg.cn/images/secImages/customer_service.jpg"width="150"height="150"/>12<imgsrc="https://95598.gd.csg.cn/activity/images/wel_act.jpg"alt=""/>13<imgsrc="https://95598.gd.csg.cn/images/secImages/sidebar_2.png"width="48"height="48"/>14<imgsrc="https://95598.gd.csg.cn/images/secImages/sidebar_3.png"width="48"height="48"/>15<imgsrc="https://95598.gd.csg.cn/images/secImages/sidebar_top.png"width="48"height="48"/>16<imgsrc="https://95598.gd.csg.cn/images/secImages/electricity_t1.png"width="169"height="53"alt=""/>17<imgsrc="https://95598.gd.csg.cn/images/secImages/electricity_t2.png"width="169"height="53"alt=""/>18<imgsrc="https://95598.gd.csg.cn/images/secImages/electricity_t3.png"width="169"height="53"alt=""/>19<imgsrc="https://95598.gd.csg.cn/images/secImages/icon_big_a1.png"width="64"height="64"alt=""/>20<imgsrc="https://95598.gd.csg.cn/images/secImages/icon_big_a2.png"width="64"height="64"alt=""/>21<imgsrc="https://95598.gd.csg.cn/images/secImages/icon_big_a3.png"width="60"height="60"alt=""/>22<imgsrc="https://95598.gd.csg.cn/images/secImages/icon_big_a4.png"width="64"height="64"alt=""/>23</body>24</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下不存在阻塞)

1<!DOCTYPE HTML>2<html>3<head>4<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>5<title>外部JS文件阻塞图片</title>6</head>7<body>8<imgsrc="https://95598.gd.csg.cn/images/secImages/logo.gif"alt=""/>9<imgsrc="https://95598.gd.csg.cn/images/secImages/header_city_turn.png"width="50"height="21"alt="切换城市"/>10<scriptsrc="https://95598.gd.csg.cn/javascript/jquery-1.7.2.min.js"type="text/javascript"></script>11<imgsrc="https://95598.gd.csg.cn/images/secImages/customer_service.jpg"width="150"height="150"/>12<imgsrc="https://95598.gd.csg.cn/activity/images/wel_act.jpg"alt=""/>13<imgsrc="https://95598.gd.csg.cn/images/secImages/sidebar_2.png"width="48"height="48"/>14<imgsrc="https://95598.gd.csg.cn/images/secImages/sidebar_3.png"width="48"height="48"/>15<imgsrc="https://95598.gd.csg.cn/images/secImages/sidebar_top.png"width="48"height="48"/>16<imgsrc="https://95598.gd.csg.cn/images/secImages/electricity_t1.png"width="169"height="53"alt=""/>17<imgsrc="https://95598.gd.csg.cn/images/secImages/electricity_t2.png"width="169"height="53"alt=""/>18<imgsrc="https://95598.gd.csg.cn/images/secImages/electricity_t3.png"width="169"height="53"alt=""/>19<imgsrc="https://95598.gd.csg.cn/images/secImages/icon_big_a1.png"width="64"height="64"alt=""/>20<imgsrc="https://95598.gd.csg.cn/images/secImages/icon_big_a2.png"width="64"height="64"alt=""/>21<imgsrc="https://95598.gd.csg.cn/images/secImages/icon_big_a3.png"width="60"height="60"alt=""/>22<imgsrc="https://95598.gd.csg.cn/images/secImages/icon_big_a4.png"width="64"height="64"alt=""/>23</body>24</html>

scipt置于中间

图 1-2

如果将外部js文件置于</body>前,则可以消除阻塞现象

1<!DOCTYPE HTML>2<html>3<head>4<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>5<title>外部JS文件阻塞图片</title>6</head>7<body>8<imgsrc="https://95598.gd.csg.cn/images/secImages/logo.gif"alt=""/>9<imgsrc="https://95598.gd.csg.cn/images/secImages/header_city_turn.png"width="50"height="21"alt="切换城市"/>10<imgsrc="https://95598.gd.csg.cn/images/secImages/customer_service.jpg"width="150"height="150"/>11<imgsrc="https://95598.gd.csg.cn/activity/images/wel_act.jpg"alt=""/>12<imgsrc="https://95598.gd.csg.cn/images/secImages/sidebar_2.png"width="48"height="48"/>13<imgsrc="https://95598.gd.csg.cn/images/secImages/sidebar_3.png"width="48"height="48"/>14<imgsrc="https://95598.gd.csg.cn/images/secImages/sidebar_top.png"width="48"height="48"/>15<imgsrc="https://95598.gd.csg.cn/images/secImages/electricity_t1.png"width="169"height="53"alt=""/>16<imgsrc="https://95598.gd.csg.cn/images/secImages/electricity_t2.png"width="169"height="53"alt=""/>17<imgsrc="https://95598.gd.csg.cn/images/secImages/electricity_t3.png"width="169"height="53"alt=""/>18<imgsrc="https://95598.gd.csg.cn/images/secImages/icon_big_a1.png"width="64"height="64"alt=""/>19<imgsrc="https://95598.gd.csg.cn/images/secImages/icon_big_a2.png"width="64"height="64"alt=""/>20<imgsrc="https://95598.gd.csg.cn/images/secImages/icon_big_a3.png"width="60"height="60"alt=""/>21<imgsrc="https://95598.gd.csg.cn/images/secImages/icon_big_a4.png"width="64"height="64"alt=""/>22<scriptsrc="https://95598.gd.csg.cn/javascript/jquery-1.7.2.min.js"type="text/javascript"></script>23</body>24</html>

调整script位置到末尾

图 1-3

对比图1-1、图1-2、图1-3,同样的文件加载,只是顺序上的不同,图1-3的加载时间比图1-1、图1-2节省了约0.1s(测试结果有一定随机性)

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航