【JS】368- 浅析JavaScript异步

时间 2019-12-01

原文原文链接

一直以来都知道 JavaScript是一门单线程语言，在笔试过程当中不断的遇到一些输出结果的问题，考量的是对异步编程掌握状况。通常被问到异步的时候脑子里第一反应就是 Ajax， setTimseout...这些东西。在平时作项目过程当中，基本大多数操做都是异步的。 JavaScript异步都是经过回调形式完成的，开发过程当中一直在处理回调，可能不知不觉中本身就已经处在 回调地狱中。javascript

浏览器线程

在开始以前简单的说一下浏览器的线程，对浏览器的做业有个基础的认识。以前说过 JavaScript是单线程做业，可是并不表明浏览器就是单线程的。java

在 JavaScript引擎中负责解析和执行 JavaScript代码的线程只有一个。可是除了这个主进程之外，还有其余不少辅助线程。那么诸如 onclick回调， setTimeout， Ajax这些都是怎么实现的呢？即浏览器搞了几个其余线程去辅助 JavaScript线程的运行。ajax

浏览器有不少线程，例如：chrome

GUI渲染线程 - GUI渲染线程处于挂起状态的，也就是冻结状态编程
JavaScript引擎线程 - 用于解析JavaScript代码segmentfault
定时器触发线程 - 浏览器定时计数器并非 js引擎计数设计模式
浏览器事件线程 - 用于解析BOM渲染等工做浏览器
http线程 - 主要负责数据请求服务器
EventLoop轮询处理线程 - 事件被触发时该线程会把事件添加到待处理队列的队尾网络
等等等

从上面来看能够得出，浏览器其实也作了不少事情，远远的没有想象中的那么简单，上面这些线程中 GUI渲染线程, JavaScript引擎线程, 浏览器事件线程是浏览器的常驻线程。

当浏览器开始解析代码的时候，会根据代码去分配给不一样的辅助线程去做业。

进程

进程是指在操做系统中正在运行的一个应用程序

线程

线程是指进程内独立执行某个任务的一个单元。线程本身基本上不拥有系统资源，只拥有一点在运行中必不可少的资源(如程序计数器，一组寄存器和栈)。

进程中包含线程，一个进程中能够有N个进程。咱们能够在电脑的任务管理器中查看到正在运行的进程，能够认为一个进程就是在运行一个程序，好比用浏览器打开一个网页，这就是开启了一个进程。可是好比打开3个浏览器，那么就开启了3个进程。

同步&异步

既然要了解同步异步固然要简单的说一下同步和异步。说到同步和异步最有发言权的真的就属 Ajax了，为了让例子更加明显没有使用 Ajax举例。(●ˇ∀ˇ●)

同步

同步会逐行执行代码，会对后续代码形成阻塞，直至代码接收到预期的结果以后，才会继续向下执行。

console.log(1);	
alert("同步");	
console.log(2);	
//  结果：	
//  1	
//  同步	
//  2

异步

若是在函数返回的时候，调用者还不可以获得预期结果，而是未来经过必定的手段获得结果（例如回调函数），这就是异步。

console.log(1);	
setTimeout(() =## {	
   alert("异步"); 	
},0);	
console.log(2);	
//  结果：	
//  1	
//  2	
//  异步

为何JavaScript要采用异步编程

一开始就说过， JavaScript是一种单线程执行的脚本语言（这多是因为历史缘由或为了简单而采起的设计）。它的单线程表如今任何一个函数都要从头至尾执行完毕以后，才会执行另外一个函数，界面的更新、鼠标事件的处理、计时器（ setTimeout、setInterval等）的执行也须要先排队，后串行执行。假若有一段 JavaScript从头至尾执行时间比较长，那么在执行期间任何 UI更新都会被阻塞，界面事件处理也会中止响应。这种状况下就须要异步编程模式，目的就是把代码的运行打散或者让 IO调用（例如 AJAX）在后台运行，让界面更新和事件处理可以及时地运行。

JavaScript语言的设计者意识到，这时主线程彻底能够无论 IO设备，挂起处于等待中的任务，先运行排在后面的任务。等到 IO设备返回告终果，再回过头，把挂起的任务继续执行下去。

异步运行机制：

全部同步任务都在主线程上执行，造成一个执行栈。
主线程以外，还存在一个 任务队列。只要异步任务有了运行结果，就在 任务队列之中放置一个事件。
一旦 执行栈中的全部同步任务执行完毕，系统就会读取 任务队列，看看里面有哪些事件。那些对应的异步任务，因而结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。

举个例子：

<button οnclick="updateSync()">同步</button>	
<button οnclick="updateAsync()">异步</button>	
<div id="output"></div>	
<script>	
function updateSync() {	
  for (var i = 0; i < 1000000; i++) {	
    document.getElementById('output').innerHTML = i;	
  }	
}	
function updateAsync() {	
  var i = 0;	
  function updateLater() {	
    document.getElementById('output').innerHTML = (i++);	
    if (i < 1000000) {	
      setTimeout(updateLater, 0);	
    }	
  }	
  updateLater();	
}	
</script>

点击 同步按钮会调用 updateSync的同步函数，逻辑很是简单，循环体内每次更新 output结点的内容为 i。若是在其余多线程模型下的语言，你可能会看到界面上以很是快的速度显示从 0到 999999后中止。可是在 JavaScript中，你会感受按钮按下去的时候卡了一下，而后看到一个最终结果 999999，而没有中间过程，这就是由于在 updateSync函数运行过程当中 UI更新被阻塞，只有当它结束退出后才会更新 UI。反之，当点击 异步的时候，会明显的看到 Dom在逐步更新的过程。

从上面的例子中能够明显的看出，异步编程对于 JavaScript来讲是多么多么的重要。

异步编程有什么好处

从编程方式来说固然是同步编程的方式更为简单，可是同步有其局限性一是假如是单线程那么一旦遇到阻塞调用，会形成整个线程阻塞，致使 cpu没法获得有效利用，而浏览器的 JavaScript执行和浏览器渲染是运行在单线程中，一旦遇到阻塞调用不只意味 JavaScript的执行被阻塞更意味整个浏览器渲染也被阻塞这就致使界面的卡死，如果多线程则不可避免的要考虑互斥和同步问题，而互斥和同步带来复杂度也很大，实际上浏览器下由于同时只能执行一段 JavaScript代码这意味着不存在互斥问题，可是同步问题仍然不可避免，以往回调风格中异步的流程控制（其实就是同步问题）也比较复杂。浏览器端的编程方式也便是 GUI编程，其本质就是事件驱动的（鼠标点击， Http请求结束等）异步编程更为天然。

忽然有个疑问，既然如此为何 JavaScript没有使用多线程做业呢？就此就去 Google了一下 JavaScript多线程，在 HTML5推出以后是提供了多线程只是比较局限。在使用多线程的时候没法使用 window对象。若 JavaScript使用多线程，在 A线程中正在操做 DOM，可是 B线程中已经把该 DOM已经删除了（只是简单的小栗子，可能还有不少问题，至于这些历史问题无从考究了）。会给编程做业带来很大的负担。就我而言我想这也就说明了为何 JavaScript没有使用异步编程的缘由吧。

异步与回调

回调到底属于异步么？会想起刚刚开始学习 JavaScript的时候经常吧这两个概念混合在一块儿。在搞清楚这个问题，首先要明白什么是回调函数。

百科：回调函数是一个函数，它做为参数传递给另外一个函数，并在父函数完成后执行。回调的特殊之处在于，出如今“父类”以后的函数能够在回调执行以前执行。另外一件须要知道的重要事情是如何正确地传递回调。这就是我常常忘记正确语法的地方。

经过上面的解释能够得出，回调函数本质上其实就是一种设计模式，例如咱们熟悉的 JQuery也只不过是遵循了这个设计原则而已。在 JavaScript中，回调函数具体的定义为：函数 A做为参数(函数引用)传递到另外一个函数 B中，而且这个函数 B执行函数 A。咱们就说函数 A叫作回调函数。若是没有名称(函数表达式)，就叫作匿名回调函数。

简单的举个小例子：

