title: JavaScript 异步队列
date: 2022-11-10 13:30
tags: [微任务, 宏任务]
categories: 前端随笔
前言
了解JavaScript 异步队列实现，我们需要先了解什么是EventLoop，什么是同步任务，什么是异步任务，异步代码中才区分宏任务微任务，什么是宏任务、微任务？宏任务、微任务有哪些？又是怎么执行的？
一、 EventLoop
JavaScript 是单线程的，包含了同步任务与异步任务，同步任务直接在调用栈(主线程)中执行，异步任务会放入任务队列(TaskQueue)中，等待同步任务全部执行完毕再取出来，所以如果异步之中仍有异步任务，在调用栈中执行时会继续放入任务队列中，这就是 JS 的事件循环机制(EventLoop)。
二、异步任务和同步任务
js 是一种单线程语言，简单的说就是：只有一条通道，那么在任务多的情况下，就会出现拥挤的情况，这种情况下就产生了 ‘多线程’ ，但是这种“多线程”是通过单线程模仿的，一切javascript多线程都是纸老虎！那么就产生了同步任务和异步任务。
-
同步和异步任务分别进入不同的执行"场所"，同步的进入主线程，异步的进入Event Table并注册函数。
-
当指定的事情完成时，Event Table会将这个函数移入Event Queue。
-
主线程内的任务执行完毕为空，会去Event Queue读取对应的函数，进入主线程执行。
-
上述过程会不断重复，也就是常说的Event Loop(事件循环)。
那怎么知道主线程执行栈为空啊？js引擎存在monitoring process进程，会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。
let data = [];
$.ajax({
url:www.javascript.com,
data:data,
success:() => {
console.log('发送成功!');
}
})
console.log('代码执行结束');
- ajax进入Event Table，注册回调函数
success。 - 执行
console.log('代码执行结束')。 - ajax事件完成，回调函数
success进入Event Queue。 - 主线程从Event Queue读取回调函数
success并执行。
三、宏任务和微任务是什么呢？
| 宏任务（macrotask） | 微任务（microtask） | |
|---|---|---|
| 谁发起的 | 宿主（Node、浏览器） | JS引擎 |
| 具体事件 | 1. script (可以理解为外层同步代码)2. setTimeout/setInterval3. UI rendering/UI事件4. postMessage，MessageChannel5. setImmediate，I/O（Node.js） | 1. Promise2. MutaionObserver3. Object.observe（已废弃；Proxy 对象替代）4. process.nextTick（Node.js） |
| 谁先执行 | 后运行 | 先运行 |
| 会触发新一轮Tick吗 | 会 | 不会 |
1.宏任务、微任务是怎么执行的？
执行顺序：先执行同步代码，遇到异步宏任务则将异步宏任务放入宏任务队列中，遇到异步微任务则将异步微任务放入微任务队列中，当所有同步代码执行完毕后，再将异步微任务从队列中调入主线程执行，微任务执行完毕后再将异步宏任务从队列中调入主线程执行，一直循环直至所有任务执行完毕。
例如：
setTimeout(()=>{
new Promise(resolve =>{
resolve();
}).then(()=>{
console.log('test');
});
console.log(4);
});
new Promise(resolve => {
resolve();
console.log(1)
}).then( () => {
console.log(3);
Promise.resolve().then(() => {
console.log('before timeout');
}).then(() => {
Promise.resolve().then(() => {
console.log('also before timeout')
})
})
})
console.log(2);
1.遇到setTimeout，异步宏任务，将() => {console.log(4)}放入宏任务队列中；
2.遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出1；
3.而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中 4.遇到同步任务console.log(2)，输出2；主线程中同步任务执行完 5.从微任务队列中取出任务到主线程中，输出3，此微任务中又有微任务，Promise.resolve().then(微任务a).then(微任务b)，将其依次放入微任务队列中； 6.从微任务队列中取出任务a到主线程中，输出 before timeout； 7.从微任务队列中取出任务b到主线程中，任务b又注册了一个微任务c，放入微任务队列中； 8.从微任务队列中取出任务c到主线程中，输出 also before timeout；微任务队列为空 9.从宏任务队列中取出任务到主线程，此任务中注册了一个微任务d，将其放入微任务队列中，接下来遇到输出4，宏任务队列为空 10.从微任务队列中取出任务d到主线程 ，输出test，微任务队列为空
四、关系总结
上图也是盗的，自己对这些做个笔记，加深影响，到时候回顾起来也比较方便！
