javascript经典题讲解宏任务微任务

首先是代码:

    console.log(1);
        setTimeout(function(){
            console.log(2);
        },0)
        Promise.resolve().then(function(){
            console.log(3);
        }).then(function(){
            console.log(4);
        })
        console.log(5)

这段代码执行顺序的话是:1,5,3,4,2
这个的话就涉及到了事件执行:
首先javaScript是一门单线程语言,所谓单线程,就是指一次只能完成一件任务,如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,
js执行代码的时候,会将异步代码先挂起然后放在任务队列中,如果执行栈中同步执行完之后,执行战中的代码会清空,所以执行战中没有要执行的代码,这样的话就会将异步代码放在执行栈中执行,之后通过事件循环(Event Loop)根据宏任务和微任务送到执行栈中执行,script标签是一个宏任务,然后呢在宏任务中可能还有微任务。和微任务,然后先去执行宏任务,再去执行微任务。这样的话就应了我们上面的一个题:

  • 首先他执行的是第一句console.log(1)这个会直接放在执行栈中执行。

  • 接下来会执行 console.log(5)这个也会直接放在执行栈中执行。

  • 下来会将setTimeout(function(){ console.log(2); },0)Promise.resolve().then(function(){ console.log(3); }).then(function(){ console.log(4); })挂起注册,然后根据宏任务和微任务首先执行宏任务Promise.resolve().then(function(){ console.log(3); }).then(function(){ console.log(4);所以会输出3,4

  • 最后进行微任务输出2

    说一下宏任务:setTimeout、setInterval、setImmediate、I/O、UI rendering。
    微任务:process.nextTick,Promise,MutationObserver。

画图:
在这里插入图片描述
事件循环:
事件循环会执行任务队列中的任务,当执行任务队列时,会先执行一个macro-task,再执行所有的micro-task,然后浏览器根据情况判断是否渲染,这是一次完整的事件循环。然后会再执行一个macro-task,执行此时所有的micro-task,再渲染,又是一次事件循环,一直重复。

猜你喜欢

转载自blog.csdn.net/weixin_47459930/article/details/106355823