1、$(document).ready

  点评: 需要引用jquery ;兼容所有浏览器。

2、标签的async=”async”属性

  async的定义和用法(是HTML5的属性)

  async 属性规定一旦脚本可用,则会异步执行。

  点评:HTML5中新增的属性,Chrome、FF、IE9&IE9+均支持(IE6~8不支持)。此外,这种方法不能保证脚本按顺序执行。 async 属性仅适用于外部脚本(只有在使用 src 属性时)。

3、defer属性

<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>

  点评:兼容所有浏览器。此外,这种方法可以确保所有设置defer属性的脚本按顺序执行

  asyncdefer看起来差不多呀?而且经常一起出现!来辨析一下

  (1)如果没有asyncdefer属性,那么浏览器会立即执行当前的JS脚本,阻塞后面的脚本;

  (2)如果有async属性,加载和渲染后续文档的过程和当前JS的加载与执行并行进行(异步),它是乱序执行的,不管你声明的顺序如何,只要它加载完了就会执行;

  (3)如果有defer属性,加载后续文档元素的过程和JS的加载是并行进行(异步)的,但是JS的执行在所有元素解析完成之后进行,而且它是按照加载顺序执行脚本的

4、动态创建

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
var tmp = document.getElementsByTagName('script')[0];
tmp.parentNode.insertBefore(s, tmp);
})();
</script>
</head>
<body>
<img src="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
</body>
</html>

  原生的javascript 实现异步的方式其实远远不至7种, 大可以分3类:

  1、延迟类型:setTimeout(setInterval也是可以的)、requestAnimationFrame、setImmediate(IE10及以上)

  2、监听事件实现的类型:监听new Image加载状态、监听script加载状态、监听iframe加载状态、Message

  3、带有异步功能类型 Promise、ajax( XMLHttpRequest、ActiveXObject)、Worker;

  考虑到 :iframe 效率过慢; ajax 在ie下一定要加载真实的文件才能触发open及send;Worker 虽然具有异步特性,但它属于多线程的范畴,需要将主要的算法写在单独的js文件中才能完整体现其优点,若单单为了异步化而使用的话太浪费了。 所有这3种方式就不列出。

一、实现异步的方式:

1、setTimeout:这个是最简单的

setTimeout( function() {
console.log();
});
console.log();

2、setImmediate :IE10添加的新功能,专门用于解放ui线程。IE10以下及其他浏览器不支持

setImmediate(function(){
console.log();
});
console.log();

3、requestAnimationFrame :HTML5/CSS3时代新产物,专门用于动画。低级浏览器不支持

var asynByAniFrame = (function(){
var _window = window,
frame = _window.requestAnimationFrame
|| _window.webkitRequestAnimationFrame
|| _window.mozRequestAnimationFrame
|| _window.oRequestAnimationFrame
|| _window.msRequestAnimationFrame;
return function( callback ) { frame( callback ) };
})(); asynByAniFrame(function(){
console.log();
})
console.log();

4、监听new Image加载状态:通过加载一个data:image数据格式的图片,并监听器加载状态实现异步。

  尽管部分浏览器不支持data:image图片数据格式,但仍然可以触发其onerror状态实现异步,但IE8及以下对data:image数据格式的图片,onerror为同步执行

function asynByImg( callback ) {
var img = new Image();
img.onload = img.onerror = img.onreadystatechange = function() {
img = img.onload = img.onerror = img.onreadystatechange = null;
callback();
}
img.src = "data:image/png,";
}
asynByImg(function(){
console.log();
});
console.log();

5、监听script加载状态

  原理同new Image是一样的,生成一个data:text/javascript的script,并监听其加载状态实现异步。

  尽管部分浏览器不支持data:text/javascript格式数据的script,但仍然可以触发其onerror、onreadystatechange事件实现异步。

var asynByScript = (function() {
var _document = document,
_body = _document.body,
_src = "data:text/javascript,",
//异步队列
queue = [];
return function( callback ) {
var script = _document.createElement("script");
script.src = _src;
//添加到队列
queue[ queue.length ] = callback;
script.onload = script.onerror = script.onreadystatechange = function () {
script.onload = script.onerror = script.onreadystatechange = null;
_body.removeChild( script );
script = null;
//执行并删除队列中的第一个
queue.shift()();
};
_body.appendChild( script );
} })(); asynByScript( function() {
console.log();
} );
console.log();

6、Message:html5新技能,通过监听window.onmessage事件实现,然后postMessage发送消息,触发onmessage事件实现异步

var asynByMessage = (function() {
//异步队列
var queue = [];
window.addEventListener('message', function (e) {
//只响应asynByMessage的召唤
if ( e.data === 'asynByMessage' ) {
e.stopPropagation();
if ( queue.length ) {
//执行并删除队列中的第一个
queue.shift()();
}
}
}, true);
return function( callback ) {
//添加到队列
queue[ queue.length ] = callback;
window.postMessage('asynByMessage', '*');
};
})(); asynByMessage(function() {
console.log();
});
console.log();

