让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 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
js 覆盖和重载 函数
Sep 25 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
javascript中call,apply,bind函数用法示例
Dec 19 Javascript
很棒的vue弹窗组件
May 24 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
js闭包的9个使用场景
Dec 29 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
深入理解js中this的用法
2016/05/28 Javascript
AngularJs 国际化(I18n/L10n)详解
2016/09/01 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
2017/05/12 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
2018/08/24 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
python局部赋值的规则
2013/03/07 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
python中format()函数的简单使用教程
2018/03/14 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
python 梯度法求解函数极值的实例
2019/07/10 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
ZWILLING双立人英国网上商店:德国刀具锅具厨具品牌
2018/05/15 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
营销人才自我鉴定范文
2013/12/25 职场文书
毕业生的自我评价范文
2013/12/31 职场文书
岗位职责怎么写
2014/03/14 职场文书
安全先进个人材料
2014/12/29 职场文书
Node实现搜索框进行模糊查询
2021/06/28 Javascript
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL