event loop 事件循环及案例

前言
大家都知道，js是单线程脚本语言，在同一时间只能做同一件事，为了协调事件，用户交互，脚本，ui渲染和网络处理等行为，防止主线程阻塞，event loop方案应用而生

js为什么是单线程？

javascript的单线程，和它的用途有关，作为浏览器脚本语言，javascript的作用主要是处理用户的交互和操作dom。这决定了他只能是单线程，否则会带来很复杂的同步问题
比如，一个javascript有两个线程，一个线程在某个dom节点上添加内容，另一个线程删除这个节点，这样浏览器到底已那个为准呢
为了利用多核cpu的计算能力，html5提出web workder标准，允许javascript脚本创建多个线程，但是子线程完全接受主线程的控制，而且不能操作dom，所以这个标准并没有改变javascript单线程的本质

执行栈和任务队列

执行栈：

javascript在运行是会将变量存放在堆(heap)和栈(stack)中,堆里面通常存放着一些对象，
变量和对象的指针一般存放在栈中。javascript在执行时，同步任务拍好队，在主线程上按顺序执行，前面的执行完了，再执行后面的，排队的地方就叫做执行栈

任务队列

所有的任务可以分为同步任务和异步任务，同步任务，顾名思义，就是立即执行的任务，同步任务会直接进入到主线程中执行；而异步任务，就是异步执行的任务，比如ajax请求，setTimeout定时函数都属于异步任务，异步任务会通过任务队列的机制来进行协调
当遇到一个异步事件后，并不会一直等待这个异步事件返回结果，而是将这个事件挂在与执行栈不同的队列中，这个队列称为任务队列

事件循环

同步和异步任务分别进入不同的执行环境，同步的进入主线程，异步的进入任务队列。主线程的任务执行完毕，会去任务队列中读取对应的任务，推入到主线程执行，上述过程的不断重复就是事件循环
这里还有一张图来展示这个过程

v2-da078fa3eadf3db4bf455904ae06f84b_r.jpg

macro task与micro task

以上的事件循环过程是一个宏观的表述，实际上异步任务之间并不相同，因此他们的执行优先级别也有区别，不懂的异步任务被分为两类：微任务（micro task）和宏任务（macro task）
$\color{red}{宏任务:script、setTimeOut、setInterval}$
$\color{red}{微任务:promise.then、promise.nextTick(node)}$

在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去。并且在当前执行栈为空的时候，主线程会查看微任务队列是否有事件存在。如果不存在，那么再去宏任务队列中取出一个事件并把对应的回到加入当前执行栈；如果存在，则会依次执行队列中事件对应的回调，直到微任务队列为空，然后去宏任务队列中取出最前面的一个事件，把对应的回调加入当前执行栈...如此反复，进入循环。

总结：优先执行同步任务，同步任务执行完之后，查找任务队列中是否有微任务，如果有，先执行微任务，微任务执行完后，在执行宏任务

分析事例代码

事例一：

console.log('start');
setTimeout(function() {
    console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
    console.log('promise1');
}).then(function() {
    console.log('promise2');
});
console.log('end');

解析：
1.整体 script 作为第一个宏任务进入主线程，遇到 console.log，输出 start
2.遇到 setTimeout，其回调函数被分发到宏任务 Event Queue 中
3.遇到 Promise，其 then函数被分到到微任务 Event Queue 中,记为 then1，之后又遇到了 then 函数，将其分到微任务 Event Queue 中，记为 then2
4.遇到 console.log，输出end
5.执行微任务，首先执行then1，输出 promise1, 然后执行 then2，输出 promise2，这样就清空了所有微任务
6.执行 setTimeout 任务，输出 setTimeout 至此，输出的顺序是：script start, script end, promise1, promise2, setTimeout

事例二

console.log('1');
async function async1() {
    console.log('2');
    await async2();
    console.log('3');
}
async function async2() {
    console.log('4');
}
process.nextTick(function() {
    console.log('5');
}) //node里面的
setTimeout(function() {
    console.log('6');
    process.nextTick(function() {
        console.log('7');
    })
    new Promise(function(resolve) {
        console.log('8');
        resolve();
    }).then(function() {
        console.log('9')
    })
})
async1();
new Promise(function(resolve) {
    console.log('10');
    resolve();
}).then(function() {
    console.log('11');
});
console.log('12');

解析：
1.首先执行同步任务输出 1 2 4 10 12
2.执行微任务 5 3 11
3.执行宏任务 setTimeout ,执行同步任务 6 8 微任务 7 9
输出结果为 1 2 4 10 12 5 3 11 6 8 7 9

Promise和async中的立即执行

我们知道Promise中的异步体现在then和catch中，所以写在Promise中的代码是被当做同步任务立即执行的。而在async/await中，在出现await出现之前，其中的代码也是立即执行的。
async定义的是一个Promise函数和普通函数一样只要不调用就不会进入事件队列。
async内部如果没有主动return Promise，那么async会把函数的返回值用Promise包装。
await关键字必须出现在async函数中，await后面不是必须要跟一个异步操作，也可以是一个普通表达式。
遇到await关键字，await右边的语句会被立即执行然后await下面的代码进入等待状态，等待await得到结果。

await后面如果不是 promise 对象, await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，把这个非promise的东西，作为 await表达式的结果。 await后面如果是 promise 对象，await 也会暂停async后面的代码，先执行async外面的同步代码，等着 Promise 对象 fulfilled，然后把 resolve 的参数作为 await 表达式的运算结果