在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查 看各个方法的使用例子。
Technique 方法
Parallel Downloads 是否并行下载
Domains can Differ 可否跨域
Existing Scripts 是否需要更改现有脚本
Busy Indicators是否出现示忙器
Ensures Order 是否确保顺序
Size (bytes)
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");
- 大小: 2.2 KB
- 大小: 1.8 KB
分享到:
相关推荐
javascript 并发编程 大规模后端js开发 并发编程经验
主要介绍了让JavaScript和其它资源并发下载的方法,JavaScript并发下载主要目的在于解决JS加载会阻碍页面呈现的问题,需要的朋友可以参考下
基于Node.js的JavaScript并发控制流框架.pdf
给大家介绍javascript多并发问题处理方法,涉及到js多并发处理方法相关知识,对js多并发处理方法感兴趣的朋友可以参考下本
JavaScriptTypeScript 实现并发请求控制的示例代码 假设有 10 个请求,但是最大的并发数目是 5 个,并且要求拿到请求结果,这样就是一个简单的并发请求控制 利用 setTimeout 实行简单模仿一个请求 let ...
Javascript-并发用于解释 Javascript 并发的教程代码。
useless.js 一个用于控制javascript异步并发后执行顺序的小型库
React 并发功能体验(前端的并发模式) React 是一个开源 JavaScript 库,开发人员使用它来创建基于 Web 和移动的应用程序,并且支持构建交互式用户界面和 UI 组件。React 是由 Facebook 软件工程师 Jordan Walke ...
Promise面试题详解之控制并发 在写这篇文章的时候我有点犹豫,因为先前写过一篇类似的,一道关于并发控制的面试题,只不过那篇文章只给出了一种解决方案,后来在网上又陆续找到两种解决方案,说来惭愧,研究问题...
JavaScript最初设计令人感觉亲切。由于其语法让人联想到Java,并且具有许多脚本语言的共同特性(如函数、数组、字典和正则表达式),因此,具有少量编程经验的人也能够快速学习JavaScript。新手程序员几乎不需要培训...
有效地将相互依赖的任务分类为一系列可并发执行的批处理。 batchingToposort :: { DependencyId : [DependentId] } -> [[TaskId]] O(t + d)时间复杂度(针对t任务和d依赖关系) O(t)空间复杂度 零包依赖 彻底测试...
Web Workr - 体验 Javascript 并发 这是一个体验 HTML 网络工作者的简单工具。 如何使用 为两个工人输入不同的程序,然后单击“运行”。 使用postMessage发送打印输出。 请注意,执行顺序是不可预测的。 例子
JavaScript开发语言就能够完成所有开发任务。 本文从照片滤镜售卖电商购物系统的背景分析、功能性需求、模 块设计与实现、核心用例规约等几个角度逐步展开深入分析,并最终 对产出结果进行论证。 本文核心是架构设计...
Node.js 是一个基于事件驱动的 JavaScript 运行环境,非常适合构建高并发聊天服务。Node.js 的一些重要特性包括: * 事件驱动:Node.js 使用事件驱动的方式处理请求,能够处理高并发的请求。 * 非阻塞I/O:Node.js ...
Because of the asynchronous characteristic of I/O,Node.js is quite suitable for developing server-side JavaScript applications. To implement concurrent asynchronous I/O control,developers have to ...
主要介绍了JavaScript实现指定数量的并发限制的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
- 软件工程师,需要了解如何在JavaScript中高效处理并发和异步操作。 - 计算机科学学生,对现代Web开发技术感兴趣并希望深入学习。 **使用场景及目标**: - 前端项目开发:在构建复杂的单页应用(SPA)时,有效管理...
4.完全多线程 框架允许通过多个线程并发取样和 通过单独的线程组对不同的功能同时取样。 5.精心的GUI设计允许快速操作和更精确的计时。 6.缓存和离线分析/回放测试结果。 JMeter的高可扩展性 1.可链接的取样器允许...