Event loop
首先什么是Event loop, Event loop 是一个执行模型，就是说明js在浏览器中的顺序执行，首先我们来从上到下来逐步分析
宏队列 和 微队列
宏队列（macrotase)，也叫task queues, 主要的这些异步任务有：
- setTimeout
- setInterval
- requestAnimationFrame
- UI rendering
微对垒（microtask), 这些异步任务有 - Promise
- Object.observe
- Mutation.Observe
具体流程
image.png
这张图把Event loop完整的描述出来了
- 执行全局的同步代码
- 调用task Queue( 这里值得注意哦，每次执行一个macrotask)
- 然后执行micrtask queue, 这里全部执行完 【如果mircrtask还嵌套这mirtask queue，则继续往下执行】
4，5 反复执行2，3操作
小结：
- 宏队列一次只从队列中取一个任务执行，执行完后就去执行微任务队列中的任务
- 微任务的队列会被依次去出来，直到对列为空
- UI rending一般是凡在mircrotask 后执行
eg:
console.log(1);
setTimeout(() => {
console.log(2);
Promise.resolve().then(() => {
console.log(3)
});
});
new Promise((resolve, reject) => {
console.log(4)
resolve(5)
}).then((data) => {
console.log(data);
})
setTimeout(() => {
console.log(6);
})
console.log(7);
答案： 1 4 7 5 2 3 6
eg2:
console.log(1);
setTimeout(() => {
console.log(2);
Promise.resolve().then(() => {
console.log(3)
});
});
new Promise((resolve, reject) => {
console.log(4)
resolve(5)
}).then((data) => {
console.log(data);
Promise.resolve().then(() => {
console.log(6)
}).then(() => {
console.log(7)
setTimeout(() => {
console.log(8)
}, 0);
});
})
setTimeout(() => {
console.log(9);
})
console.log(10);
答案：1 4 10 5 6 7 2 3 9 8
node Event Loop:
node Event Loop
参考：
https://juejin.im/post/5b8f76675188255c7c653811
https://juejin.im/entry/58d4df3b5c497d0057eb99ff
