【原】浅谈Firefox下的js、css、图片阻塞现象（…
2018-06-18 03:26:06来源：未知 阅读 ()
外部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>
经过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(测试结果有一定随机性)
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- linux环境下的时间编程 2020-03-27
- 浅谈LCA 2019-12-25
- 体验Code::Blocks下的Windows GUI编程（32 bit and 64 bit） 2019-10-08
- 浅谈高精度算法（加减乘除） 2019-08-16
- C++对象在继承情况下的内存布局 2019-05-24
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
