了解js执行顺序及机制，更好的理解js特性，理顺代码中的一些异步操作 🚀
- JavaScript是单线程的语言
- Event Loop是javascript的执行机制
- synchronous：同步任务、asynchronous：异步任务、task queue/callback queue：任务队列、execution context stack：执行栈、heap：堆、stack：栈、macro-task：宏任务、micro-task：微任务
背景
JS 从诞生起就是一门单线程的语言。至于为什么是单线程，是因为作者认为 JS 是在浏览器执行的脚本语言，对它的要求不是很高，早期的网页对 JS 需求没那么高，都是轻量级的。而且写起来一定要简单，而多线程逻辑会造成交互、DOM 操作复杂。
单线程问题，任务执行阻塞，具现到页面上：ajax数据请求，http延迟，等待完成，其他操作无法执行，页面长时间无法接受反应。像页面操作（点击）的代码就无法立即执行，只是 WebAPIs 把 callback 放到任务队列里而已，用户就会认为页面卡住了，操作无反应了。
另外，UI 渲染和 JS 执行是互斥的。虽然两者属于不同的线程，但是由于 JS 执行结果可能会对页面产生影响，所以浏览器对此做了处理，大部分情况下 JS 线程执行，render 线程就会暂停，当 JS 的同步代码执行完再去渲染。
所以 JS 用异步任务 (asynchronous callback)去解决这个问题。
阻塞、异步
fetch('url'); //假设是同步 fetch，阻塞代码执行。
render(); // 阻塞情况下无法执行
上面提到的这种执行模式算是阻塞执行，也就是在任务返回结果之前，JS 引擎线程 pending 了，导致后面的任务阻塞
对于浏览器这种实时性、交互性要求高的场景，肯定是不允许的。所以首先要非阻塞调用。非阻塞调用就是浏览器发送的这个请求任务，不需要等待结果就立即返回，但是具体数据回没回来，就需要 JS 线程不定时的查看了。而更好的做法是，这个请求任务完成后（得到数据），通知我们，让我们去获取数据。这就需要用到异步 I/O 的模式。主线程执行遇到异步任务（请求），不需要等待结果返回，只需要代码块执行完毕，即去运行其他的任务。当异步任务完成后，会以某种方式“通知”主线程，假如主线程处于闲置，就会接收异步任务的结果，亦或是没有结果。在 JS 中，异步任务执行完都是以 callback 的形式，返回给主线程结果的。所以，JS 是这种异步非阻塞的方式，去满足页面实时交互的需求，避免“页面”假死的。
浏览器小补充：
现代浏览器一个 tab 的线程包括不局限于：
- GUI 渲染线程
- JS引擎线程
- 事件触发线程
- 定时器触发线程
- 异步http请求线程
JS 中的异步操作是通过 WebAPIs 去支持的，常见的有 XMLHttpRequest，setTimeout，事件回调（onclik, onscroll等）。而这几个 API 浏览器都提供了单独的线程去运行，所以才会有地方去做定时器的计时，request 的回调。
即当代码中出现这几个定义的异步任务，是浏览器提供能力去满足需求，是不跟 JS 引擎同属一个线程的，是浏览器实现了它们跟 JS 引擎的通信。
任务队列
上面提到了异步任务完成后，会通知主线程，以 callback 的方式获取结果或者执行回调。但是如果当前的主线程是忙碌的，异步任务的信号无法接收到怎么办呢？
所以还需要一个地方保存这些 callback，也就是任务队列(task queue)
🔥描述：就是主线程运行产生堆、栈，执行栈遇到异步任务（浏览器通常是调用 WebAPIs），不会等待，而是继续执行往下执行。而异步任务就会以各种方式，把 callback 加入任务队列中。待当前执行栈执行完毕，也就是出栈完毕，主线程就会从任务队列里读取第一个 callback，执行。同样的生成执行栈，结束后主线程如果发现任务队列中还有 callback，则会继续取出执行，如此重复操作。而这种循环的机制，就称之为事件循环（Event Loop）。
Event Loop
一种确保了这些异步任务的有序执行的机制
- heap（堆）是用户主动请求而划分出来的内存区域，比如你new Object()，就是将一个对象存入堆中，可以理解为heap存对象。
- stack（栈）是由于函数运行而临时占用的内存区域，函数都存放在栈里。
setTimeout(() => {
console.log(1);
}, 1000);
setTimeout(() => {
console.log(2);
}, 0); // 先进 task queue，等待前一个任务执行完成（单线程），立即执行，不需要读秒后再放入event queue
console.log(3);
for (let i = 0; i < 10000; i++) {
console.log(1);
}
setTimeout(() => {
console.log(4);
}, 100); // 最后放入task queue
// 3, 10000 * 1, 2, 1, 4
有时delay时间并不准确
setTimeout(() => {
console.log(1);
setTimeout(() => {
console.log(2);
}, 99);
}, 100);
setTimeout(() => {
console.log(3);
}, 200);
console.log(4);
结果就不确定了，取决于同步代码的计算时间，所以定时器这个东西还是比较坑的，delay 并不准确，取决于你的 JS 线程是否闲置以及执行效率。
宏任务/微任务
⌛js异步有一个机制，就是遇到宏任务，先执行宏任务，将宏任务放入eventqueue，然后在执行微任务，将微任务放入eventqueue最骚的是，这两个queue不是一个queue。当你往外拿的时候先从微任务里拿这个回掉函数，然后再从宏任务的queue上拿宏任务的回掉函数🔥
- 宏任务一般是：包括整体代码script，setTimeout，setInterval、setImmediate。
- 微任务：原生Promise(有些实现的promise将then方法放到了宏任务中)、process.nextTick、Object.observe(已废弃)、 MutationObserver记住就行了。
// 1. 加入 tasks 队列
setTimeout(()=>{
// 7. 首次 eventloop 结束，从 tasks 中取出 setTimeout callback，执行。
console.log('timer');
// 8. 加入 microtask 中
Promise.resolve().then(function() {
console.log('promise1')
})
// 9. task 执行完，清空 micro 队列，输出 'promise1'
}, 0);
// 2. 加入 microtask 队列
Promise.resolve().then(function() {// 5. 第一个 microtask 任务
console.log('promise2');
// 6. 把 promise3 加入 micro 队列，发现队列不为空，执行输出 'promise3'
Promise.resolve().then(function() {
console.log('promise3');
})
})
// 3. 执行，输出 'script'
console.log('script');
// 4. 第一个 eventloop task 阶段完毕, 开始执行 microtask queue
// result: script, promise2, promise3, timer, promise1
Promise.resolve().then(()=>{
console.log('Promise1') // 3、先执行微任务，清空micro-task
setTimeout(()=>{ // 4、宏任务 callback 放入 event queue
console.log('setTimeout2') // 9执行
},0)
})
setTimeout(()=>{ // 2 宏任务 callback 放入 event queue
console.log('setTimeout1') // 5、执行callback
new Promise((resolve) => {
console.log('promise start'); // 6、执行同步任务
resolve();
}).then(()=>{// 7、微任务
console.log('Promise2') ///8、执行微任务
})
},0)
console.log('start'); // 1、同步任务
Node
Node环境下异步执行顺序与浏览器下js执行顺序不完全一致
node新加了一个微任务(process.nextTick)和一个宏任务(setImmediate)
简单的来说，就是node在处理一个执行队列的时候不管怎样都会先执行完当前队列，然后再清空微任务队列，再去执行下一个队列。
console.log('start');
setTimeout(function() {
console.log(2);
new Promise((resolve) => {
console.log('promise');
resolve();
}).then(() => {
console.log('promise then');
})
});
setTimeout(() => {
console.log(3);
})
console.log('end');
// node: start, end, 2, promise, 3, promise then
// 浏览器js: start, end, 2, promise, promise then, 3
🔥 微任务中process.nextTick比promise.then快
面试
console.log('1');
setTimeout(function() {
console.log('2');
process.nextTick(function() {
console.log('3');
})
new Promise(function(resolve) {
console.log('4');
resolve();
}).then(function() {
console.log('5')
})
})
process.nextTick(function() {
console.log('6');
})
new Promise(function(resolve) {
console.log('7');
resolve();
}).then(function() {
console.log('8')
})
setTimeout(function() {
console.log('9');
process.nextTick(function() {
console.log('10');
})
new Promise(function(resolve) {
console.log('11');
resolve();
}).then(function() {
console.log('12')
})
})
// 1，7，6，8，2，4，3，5，9，11，10，12
// node环境下的事件监听依赖libuv驱动I/O库与前端环境不完全相同，输出顺序可能会有误差
