让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 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
Apr 05 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
JavaScript对象之深度克隆介绍
Dec 08 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 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程序中的常见漏洞进行攻击(下)
2006/10/09 PHP
建立动态的WML站点(三)
2006/10/09 PHP
优化使用mysql存储session的php代码
2008/01/10 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
php多任务程序实例解析
2014/07/19 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
创建、调用JavaScript对象的方法集锦
2014/12/24 Javascript
javascript中in运算符用法分析
2015/04/28 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
2019/06/17 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
如何基于JS截获动态代码
2019/12/25 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
解析Mac OS下部署Pyhton的Django框架项目的过程
2016/05/03 Python
python中numpy基础学习及进行数组和矢量计算
2017/02/12 Python
Python实现的人工神经网络算法示例【基于反向传播算法】
2017/11/11 Python
使用Python爬虫库BeautifulSoup遍历文档树并对标签进行操作详解
2020/01/25 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
Python基于callable函数检测对象是否可被调用
2020/10/16 Python
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
写给学生的新学期寄语
2014/01/18 职场文书
酒店总经理助理职责
2014/02/12 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
党员读书活动心得体会
2016/01/14 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书