JS的异步分析

耐得住寂寞也是人生的一中境界

同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行

一、堆栈

先讲讲堆（Heap）和栈（Stack）的概念，这里主要讲一下他们的区别

1. 每个线程分配一个栈，每个进程分配一个堆。
2. 栈的大小是确定的，数据超出就会发生stack overflow(内存溢出)，而堆的大小是不确定的，可以不断增加。
3. 占用空间确定，局部的数据一般存在栈中（简单数据类型，String、Number、Boolean类型等），其他类型则存放在堆中（复杂类型，Object和function等）
4. 函数内的局部变量（排除被其他引用例如闭包），函数执行后内部变量销毁，释放内存， 但是存放在heap中的对象是不会被销毁，知道系统的垃圾清理机制。

二、异步的三概念

异步程序的三个有关概念：宏任务、微任务、事件循环机制（Event Loop）

1.宏任务
宏任务是异步程序的一种，主要有setTimeOut、setInverter、setImmediate 、 MessageChannel、script等。

2.微任务
微任务也是异步程序的一种，主要有promise回调函数、process.nextTick。

3. Event Loop
   主线程从“事件队列”中读取事件，这个过程是循环不断的，所以这种运行机制又称为事件循环（Event Loop)

三、异步原理

1. 都在主线程上执行（js只有一个主线程），形成一个执行栈，这个执行栈是有循序的（先进先出）。
2. 主线程外还有个异步堆，只要异步任务有了运行结果，就会在“事件队列”（Event queue）中放置一个事件。
3. 主线程的同步任务执行完毕后，系统才会去读取“事件队列”，进入执行栈，开始执行。

4. 主线程的执行栈不断重复第三步，（执行栈完成一个异步任务后，再去读取“事件队列”中事件）

   
   
   

   jsEvent.png

四、宏任务和微任务

js异步有一个机制，就是遇到宏任务，先执行宏任务，将宏任务放入eventqueue，然后在执行微任务，将微任务放入eventqueue，这两个queue不是一个queue。当你往外拿的时候先从微任务的queue里拿这个回掉函数，然后再从宏任务的queue上拿宏任务的回掉函数。
取事件循序： 微任务 ==> 宏任务

hong_wei.png

五、实战

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

let p = () => {
    console.log(5)
    return new Promise((resolve) => {
        console.log(2)
        resolve()
    })
}

console.log(4);　

p()
.then(function(){
  console.log(3)
});

讲解：主线程先执行同步任务，按照同步任务执行循序输出4、5、2。继续执行异步任务，setTimeout为宏任务，而promise回调为为任务，则先输出微任务事件3，最后输出宏任务事件1.
4、5、2、3、1