【原】浅谈Firefox下的js、css、图片阻塞现象(…

2018-06-23 22:23:07来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

以如下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>
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 <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>
scipt置于中间

 

 

                                                             图 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>
调整script位置到末尾

 

                                                                                                                     图 1-3

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

 

 

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:10分钟学会基于ASP.NET的 JQuery实例 (转)

下一篇:属性与字段的区别