JavaScript异步编程 | 掘金技术征文

还记得一年前写过一篇关于JavaScript异步编程简述的文章，主要介绍了JavaScript的单线程特性与异步编程实现方式：
回调函数，发布订阅模式，Promise对象三种，关于Promise介绍的比较简略，决定再详细总结一下，既是对上一篇文章的补充，也能以更深入的方式分享本身关于异步编程的理解。

前言

若是你有志于成为一个优秀的前端工程师，或是想要深刻学习JavaScript，异步编程是必不可少的一个知识点，这也是区分初级，中级或高级前端的依据之一。若是你对异步编程没有太清晰的概念，那么我建议你花点时间学习JavaScript异步编程，若是你对异步编程有本身的独特理解，也欢迎阅读本文，一块儿交流。

同步与异步

介绍异步以前，回顾一下，所谓同步编程，就是计算机一行一行按顺序依次执行代码，当前代码任务耗时执行会阻塞后续代码的执行。

同步编程，便是一种典型的请求-响应模型，当请求调用一个函数或方法后，需等待其响应返回，而后执行后续代码。

通常状况下，同步编程，代码按序依次执行，能很好的保证程序的执行，可是在某些场景下，好比读取文件内容，或请求服务器接口数据，须要根据返回的数据内容执行后续操做，读取文件和请求接口直到数据返回这一过程是须要时间的，网络越差，耗费时间越长，若是按照同步编程方式实现，在等待数据返回这段时间，JavaScript是不能处理其余任务的，此时页面的交互，滚动等任何操做也都会被阻塞，这显然是及其不友好，不可接受的，而这正是须要异步编程大显身手的场景，以下图，耗时任务A会阻塞任务B的执行，等到任务A执行完才能继续执行B：

同步编程任务阻塞流程

当使用异步编程时，在等待当前任务的响应返回以前，能够继续执行后续代码，即当前执行任务不会阻塞后续执行。

异步编程，不一样于同步编程的请求-响应模式，其是一种事件驱动编程，请求调用函数或方法后，无需当即等待响应，能够继续执行其余任务，而以前任务响应返回后能够经过状态、通知和回调来通知调用者。

多线程

前面说明了异步编程能很好的解决同步编程阻塞的问题，那么实现异步的方式有哪些呢？一般实现异步方式是多线程，如C#, 即同时开启多个线程，不一样操做能并行执行，以下图，耗时任务A执行的同时，在线程二中任务B也能够执行：

多线程异步编程无阻塞流程

JavaScript单线程

JavaScript语言执行环境是单线程的，单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行，而使用异步实现时，多个任务能够并发执行。那么JavaScript的异步编程如何实现呢，下一节将详细阐述其异步机制。

并行与并发

前文提到多线程的任务能够并行执行，而JavaScript单线程异步编程能够实现多任务并发执行，这里有必要说明一下并行与并发的区别。

• 并行，指同一时刻内多任务同时进行；
• 并发，指在同一时间段内，多任务同时进行着，可是某一时刻，只有某一任务执行；

一般所说的并发链接数，是指浏览器向服务器发起请求，创建TCP链接，每秒钟服务器创建的总链接数，而假如，服务器处10ms能处理一个链接，那么其并发链接数就是100。

JavaScript异步机制

本节介绍JavaScript异步机制，首先来看一个例子：

for (var i = 0; i < 5; i ++) {
        setTimeout(function(){
            console.log(i);
        }, 0);
    }
    console.log(i);
    //5 ; 5 ; 5 ; 5; 5复制代码

应该明白最后输出的全是5：

1. i在此处是for循环所在上下文环境的变量，有且只有一个i;
2. 循环结束时i==5;
3. JavaScript单线程事件处理器在线程空闲前不会执行下一事件。

如上面第三点所述，若是要真正理解以上例子中的setTimeout()，及JavaScript异步机制，须要理解JavaScript的事件循环和并发模型。

并发模型（Concurrency model）

目前，咱们已经知道，JavaScript执行异步任务时，不须要等待响应返回，能够继续执行其余任务，而在响应返回时，会获得通知，执行回调或事件处理程序。那么这一切具体是如何完成的，又以什么规则或顺序运做呢？接下来咱们须要解答这个问题。

注：回调和事件处理程序本质上并没有区别，只是在不一样状况下，不一样的叫法。

前文已经提到，JavaScript异步编程使得多个任务能够并发执行，而实现这一功能的基础是JavScript拥有一个基于事件循环的并发模型。

堆栈与队列

介绍JavaScript并发模型以前，先简单介绍堆栈和队列的区别：

• 堆（heap）：内存中某一未被阻止的区域，一般存储对象（引用类型）；
• 栈（stack）：后进先出的顺序存储数据结构，一般存储函数参数和基本类型值变量（按值访问）；
• 队列（queue）：先进先出顺序存储数据结构。

事件循环（Event Loop）

JavaScript引擎负责解析，执行JavaScript代码，但它并不能单独运行，一般都得有一个宿主环境，通常如浏览器或Node服务器，前文说到的单线程是指在这些宿主环境建立单一线程，提供一种机制，调用JavaScript引擎完成多个JavaScript代码块的调度，执行（是的，JavaScript代码都是按块执行的），这种机制就称为事件循环（Event Loop）。

注：这里的事件与DOM事件不要混淆，能够说这里的事件包括DOM事件，全部异步操做都是一个事件，诸如ajax请求就能够看做一个request请求事件。

