js基础修炼之路- 微任务,宏任务和Event-Loop

Posted -yu-ze-

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js基础修炼之路- 微任务,宏任务和Event-Loop相关的知识,希望对你有一定的参考价值。

一段代码让你了解Event-Loop

console.log(1);
setTimeout(() => {
    console.log(2);
}, 0);
new Promise((resolve, reject) => {
    console.log(3);
    resolve();
}).then(data => {
    console.log(4);
    setTimeout(() => {
        console.log(5);
    }, 0);
});

讲解之前先看一段代码,可以先预测一下代码的执行结果,首先打印了1,然后是一个定时器,因为js是单线程,所以代码不会等到定时器执行完在继续代码,定时器会放到异步队列里面,等到合适的时机再执行。再下面是一个promise,那么promise什么时候执行呢?
技术分享图片
上面这张图片是代码执行的具体过程,console.log(1)是同步代码,直接执行,遇到定时器后,定时器是异步任务,定时器的时间到了会马上把回调函数加入宏任务队列里面,Promise是同步任务,直接执行,promise().then是一个微任务,所以把console.log(4)放到了微任务的队列,接着里面是一个定时器,时间到了就把定时器放到了宏任务队列里面,当主线程的代码执行完毕,会检查微任务队列里面是否有代码没执行,有代码的话就一并执行,如果没有,宏任务队列里面的代码会依次进入主线程,直到宏任务为空。这样一分析,代码的执行顺序就很清晰了,分别是1 3 4 2 5。


(1)所有同步任务都在主线程上执行,形成一个 执行栈 。
(2)主线程之外,还存在一个"宏任务队列" 。只要异步任务有了运行结果(例如定时器的时间到了,或者ajax请求回来数据了等等),就在"宏任务队列"之中放置一个事件(对应的回调函数)。
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"微任务队列"里面的任务,微任务执行完,再看看"宏任务队列"里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步。

#### 说了那么多,Event-Loop到底是啥?

上面一直在说微任务,宏任务,当前执行栈,浏览器怎么能知道什么时候执行宏任务,什么时候执行微任务,其实有一个这样的机制不断检查是否该执行微任务了,或者宏任务。(这是个非常简易的描述了,实际上会复杂很多)而这样的操作就被称为Event Loop。

微任务和宏任务都有哪些

宏任务
* 浏览器 node
I/O ? ?
setTimeout ? ?
setInterval ? ?
setImmediate ? ?
requestAnimationFrame ? ?
微任务
* 浏览器 node
Promise.then catch finally ? ?
process.nextTick ? ?
MutationObserver ? ?

以上是关于js基础修炼之路- 微任务,宏任务和Event-Loop的主要内容,如果未能解决你的问题,请参考以下文章

js中的微任务和宏任务

js中的微任务和宏任务

js 宏任务,微任务

js 宏任务和微任务

js中的宏任务和微任务

宏任务和微任务的执行顺序