JavaScript并发下载
程序员文章站
2022-04-27 13:57:32
...
在IE6/7里JavaScript会从两个方面阻碍页面呈现:
script标签下面的网页资源在script加载完之前会停止请求、下载。
script标签下面的html元素在script加载完之前会停止渲染。
在ie6/7 firefox2/3 Safari3 Chrome1 和 opera下 script标签会阻碍下载:
虽然在ie8,safari4,chrome2下script可以并发,但依然阻碍了其他资源的下载:
有6种方法可以使script与其他资源并行下载:
- XHR eval -- 通过XHR(XMLHttpRequest 对象)下载script,然后用eval方法执行XHR的responseText
- XHR Injection -- 通过XHR下载script,然后建立一个script标签并把它插入文档中(body或者head标签内),接着把script标签的text属性设置为XHR的responseText的值
- XHR in Iframe -- 把script标签放到一个iframe里,通过iframe下载它
- Script DOM Element -- 创建script标签并把它的src属性指向你的脚本地址
- Script Defer -- 添加script标签的defer属性,这个只在ie中有效,但firefox3.1也支持这个属性了
- 使用
document.write
方法在页面中写入<script src="">
,这个只在ie里有效
可以通过Cuzillion查 看各个方法的使用例子。
XHR Eval | IE, FF, Saf, Chr, Op | no | no | Saf, Chr | - | ~500 |
XHR Injection | IE, FF, Saf, Chr, Op | no | yes | Saf, Chr | - | ~500 |
Script in Iframe | IE, FF, Saf, Chr, Op | no | no | IE, FF, Saf, Chr | - | ~50 |
Script DOM Element | IE, FF, Saf, Chr, Op | yes | yes | FF, Saf, Chr | FF, Op | ~200 |
Script Defer | IE, Saf4, Chr2, FF3.1 | yes | yes | IE, FF, Saf, Chr, Op | IE, FF, Saf, Chr, Op | ~50 |
document.write Script Tag | IE, Saf4, Chr2, Op | yes | yes | IE, FF, Saf, Chr, Op | IE, FF, Saf, Chr, Op | ~100 |
如果有一些内联脚本需要在外部脚本执行后才能执行,那就需要同步(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");
推荐阅读
-
Web API---课程介绍 + JavaScript分三个部分
-
Java并发——结合CountDownLatch源码、Semaphore源码及ReentrantLock源码来看AQS原理
-
javascript 里头放PHP 代码
-
解析获取优酷视频真实下载地址的PHP源代码_PHP教程
-
加载 Javascript 最佳实践_javascript技巧
-
创建自己的“JavaScript库“,原来如此简单
-
jQuery右下角旋转环状菜单特效代码_javascript技巧
-
js控制容器隐藏出现防止样式变化的两种方法_javascript技巧
-
window.addeventjs事件驱动函数集合addEvent等_javascript技巧
-
Javascript浅谈之this_基础知识