让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 相关文章推荐
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
Mar 06 Javascript
基于jquery ajax 用户无刷新登录方法详解
Apr 28 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
JSON格式的键盘编码对照表
Jan 29 Javascript
Java中Timer的用法详解
Oct 21 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
详解jquery和vue对比
Apr 16 jQuery
vue watch关于对象内的属性监听
Apr 22 Javascript
详解vue-cli中使用rem,vue自适应
May 06 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
JS创建自定义对象的六种方法总结
Dec 15 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 Smarty 字符比较代码
2011/02/27 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
PHP PDO操作总结
2014/11/17 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
详解Require.js与Sea.js的区别
2018/08/05 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
2018/11/25 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
使用异步组件优化Vue应用程序的性能
2019/04/28 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
javascript中正则表达式语法详解
2020/08/07 Javascript
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
python实现弹窗祝福效果
2019/04/07 Python
利用python实现AR教程
2019/11/20 Python
用Python生成HTML表格的方法示例
2020/03/06 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
汉米尔顿手表官网:Hamilton
2020/09/13 全球购物
保安部任务及岗位职责
2014/02/25 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
C++程序员求职信
2014/05/07 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
护理见习报告范文
2014/11/03 职场文书
python处理json数据文件
2022/04/11 Python