外部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(测试结果有一定随机性)

【原】浅谈Firefox下的js、css、图片阻塞现象（一）的更多相关文章

  1. [原创]浅谈NT下Ring3无驱进入Ring0的方法

    原文链接:浅谈NT下Ring3无驱进入Ring0的方法 (测试环境:Windows 2000 SP4,Windows XP SP2.Windows 2003 未测试) 在NT下无驱进入Ring0是一个 ...

  2. 浅谈 IE下innerHTML导致的问题

    原文:浅谈 IE下innerHTML导致的问题 先来看个demo吧: <!DOCTYPE html> <html> <head> <meta charset= ...

  3. 浅谈Linux下/etc/passwd文件

    浅谈Linux 下/etc/passwd文件 看过了很多渗透测试的文章,发现在很多文章中都会有/etc/passwd这个文件,那么,这个文件中到底有些什么内容呢?下面我们来详细的介绍一下. 在Linu ...

  4. []转帖] 浅谈Linux下的五种I/O模型

    浅谈Linux下的五种I/O模型 https://www.cnblogs.com/chy2055/p/5220793.html  一.关于I/O模型的引出 我们都知道,为了OS的安全性等的考虑,进程是 ...

  5. 浅谈Vue下的components模板

    浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...

  6. 浅谈网络爬虫爬js动态加载网页（二）

    没错,最后我还是使用了Selenium,去实现上一篇我所说的问题,别的没有试,只试了一下firefox的引擎,总体效果对我来说还是可以接受的. 继续昨天的话题,既然要实现上篇所说的问题,那么就需要一个 ...

  7. 浅谈Linux下如何修改IP

    linux 下命令之浅谈//cd ..  //返回上一级//创建文件夹touch test.txt//Linux不区分大小写//往一个文件中追加内容echo "****" > ...

  8. 转：利用node压缩、合并js,css,图片

    1.安装nodejs http://nodejs.org/ 2.安装各自的node package js我用的是UglifyJS github地址:https://github.com/mishoo/ ...

  9. 浅谈时钟的生成(js手写代码)

    在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况 ...

随机推荐

  1. poj 1860 (Bellman_Ford判断正环)

    题意:给出n种货币,m中交换关系,给出两种货币汇率和手续费,求能不能通过货币间的兑换使财富增加. 用Bellman_Ford 求出是否有正环,如果有的话就可以无限水松弛,财富可以无限增加. #incl ...

  2. Linux下对字符串进行MD5加密

    Linux下对字符串进行MD5加密 比如要用MD5在linux下加密字符串“test",可以使用命令:$ echo -n test|md5sum098f6bcd4621d373cade4e8 ...

  3. 拓扑排序(TopologicalSort)算法

    拓扑排序算法应用: 有些事情做都需要按照流程的去做,比如你准备约你小女友去影院看速度与激情7大片,首先你想的是我怎么到达影院,然后达到影院,你可以先买票,或者等小女友来了一起买票,然后一起进电影大厅. ...

  4. 2014上半年acm总结（1）（入门+校赛）

    大一下学期才开始了acm,不得不说有一点迟,但是acm确实使我的生活充实了很多,,不至于像以前一样经常没事干=  = 上学期的颓废使我的c语言学的渣的一笔..靠考前突击才基本掌握了语法 寒假突然醒悟, ...

  5. hdu 5586 Sum（dp+技巧）

    Problem Description There )mod10007.After that,the sum of n numbers should be as much as possible.Wh ...

  6. Floodlight中 处理packetin消息的顺序（1）

    当Controller和SW建立连接之后,就能够处理来自SW的各种OF msg.当接收到 packetin 消息之后,会将其分发给各个监听了这个OFMessage的listeners,所以假设我们要设 ...

  7. JavaScript-1.最简单的程序之网页弹出对话框,显示为Warning---ShinePans

    代码: <html> <head> <meta http-equiv="content-type" content="text/html;c ...

  8. 怎样在小方框上打对号 小方框内打对勾 word 方框打对勾

    在word中做选择时,非常多人遇到须要在小方框上打对勾而不知怎样做,现将可行的各种方法总结例如以下: 1:直接找到一个做好的,保存为图片,在须要的时候插入它: 2:插入文本框,然后边框选择为实线,在文 ...

  9. MediaController

    前言 本章内容是android.widget.MediaController,版本为Android 2.3 r1,翻译来自"唐明",再次感谢"唐明" !期待你一 ...

  10. 执行SQL查询脚本

    static void Main(string[] args) { Console.WriteLine("输入用户编号:"); string cusernum = Console. ...