宏任务和微任务注意点

Posted ttblog5

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了宏任务和微任务注意点相关的知识,希望对你有一定的参考价值。

<script>
        document.body.style.background = ‘red‘;
        console.log(1)
        Promise.resolve().then(()=>{
            console.log(2)
            document.body.style.background = ‘yellow‘;
        })
        console.log(3);
</script>

这个出来是不会有红色的,因为promise是微任务,直接gui渲染出来就是黄色了。如果promise换成setTimeout((),0)就是红到黄

技术图片

 

// es6内部是一个微任务
Promise.resolve().then(()=>{
    console.log(‘1‘);
    setTimeout(()=>{
        console.log(‘4‘);
        
    },0)
    
})
setTimeout(()=>{
    console.log(‘2‘)
    Promise.resolve().then(()=>{
        console.log((‘3‘));
        
    })
},0)

//整个浏览器运行的原理是1.微任务[promise] 宏任务[setTimeout]2.走微任务,又把新的setTimeout放到宏任务队列3.取出第一个宏任务,也就是最开始的那个setTimeout.(当然如果设置时间就是哪个先到先执行)

 

以上是关于宏任务和微任务注意点的主要内容,如果未能解决你的问题,请参考以下文章

宏任务和微任务

来玩,前端性能优化(+面试必问:宏任务和微任务)

来玩,前端性能优化(+面试必问:宏任务和微任务)

来玩,前端性能优化(+面试必问:宏任务和微任务)

宏任务和微任务

宏任务和微任务的一个小事