function test (n,fn){	
    console.log(n);	
    fn && fn(n);	
}	
console.log(1);	
test(2);	
test(3,function(n){	
    console.log(n+1)	
});	
console.log(5)	
//  结果	
//  1	
//  2	
//  3	
//  4	
//  5

经过上面的代码输出的结果能够得出回调函数不必定属于异步，通常同步会阻塞后面的代码，经过输出结果也就得出了这个结论。回调函数，通常在同步情境下是最后执行的，而在异步情境下有可能不执行，由于事件没有被触发或者条件不知足。

回调函数应用场景

资源加载：动态加载js文件后执行回调，加载iframe后执行回调，ajax操做回调，图片加载完成执行回调，AJAX等等。
DOM事件及Node.js事件基于回调机制(Node.js回调可能会出现多层回调嵌套的问题)。
setTimeout的延迟时间为0，这个hack常常被用到，settimeout调用的函数其实就是一个callback的体现
链式调用：链式调用的时候，在赋值器(setter)方法中(或者自己没有返回值的方法中)很容易实现链式调用，而取值器(getter)相对来讲很差实现链式调用，由于你须要取值器返回你须要的数据而不是this指针，若是要实现链式方法，能够用回调函数来实现。
setTimeout、setInterval的函数调用获得其返回值。因为两个函数都是异步的，即：调用时序和程序的主流程是相对独立的，因此没有办法在主体里面等待它们的返回值，它们被打开的时候程序也不会停下来等待，不然也就失去了setTimeout及setInterval的意义了，因此用return已经没有意义，只能使用callback。callback的意义在于将timer执行的结果通知给代理函数进行及时处理。

JavaScript中的那些异步操做

JavaScript既然有不少的辅助线程，不可能全部的工做都是经过主线程去作，既然分配给辅助线程去作事情。

XMLHttpRequest

XMLHttpRequest对象应该不是很陌生的，主要用于浏览器的数据请求与数据交互。 XMLHttpRequest对象提供两种请求数据的方式，一种是 同步，一种是 异步。能够经过参数进行配置。默认为异步。

对于 XMLHttpRequest这里就不做太多的赘述了。

var xhr = new XMLHttpRequest();	
xhr.open("GET", url, false);    //同步方式请求	
xhr.open("GET", url, true);     //异步	
xhr.send();

同步 Ajax请求：

当请求开始发送时， 浏览器事件线程通知 主线程，让 Http线程发送数据请求，主线程收到请求以后，通知 Http线程发送请求， Http线程收到 主线程通知以后就去请求数据，等待服务器响应，过了 N年以后，收到请求回来的数据，返回给 主线程数据已经请求完成， 主线程把结果返回给了 浏览器事件线程，去完成后续操做。

异步 Ajax请求：

当请求开始发送时， 浏览器事件线程通知， 浏览器事件线程通知 主线程，让 Http线程发送数据请求，主线程收到请求以后，通知 Http线程发送请求， Http线程收到 主线程通知以后就去请求数据，并通知 主线程请求已经发送， 主进程通知 浏览器事件线程已经去请求数据，则浏览器事件线程，只须要等待结果，并不影响其余工做。

setInterval&setTimeout

setInterval与 setTimeout同属于异步方法，其异步是经过回调函数方式实现。其二者的区别则 setInterval会连续调用回调函数，则 setTimeout会延时调用回调函数只会执行一次。

setInterval(() =## {	
    alert(1)	
},2000)	
//  每隔2s弹出一次1	
setTimeout(() =## {	
    alert(2)	
},2000)	
//  进入页面后2s弹出2，则不会再次弹出

requestAnimationFarme

requestAnimationFrame字面意思就是去请求动画帧，在没有 API以前都是基于 setInterval，与 setInterval相比， requestAnimationFrame最大的优点是由系统来决定回调函数的执行时机。具体一点讲，若是屏幕刷新率是 60Hz,那么回调函数就每 16.7ms被执行一次，若是刷新率是 75Hz，那么这个时间间隔就变成了 1000/75=13.3ms，换句话说就是， requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引发丢帧现象，也不会致使动画出现卡顿的问题。

举个小例子：

