【原】浅谈Firefox下的js、css、图片阻塞现象（一）
外部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(测试结果有一定随机性)
【原】浅谈Firefox下的js、css、图片阻塞现象（一）的更多相关文章
- [原创]浅谈NT下Ring3无驱进入Ring0的方法
原文链接:浅谈NT下Ring3无驱进入Ring0的方法 (测试环境:Windows 2000 SP4,Windows XP SP2.Windows 2003 未测试) 在NT下无驱进入Ring0是一个 ...
- 浅谈 IE下innerHTML导致的问题
原文:浅谈 IE下innerHTML导致的问题 先来看个demo吧: <!DOCTYPE html> <html> <head> <meta charset= ...
- 浅谈Linux下/etc/passwd文件
浅谈Linux 下/etc/passwd文件 看过了很多渗透测试的文章,发现在很多文章中都会有/etc/passwd这个文件,那么,这个文件中到底有些什么内容呢?下面我们来详细的介绍一下. 在Linu ...
- []转帖] 浅谈Linux下的五种I/O模型
浅谈Linux下的五种I/O模型 https://www.cnblogs.com/chy2055/p/5220793.html 一.关于I/O模型的引出 我们都知道,为了OS的安全性等的考虑,进程是 ...
- 浅谈Vue下的components模板
浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...
- 浅谈网络爬虫爬js动态加载网页（二）
没错,最后我还是使用了Selenium,去实现上一篇我所说的问题,别的没有试,只试了一下firefox的引擎,总体效果对我来说还是可以接受的. 继续昨天的话题,既然要实现上篇所说的问题,那么就需要一个 ...
- 浅谈Linux下如何修改IP
linux 下命令之浅谈//cd .. //返回上一级//创建文件夹touch test.txt//Linux不区分大小写//往一个文件中追加内容echo "****" > ...
- 转：利用node压缩、合并js,css,图片
1.安装nodejs http://nodejs.org/ 2.安装各自的node package js我用的是UglifyJS github地址:https://github.com/mishoo/ ...
- 浅谈时钟的生成(js手写代码)
在生成时钟的过程中自己想到布置表盘的写法由这么几种: 当然利用那种模式都可以实现,所以我们要用一个最好理解,代码有相对简便的方法实现 1.利用三角函数 用js在三角函数布置表盘的过程中有遇见到这种情况 ...
随机推荐
- Unicode其实是Latin1的扩展。只有一个低字节的Uncode字符其实就是Latin1字符——附各种字符编码表及转换表
一.概念 1,ASCII ASCII(American Standard Code for Information Interchange),中文名称为美国信息交换标准代码.是 ...
- android基础4——Mainifest
众所周知,应用程序中的每一个UI都是通过Activity类的一个或者多个拓展实现的.在桌面开发环境中,Activity相当于Form,来布局和显示信息,以及影响用户的动作.Mainifest可以定义应 ...
- perl 继承写法
use base (Critter); 和 BEGIN{ require Critter; @ISA=qw/Critter/; } 这两种写法是等价
- 在 Windows Azure 网站中进行纵向扩展和横向扩展
编辑人员注释:本文章由 Windows Azure 网站团队的项目经理 Byron Tardif 撰写. 当您开始一个新的 Web 项目,或者刚刚开始开发一般的网站和应用程序时,您可能希望从小处着手. ...
- Hibernate 配置详解(9)
hibernate.cache.use_structured_entries Hibernate文档上介绍,该属性是用于把对象以一种更易读的方式放到二级缓存中,这样,在对二级缓存进行监控的时候就更容易 ...
- 网易云课堂_程序设计入门-C语言_第四周：循环控制_2念整数
2 念整数(5分) 题目内容: 你的程序要读入一个整数,范围是[-100000,100000].然后,用汉语拼音将这个整数的每一位输出出来. 如输入1234,则输出: yi er san si 注意, ...
- c++策略模式
这几天需要学习一下设计模式来为设计代码结构使得代码可扩展性强,代码更加易于维护,不用想很长时间也不知道怎么去设计一个工具的代码. 我的理解策略模式: 1.有一个策略基类,策略类是什么呢?策略类就是一个 ...
- C++中使用class和structkeyword的不同
类能够在它的第一个訪问说明符之前定义成员,对这样的成员的訪问权限依赖于类定义的方式.假设我们使用structkeyword,则定义在第一个訪问说明符之前的成员是public的,相反,假设使用class ...
- 详解CSS网页布局中默认字体样式
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
- bootstrap注意事项（二）
1.内联子标题 在标题内还可以包含 <small> 标签或赋予 .small 类的元素,可以用来标记副标题. <!DOCTYPE html> <html> < ...