让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 运动中Offset的bug解决方案
Dec 24 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
Jan 13 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
Bootstrap表单制作代码
Mar 17 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
原生JS封装animate运动框架的实例
Oct 12 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
global.php
2006/12/09 PHP
php中的时间显示
2007/01/18 PHP
PHP中文汉字验证码
2007/04/08 PHP
PHP5 面向对象程序设计
2008/02/13 PHP
PHP学习 变量使用总结
2011/03/24 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHP实现的简单sha1加密功能示例
2017/08/27 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
基于jquery库的tab新形式使用
2012/11/16 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
2016/05/15 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
Bootstrap和Java分页实例第二篇
2016/12/23 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
中国医药集团国药在线:国药网
2017/02/06 全球购物
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
大学自主招生自荐信范文
2014/02/26 职场文书
经济类毕业生求职信
2014/06/26 职场文书
委托书英文
2015/01/28 职场文书
高一军训决心书
2015/02/05 职场文书
社区党建工作总结2015
2015/05/13 职场文书
2019年警察入党转正申请书最新范文
2019/09/03 职场文书