var progress = 0;	
//回调函数	
function render() {	
    progress += 1; //修改图像的位置	
    if (progress < 100) {	
        //在动画没有结束前，递归渲染	
        window.requestAnimationFrame(render);	
    }	
}	
//第一帧渲染	
window.requestAnimationFrame(render);

Object.observe - 观察者

Object.observe是一个提供数据监视的 API，在 chrome中已经可使用。是 ECMAScript 7 的一个提案规范，官方建议的是 谨慎使用级别，可是我的认为这个 API很是有用，例如能够对如今流行的 MVVM框架做一些简化和优化。虽然标准还没定，可是标准每每是滞后于实现的，只要是有用的东西，确定会有愈来愈多的人去使用，愈来愈多的引擎会支持，最终促使标准的生成。从 observe字面意思就能够知道，这玩意儿就是用来作观察者模式之类。

var obj = {a: 1};	
Object.observe(obj, output);	
obj.b = 2;	
obj.a = 2;	
Object.defineProperties(obj, {a: { enumerable: false}}); //修改属性设定	
delete obj.b;	
function output(change) {	
    console.log(1)	
}

Promise

Promise是对异步编程的一种抽象。它是一个代理对象，表明一个必须进行异步处理的函数返回的值或抛出的异常。也就是说 Promise对象表明了一个异步操做，能够将异步对象和回调函数脱离开来，经过 then方法在这个异步操做上面绑定回调函数。

在Promise中最直观的例子就是 Promise.all统一去请求，返回结果。

var p1 = Promise.resolve(3);	
var p2 = 42;	
var p3 = new Promise(function(resolve, reject) {	
  setTimeout(resolve, 100, 'foo');	
});	
Promise.all([p1, p2, p3]).then(function(values) {	
  console.log(values);	
});	
// expected output: Array [3, 42, "foo"]

Generator&Async/Await

ES6的 Generator却给异步操做又提供了新的思路，立刻就有人给出了如何用 Generator来更加优雅的处理异步操做。 Generator函数是协程在 ES6的实现，最大特色就是能够交出函数的执行权（即暂停执行）。整个 Generator函数就是一个封装的异步任务，或者说是异步任务的容器。异步操做须要暂停的地方，都用yield语句注明。 Generator函数的执行方法以下。

function * greneratorDome(){	
    yield "Hello";	
    yield "World";	
    return "Ending";	
}	
let grenDome = greneratorDome();	
console.log(grenDome.next());	
// {value: "Hello", done: false}	
console.log(grenDome.next());	
// {value: "World", done: false}	
console.log(grenDome.next());	
// {value: "Ending", done: true}	
console.log(grenDome.next());	
// {value: undefined, done: true}

粗略实现 Generator

function makeIterator(array) {	
  var nextIndex = 0;	
  return {	
    next: function() {	
      return nextIndex < array.length ?	
        {value: array[nextIndex++], done: false} :	
        {value: undefined, done: true};	
    }	
  };	
}	
var it = makeIterator(['a', 'b']);	
it.next() // { value: "a", done: false }	
it.next() // { value: "b", done: false }	
it.next() // { value: undefined, done: true }

Async/Await与 Generator相似， Async/await是 Javascript编写异步程序的新方法。以往的异步方法无外乎回调函数和 Promise。可是 Async/await创建于Promise之上,我的理解是使用了 Generator函数作了语法糖。 async函数就是隧道尽头的亮光，不少人认为它是异步操做的终极解决方案。

function a(){	
    return new Promise((resolve,reject) =## {	
        console.log("a函数")	
        resolve("a函数")	
    })	
}	
function b (){	
    return new Promise((resolve,reject) =## {	
        console.log("b函数")	
        resolve("b函数")	
    })	
}	
async function dome (){	
    let A = await a();	
    let B = await b();	
    return Promise.resolve([A,B]);	
}	
dome().then((res) =## {	
    console.log(res);	
});

Node.js异步I/O

