js的回调队列和事件循环

console.log('start');
    
setTimeout(() => {
    console.log('timeout');
}, 0);

console.log('end');

执行顺序：

1. 执行进入console.log('start')，将其放入调用栈中

2. console.log('start') 后执行return，弹出栈顶

3. 执行进入settimeout函数，将其放入调用栈

4. 由于settimeout是Web ApIs的一部分，所以由web APIs来处理（等待2秒）

5. 执行进入console.log('end')，将其放入调用栈

6. console.log('end')后执行return，弹出栈顶

7. 2秒等待完成后，web APIs将settimeout的回调函数放入回调队列中

8. 事件循环会检测当前调用栈中是否为空？将回调队列中的函数放入调用栈中 ： 继续等待

 

因此执行效果如下：

start
end
timeout

微任务(microtask)和宏任务(macrotask)

1. 微任务

优先级：process.nextTick > Promise > MutationObserver

2. 宏任务

优先级：主代码块 > setImmediate > MessageChannel > setTimeout / setInterval

当当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行

setTimeout(() => {
	console.log('timeout');
}, 0);

new Promise((resolve, reject) => {
	console.log(2);
	resolve(3);
}).then((val) => {
	console.log(val);
})

console.log('end');

tip: 在执行到new Promise的时候会立马新建一个promise对象并立即执行 

运行结果：

2
end
3
timeout

参考：https://www.cnblogs.com/cangqinglang/p/8967268.html

https://blog.csdn.net/corner2030/article/details/79317413

https://juejin.im/post/5d2603186fb9a07f021a29dc