让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 相关文章推荐
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
Oct 18 Javascript
JS实现兼容性较好的随屏滚动效果
Nov 09 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
jquery选择器和属性对象的操作实例分析
Jan 10 jQuery
微信小程序利用for循环解决内容变更问题
Mar 05 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
基于JavaScript实现简单的轮播图
Mar 03 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
PHP关联链接常用代码
2012/11/05 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
js中prototype用法详细介绍
2013/11/14 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
深入解析vue 源码目录及构建过程分析
2019/04/24 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[23:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
材料成型专业个人求职信范文
2013/09/25 职场文书
门卫工作岗位职责
2013/12/17 职场文书
纪检监察建议书
2014/05/19 职场文书
干部考察材料范文
2014/12/24 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
公司奖励通知
2015/04/21 职场文书
奖金申请报告模板
2015/05/15 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
2016思想纪律作风整顿心得体会
2016/01/23 职场文书
安全责任协议书范本
2016/03/23 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
python图片灰度化处理的几种方法
2021/06/23 Python
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android
python turtle绘图命令及案例
2021/11/23 Python
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android