让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 相关文章推荐
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
JS实现的全排列组合算法示例
Oct 09 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 Javascript
vue v-model的用法解析
Oct 19 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下使用以下代码连接并测试
2008/04/09 PHP
PHP5函数小全(分享)
2013/06/06 PHP
php构造函数实例讲解
2013/11/13 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
Web 开发中Ajax的Session 超时处理方法
2017/01/19 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python获取网页上图片下载地址的方法
2015/03/11 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
keras.layer.input()用法说明
2020/06/16 Python
解决pycharm 格式报错tabs和space不一致问题
2021/02/26 Python
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
高中毕业的自我鉴定
2013/12/09 职场文书
感恩之星事迹材料
2014/05/03 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
2015年暑期见闻
2015/07/14 职场文书