让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 相关文章推荐
又一个图片自动缩小的JS代码
Mar 10 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
May 09 Javascript
Javascript之面向对象--接口
Dec 02 Javascript
Node.Js生成比特币地址代码解析
Apr 21 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
Vue.js中使用iView日期选择器并设置开始时间结束时间校验功能
Aug 12 Javascript
JavaScript Blob对象原理及用法详解
Oct 14 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
Terran兵种介绍
2020/03/14 星际争霸
如何使用GDB调试PHP程序
2015/12/08 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
jQuery ajax BUG:object doesn't support this property or method
2010/07/06 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
jQuery中appendTo()方法用法实例
2015/01/08 Javascript
AngularJS自动表单验证
2016/02/01 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
vue实现移动端返回顶部
2020/10/12 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
Python 抓取动态网页内容方案详解
2014/12/25 Python
python中正则表达式的使用方法
2018/02/25 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python实现图片转字符小工具
2019/04/30 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
python游戏开发的五个案例分享
2020/03/09 Python
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
英文商务邀请信
2014/01/22 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
法律专业自荐信
2014/06/03 职场文书
主要领导对照检查材料
2014/08/26 职场文书
委托培训协议书
2014/11/17 职场文书
新生开学寄语大全
2015/05/28 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书
一道JS算法面试题——冒泡、选择排序
2021/04/21 Javascript