EventLoop的全新理解方式

EventLoop的全新理解方式

• • • • • 什么是EventLoop？
        • 宏任务与微任务
        • 事件循环闭环流程
        • 浏览器和node的区别

什么是EventLoop？

1. 在执行主线程的任务时，如果有异步任务，会进入到Event Table并注册回调函数，当指定的事情完成后，会将这个回调函数放到 callback queue 中
2. 在主线程执行完毕之后，会去读取 callback queue中的回调函数，进入主线程执行
3. 不断的重复这个过程，也就是常说的Event Loop（事件循环）了

重点在于异步任务，他们分为宏任务和微任务，两者区别于在指定的事情完成后，将回调函数放入 callback queue 的过程。

简化的模型

我们也不难看出，dom渲染会在微任务队列清空后进行。

宏任务与微任务

常见宏任务：setInterval()，serTimeout()，setImmediate()(实际上setImmediate()优先级小于前者)

常见微任务：Promise().then(function(){})（promise-then里的回调函数，new MUtationObserver() process.nextTick(function(){})(同上)(另外，实际上后者优先级高于前者)

两者在事件轮询中的区别在于，轮询到微任务时，会将微任务队列全部推出再去轮询下一步；轮询到宏任务时，只推出了队列中最早的异步任务

为什么要设计微任务？

事件循环闭环流程

宏任务过程：

1. 选择宏任务队列中最早的任务（任务A）
2. 将“当前正在运行的任务”设置为“任务A”
3. 运行“任务A”同步代码（也就是运行回调函数）
4. 将“当前正在运行的任务”设置为null，删除“任务A”，本次Loop结束
5. 选择下一个最早的任务，也就是跳转到1，直到宏任务队列清空

微任务过程：

a. 选择微任务队列中最早的任务（任务x）

b. 将“当前正在运行的任务”设置为“任务x”

c. 运行“任务x”同步代码（也就是运行回调函数）

d. 将“当前正在运行的任务”设置为null，删除“任务x”

e. 选择下一个最早的任务，也就是跳转到1，直到微任务队列清空

浏览器和node的区别

宏任务

微任务

最后如果有表述不清楚，或者表述错误的地方，欢迎👏友好😊指出。