7、Promise: ES6的新技能,具有异步性质

var asynByPromise = (function() {
var promise = Promise.resolve({
then : function( callback ) {
callback();
}
});
return function( callback ) {
promise.then(function(){
callback();
})
};
})();
asynByPromise(function() {
console.log();
});
console.log();

原生javascript实现异步的7种方式的更多相关文章

  1. JavaScript 创建对象的七种方式

    转自:xxxgitone.github.io/2017/06/10/JavaScript创建对象的七种方式/ JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以 ...

  2. JavaScript创建对象的几种 方式

    //JavaScript创建对象的七种方式 //https://xxxgitone.github.io/2017/06/10/JavaScript%E5%88%9B%E5%BB%BA%E5%AF%B9 ...

  3. js处理异步的几种方式

    Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推) ...

  4. [转载]javascript创建对象的几种方式

    原文链接:http://qingfeng825.iteye.com/blog/1935648 1. 工厂方法:能创建并返回特定类型对象的工厂函数(factory function). function ...

  5. JavaScript事件处理的三种方式(转)

    一.什么是JavaScript事件? 事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 事件可能是用 ...

  6. 总结javascript继承的两种方式的N中写法

    最近翻看博客园,总结了一下javascript的继承方式:prototype和copy继承方式. 一.prototype方式 当一个函数被创建时,Function构造函数产生的函数会隐式的被赋予一个p ...

  7. javascript实现继承3种方式: 原型继承、借用构造函数继承、组合继承,模拟extends方法继承

    javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...

  8. Flex(ActionScript)与JavaScript交互的两种方式示例

    随着各单位部门信息化进程的不断发展,互通互联.共享协调不断的被越来越多的客户所重视.很多新项目都要去必须能够集成已有的早期系统,至少也要能够实现交互对接.今天跟大家分享的是系统对接中ActionScr ...

  9. JavaScript声明全局变量三种方式的异同

    JavaScript中声明变量很简单var(关键字)+变量名(标识符). 方式1 1 2 var test; var test = 5; 需注意的是该句不能包含在function内,否则是局部变量.这 ...

随机推荐

  1. 2013-2014 ACM-ICPC, NEERC, Southern Subregional Contest Problem I. Plugs and Sockets 费用流

    Problem I. Plugs and Sockets 题目连接: http://www.codeforces.com/gym/100253 Description The Berland Regi ...

  2. hdu 5826 physics 物理题

    physics 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5826 Description There are n balls on a smoo ...

  3. jQuery自己定义绑定的魔法升级版

    jQuery自己定义绑定 首先让我们来看看jQuery的自己定义绑定的用法,你能够使用bind或者live来订阅一个事件(当然1.7以后也能够使用on了),代码例如以下: $("#myEle ...

  4. [Go] 子类 调用 父类 的 属性、方法

    package main import ( "fmt" ) type A struct { Text string Name string } func (a *A) Say() ...

  5. javaDoc 注释规范

    Javadoc虽然是Sun公司为Java文档自动生成设计的,可以从程序源代码中抽取类.方法.成员等注释形成一个和源代码配套的API帮助文档.但是Javadoc的注释也符合C的注释格式,而且doxyen ...

  6. iOS 线程之GCD的高级使用方法

    之前的一篇关于线程的blog已经为大家介绍了GCD的简单使用方式及样例说明,今天因为项目中有特殊的应用GCD的实例,为大家介绍两种特殊需求的使用GCD的方法. 目的:实现一件事情做完,再做下一件事情. ...

  7. 使用Axure RP原型设计实践07,注册判断

    本篇实现注册页的一些功能.本项目是通过用户名和电子邮件进行注册的. 在本篇之前,在"使用Axure RP原型设计实践03,制作一个登录界面的原型"中已经对注册页做了基本的处理. 打 ...

  8. 在Delphi中操作快捷方式

    快捷方式减少了系统的重复文件,是快速启动程序或打开文件或文件夹的方法,快捷方式对经常使用的程序.文件和文件夹非常有用.在Windows系统中,充斥着大量的快捷方式,那么如何操作这些快捷方式就是一个很头 ...

  9. springboot线程池的使用和扩展(转)

    springboot线程池的使用和扩展 我们常用ThreadPoolExecutor提供的线程池服务,springboot框架提供了@Async注解,帮助我们更方便的将业务逻辑提交到线程池中异步执行, ...

  10. ASP.NET MVC:some benefits of asp.net mvc

    Full control over HTML Full control over URLs Better separation of concerns Extensibility Testabilit ...