JS Event Loop事件循环 深度解析

JS事件循环

众所周知，JavaScript是一个单线程的脚本语言，如果一个任务耗时过长，那么后一个任务也必须等着。这样就会导致如果某个任务执行任务事件过长，就会导致下方的任务迟迟不能执行，从而导致页面一直处于加载状态等各种情况，于是就有了同步任务和异步任务。异步任务又分宏任务与微任务

而Event Loop即事件循环就是用来处理异步任务，来保证浏览器或Node运行时不会阻塞的一种机制

宏任务

Macrotask可以理解是每次执行栈执行的代码就是一个宏任务（包括每次从事件队列中获取一个事件回调并放到执行栈中执行，事件的触发、非JS部分以及定时器都可以归为宏任务

浏览器为了能够使得JS内部Macrotask与DOM任务能够有序的执行，会在一个Macrotask执行结束后，在下一个Macrotask 执行开始前，对页面进行重新渲染，流程如下：

Macrotask->渲染->Macrotask->…

常见的宏任务包含：

script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)

微任务

Microtask可以理解是在当前 Macrotask 执行结束后立即执行的任务。也就是说，在当前Macrotask任务后，下一个Macrotask之前，在渲染之前。

所以它的响应速度相比setTimeout（setTimeout是Macrotask）会更快，因为无需等渲染。也就是说，在某一个Macrotask执行完后，就会将在它执行期间产生的所有Microtask都执行完毕（在渲染前）。

常见的微任务包含：

Promise.then
Object.observe
MutaionObserver
process.nextTick(Node.js 环境)

运行机制

在事件循环中，每进行一次循环操作称为 tick，每一次 tick 的任务处理模型是比较复杂的，但关键步骤如下:

1. 执行一个宏任务（栈中没有就从事件队列中获取）
2. 执行过程中如果遇到微任务，就将它添加到微任务的任务队列中
3. 宏任务执行完毕后，立即执行当前微任务队列中的所有微任务（依次执行）
4. 当前宏任务执行完毕，开始检查渲染，然后GUI线程接管渲染
5. 渲染完毕后，JS线程继续接管，开始下一个宏任务（从事件队列中获取）

举例说明

console.log('begin')
//宏任务
setTimeout(() => {  
    console.log('setTimeout')
}, 0);
//微任务
Promise.resolve().then(() => {
    console.log('promise');
});
console.log('end');
复制代码

执行结果 begin ——> end ——> promise ——> setTimeout