当咱们发起 IO请求时，调用的是各个不一样平台的操做系统内部实现的线程池内的线程。这里的 IO请求可不只仅是读写磁盘文件，在 *nix中，将计算机抽象了一层，磁盘文件、硬件、套接字等几乎全部计算机资源都被抽象为文件，常说的 IO请求就是抽象后的文件。完成 Node整个异步 IO环节的有事件循环、观察者、请求对象。

事件循环机制

单线程就意味着，全部任务须要排队，前一个任务结束，才会执行后一个任务。若是前一个任务耗时很长，后一个任务就不得不一直等着。因而就有一个概念，任务队列。若是排队是由于计算量大， CPU忙不过来，倒也算了，可是不少时候 CPU是闲着的，由于 IO设备（输入输出设备）很慢（好比 Ajax操做从网络读取数据），不得不等着结果出来，再往下执行。

事件循环是 Node的自身执行模型，正是事件循环使得回调函数得以在 Node中大量的使用。在进程启动时 Node会建立一个 while(true)死循环，这个和 Netty也是同样的，每次执行循环体，都会完成一次 Tick。每一个 Tick的过程就是查看是否有事件等待被处理。若是有，就取出事件及相关的回调函数，并执行关联的回调函数。若是再也不有事件处理就退出进程。

线程只会作一件事情，就是从事件队列里面取事件、执行事件，再取事件、再事件。当消息队列为空时，就会等待直到消息队列变成非空。并且主线程只有在将当前的消息执行完成后，才会去取下一个消息。这种机制就叫作事件循环机制，取一个消息并执行的过程叫作一次循环。

while(true) {	
    var message = queue.get();	
    execute(message);	
}

咱们能够把整个事件循环想象成一个事件队列，在进入事件队列时开始对事件进行弹出操做，直至事件为 0为止。

process.nextTick

process.nextTick()方法能够在当前"执行栈"的尾部-->下一次 EventLoop（主线程读取"任务队列"）以前-->触发 process指定的回调函数。也就是说，它指定的任务老是发生在全部异步任务以前，当前主线程的末尾。（ nextTick虽然也会异步执行，可是不会给其余 io事件执行的任何机会）;

process.nextTick(function A() {	
  console.log(1);	
  process.nextTick(function B(){console.log(2);});	
});	
setTimeout(function C() {	
  console.log(3');	
}, 0);	
// 1	
// 2	
// 3

异步过程的构成要素

异步函数实际上很快就调用完成了，可是后面还有工做线程执行异步任务，通知主线程，主线程调用回调函数等不少步骤。咱们把整个过程叫作异步过程，异步函数的调用在整个异步过程当中只是一小部分。

一个异步过程的整个过程：主线程发一块儿一个异步请求，相应的工做线程接收请求并告知主线程已收到通知（异步函数返回）；主线程能够继续执行后面的代码，同时工做线程执行异步任务；工做线程完成工做后，通知主线程；主线程收到通知后，执行必定的动做（调用回调函数）。

它能够叫作异步过程的发起函数，或者叫作异步任务注册函数。 args是这个函数须要的参数， callbackFn（回调函数）也是这个函数的参数，可是它比较特殊因此单独列出来。因此，从主线程的角度看，一个异步过程包括下面两个要素：

发起函数;
回调函数callbackFn

它们都是主线程上调用的，其中注册函数用来发起异步过程，回调函数用来处理结果。

举个具体的栗子：

setTimeout(function,1000);

其中 setTimeout就是异步过程的发起函数， function是回调函数。

注：前面说得形式 A(args...,callbackFn)只是一种抽象的表示，并不表明回调函数必定要做为发起函数的参数，例如：

var xhr = new XMLHttpRequest();	
xhr.onreadystatechange = xxx;	
xhr.open('GET'， url);	
xhr.send();

总结

JavaScript的异步编程模式不只是一种趋势，并且是一种必要，所以做为 HTML5开发者是很是有必要掌握的。采用第三方的异步编程库和异步同步化的方法，会让代码结构相对简洁，便于维护，推荐开发人员掌握一二，提升团队开发效率。

做者：Aaron

https://segmentfault.com/a/1190000019253700

▼

原创系列推荐

▼

回复“加群”与大佬们一块儿交流学习~

点这，与你们一块儿分享本文吧~