JavaScript执行环境中存在的两个结构须要了解：

• 消息队列(message queue)，也叫任务队列（task queue）：存储待处理消息及对应的回调函数或事件处理程序；
• 执行栈(execution context stack)，也能够叫执行上下文栈：JavaScript执行栈，顾名思义，是由执行上下文组成，当函数调用时，建立并插入一个执行上下文，一般称为执行栈帧（frame），存储着函数参数和局部变量，当该函数执行结束时，弹出该执行栈帧；

注：关于全局代码，因为全部的代码都是在全局上下文执行，因此执行栈顶老是全局上下文就很容易理解，直到全部代码执行完毕，全局上下文退出执行栈，栈清空了；也便是全局上下文是第一个入栈，最后一个出栈。

任务

分析事件循环流程前，先阐述两个概念，有助于理解事件循环：同步任务和异步任务。

任务很好理解，JavaScript代码执行就是在完成任务，所谓任务就是一个函数或一个代码块，一般以功能或目的划分，好比完成一次加法计算，完成一次ajax请求；很天然的就分为同步任务和异步任务。同步任务是连续的，阻塞的；而异步任务则是不连续，非阻塞的，包含异步事件及其回调，当咱们谈及执行异步任务时，一般指执行其回调函数。

事件循环流程

关于事件循环流程分解以下：

1. 宿主环境为JavaScript建立线程时，会建立堆(heap)和栈(stack)，堆内存储JavaScript对象，栈内存储执行上下文；
2. 栈内执行上下文的同步任务按序执行，执行完即退栈，而当异步任务执行时，该异步任务进入等待状态（不入栈），同时通知线程：当触发该事件时（或该异步操做响应返回时），需向消息队列插入一个事件消息；
3. 当事件触发或响应返回时，线程向消息队列插入该事件消息（包含事件及回调）；
4. 当栈内同步任务执行完毕后，线程从消息队列取出一个事件消息，其对应异步任务（函数）入栈，执行回调函数，若是未绑定回调，这个消息会被丢弃，执行完任务后退栈；
5. 当线程空闲（即执行栈清空）时继续拉取消息队列下一轮消息（next tick，事件循环流转一次称为一次tick）。

使用代码能够描述以下：

var eventLoop = [];
    var event;
    var i = eventLoop.length - 1; // 后进先出

    while(eventLoop[i]) {
        event = eventLoop[i--]; 
        if (event) { // 事件回调存在
            event();
        }
        // 不然事件消息被丢弃
    }复制代码

这里注意的一点是等待下一个事件消息的过程是同步的。

并发模型与事件循环

var ele = document.querySelector('body');

    function clickCb(event) {
        console.log('clicked');
    }
    function bindEvent(callback) {
        ele.addEventListener('click', callback);
    }    

    bindEvent(clickCb);复制代码

针对如上代码咱们能够构建以下并发模型：

JavaScript并发模型

如上图，当执行栈同步代码块依次执行完直到碰见异步任务时，异步任务进入等待状态，通知线程，异步事件触发时，往消息队列插入一条事件消息；而当执行栈后续同步代码执行完后，读取消息队列，获得一条消息，而后将该消息对应的异步任务入栈，执行回调函数；一次事件循环就完成了，也即处理了一个异步任务。

再谈setTimeout(...0)

了解了JavaScript事件循环后咱们再看前文关于setTimeout(...0)的例子就比较清晰了：

setTimeout(...0)所表达的意思是：等待0秒后（这个时间由第二个参数值肯定），往消息队列插入一条定时器事件消息，并将其第一个参数做为回调函数；而当执行栈内同步任务执行完毕时，线程从消息队列读取消息，将该异步任务入栈，执行；线程空闲时再次从消息队列读取消息。

再看一个实例：

var start = +new Date();
    var arr = [];

    setTimeout(function(){
        console.log('time: ' + (new Date().getTime() - start));
    },10);

    for(var i=0;i<=1000000;i++){
        arr.push(i);
    }复制代码

执行屡次输出以下：

setTimeout(...0)

在setTimeout异步回调函数里咱们输出了异步任务注册到执行的时间，发现并不等于咱们指定的时间，并且两次时间间隔也都不一样，考虑如下两点：

• 在读取消息队列的消息时，得等同步任务完成，这个是须要耗费时间的；
• 消息队列先进先出原则，读取此异步事件消息以前，可能还存在其余消息，执行也须要耗时；

因此异步执行时间不精确是必然的，因此咱们有必要明白不管是同步任务仍是异步任务，都不该该耗时太长，当一个消息耗时太长时，应该尽量的将其分割成多个消息。

Web Workers

每一个Web Worker或一个跨域的iframe都有各自的堆栈和消息队列，这些不一样的文档只能经过postMessage方法进行通讯，当一方监听了message事件后，另外一方才能经过该方法向其发送消息，这个message事件也是异步的，当一方接收到另外一方经过postMessage方法发送来的消息后，会向本身的消息队列插入一条消息，然后续的并发流程依然如上文所述。

JavaScript异步实现

关于JavaScript的异步实现，之前有：回调函数，发布订阅模式，Promise三类，而在ES6中提出了生成器（Generator）方式实现，关于回调函数和发布订阅模式实现可参见另外一篇文章，后续将推出一篇详细介绍Promise和Generator。

欢迎踩踩个人我的博客

参考：

Concurrency model and Event Loop

掘金技术征文活动的连接： https://juejin.im/post/58d8e99261ff4b006cd6874d