让JavaScript和其它资源并发下载的方法


Posted in Javascript onOctober 16, 2014

在IE6/7里JavaScript会从两个方面阻碍页面呈现:
script标签下面的网页资源在script加载完之前会停止请求、下载。
script标签下面的html元素在script加载完之前会停止渲染。

在ie6/7 firefox2/3 Safari3 Chrome1 和 opera下 script标签会阻碍下载:

让JavaScript和其它资源并发下载的方法

虽然在ie8,safari4,chrome2下script可以并发,但依然阻碍了其他资源的下载:

让JavaScript和其它资源并发下载的方法

有6种方法可以使script与其他资源并行下载:

1.XHR eval — 通过XHR(XMLHttpRequest 对象)下载script,然后用eval方法执行XHR的responseText
2.XHR Injection — 通过XHR下载script,然后建立一个script标签并把它插入文档中(body或者head标签内),接着把script标签的text属性设置为XHR的responseText的值
3.XHR in Iframe — 把script标签放到一个iframe里,通过iframe下载它
4.Script DOM Element — 创建script标签并把它的src属性指向你的脚本地址
5.Script Defer — 添加script标签的defer属性,这个只在ie中有效,但firefox3.1也支持这个属性了
6.使用document.write方法在页面中写入<script src="">,这个只在ie里有效

可以通过Cuzillion查 看各个方法的使用例子。

如果有一些内联脚本需要在外部脚本执行后才能执行,那就需要同步(synchronize)他们了。称作”coupling”,Coupling Asynchronous Scripts 这篇文章介绍了一些目前可以实现“coupling”的方法。

headjs,能使JS并发下载(但是顺序执行):http://headjs.com/

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {  

  // all done  

});  

   

// the most simple case. load and execute single script without blocking.  

head.js("/path/to/file.js");  

   

// load a script and execute a function after it has been loaded  

head.js("/path/to/file.js", function() {  

   

});  

   

// load files in parallel but execute them in sequence  

head.js("file1.js", "file2.js", ... "fileN.js");  

   

// execute function after all scripts have been loaded  

head.js("file1.js", "file2.js", function() {  

   

});  

   

// files are loaded in parallel and executed in order they arrive  

head.js("file1.js");  

head.js("file2.js");  

head.js("file3.js");  

   

// the previous can also be written as  

head.js("file1.js").js("file1.js").js("file3.js");
Javascript 相关文章推荐
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
javascript 数组的定义和数组的长度
Jun 07 Javascript
jQuery.datatables.js插件用法及api实例详解
Oct 28 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
JavaScript实现继承的4种方法总结
Oct 16 #Javascript
JavaScript实现网页截图功能
Oct 16 #Javascript
JavaScript跨域方法汇总
Oct 16 #Javascript
js阻止事件追加的具体实现
Oct 15 #Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 #Javascript
原生的html元素选择器类似jquery选择器
Oct 15 #Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 #Javascript
You might like
php打印输出棋盘的实现方法
2014/12/23 PHP
thinkphp3.x自定义Action、Model及View的简单实现方法
2016/05/19 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
2020/11/10 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
JS实现简易日历效果
2021/01/25 Javascript
简单介绍Python中的struct模块
2015/04/28 Python
Python实现的将文件每一列写入列表功能示例【测试可用】
2018/03/19 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
详解HTML5中垂直上下居中的解决方案
2017/12/20 HTML / CSS
美国最大的珠宝商之一:Littman Jewelers
2016/11/13 全球购物
法国在线药房:1001Pharmacies
2021/03/07 全球购物
经营理念口号
2014/06/21 职场文书
工商管理本科生求职信
2014/07/13 职场文书
争做文明公民倡议书
2014/08/29 职场文书
党支部意见范文
2015/06/02 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
Python激活Anaconda环境变量的详细步骤
2021/06/08 Python
PyQt5实现多张图片显示并滚动
2021/06/11 Python
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
python lambda 表达式形式分析
2022/04/03 Python