让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 异步处理进度条
Apr 01 Javascript
扩展javascript的Date方法实现代码(prototype)
Nov 20 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
javascript弹出页面回传值的方法
Jan 28 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
详解Angularjs中的依赖注入
Mar 11 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 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
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
javascript调试说明
2010/06/07 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
2013/12/29 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
2017/01/18 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
Angular中点击li标签实现更改颜色的核心代码
2017/12/08 Javascript
express框架下使用session的方法
2019/07/31 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
跟老齐学Python之??碌某?? target=
2014/09/12 Python
Python入门篇之面向对象
2014/10/20 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
python机器学习之决策树分类详解
2017/12/20 Python
pandas值替换方法
2018/07/10 Python
pytorch构建多模型实例
2020/01/15 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
宝宝周岁宴答谢词
2014/01/26 职场文书
电子信息专业自荐书
2014/02/04 职场文书
大学自我评价
2014/02/12 职场文书
优秀大学生自荐信
2015/03/26 职场文书
通讯稿格式及范文
2015/07/22 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
详解TypeScript的基础类型
2022/02/18 Javascript