让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 相关文章推荐
JavaScript 变量命名规则
Sep 23 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
JS实现回到页面顶部动画效果的简单实例
May 24 Javascript
浅谈Angularjs link和compile的使用区别
Oct 21 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
Vue双向绑定实现原理与方法详解
May 07 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 cookie 登录验证示例代码
2009/03/16 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
php创建session的方法实例详解
2015/01/27 PHP
详解php中 === 的使用
2016/10/24 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
让ie运行js时提示允许阻止内容运行的解决方法
2010/10/24 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
Javascript获取HTML静态页面参数传递值示例
2013/08/18 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
正则表达式(语法篇推荐)
2016/06/24 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
详解webpack require.ensure与require AMD的区别
2017/12/13 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
python双向链表实现实例代码
2013/11/21 Python
python实现颜色空间转换程序(Tkinter)
2015/12/31 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
Python获取时间戳代码实例
2019/09/24 Python
Django多数据库配置及逆向生成model教程
2020/03/28 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
Python pandas如何向excel添加数据
2020/05/22 Python
python与pycharm有何区别
2020/07/01 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
数控技术专业推荐信
2013/11/01 职场文书
大学生新闻专业个人自我评价
2013/11/12 职场文书
装修致歉信
2014/01/15 职场文书
学生周末长期请假条
2014/02/15 职场文书
经济国贸专业求职信
2014/06/18 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
工厂采购员岗位职责
2015/04/07 职场文书