让JavaScript和其它资源并发下载的方法

所属分类: 网络编程 / JavaScript 阅读数: 1056
收藏 0 赞 0 分享

在IE6/7里JavaScript会从两个方面阻碍页面呈现:
script标签下面的网页资源在script加载完之前会停止请求、下载。
script标签下面的html元素在script加载完之前会停止渲染。

在ie6/7 firefox2/3 Safari3 Chrome1 和 opera下 script标签会阻碍下载:

虽然在ie8,safari4,chrome2下script可以并发,但依然阻碍了其他资源的下载:

有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");

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多