js中宏任务&微任务及 EventLoop事件循环机制

卷心菜007

已于 2022-04-28 13:44:41 修改

阅读量280

点赞数

分类专栏：面试高频文章标签：前端 javascript es6

于 2022-04-28 12:30:05 首次发布

本文链接：https://blog.csdn.net/m0_65912225/article/details/124468516

版权

面试高频专栏收录该内容

27 篇文章 1 订阅

订阅专栏

js中执行是单线程的

微任务和宏任务是相互独立的,微任务比宏任务执行时间早

js中执行是单线程的

只有一个调用栈,按照先入后出的规则进行,先执行同步任务,将异步任务放在队列中,同步任务全部执行完毕之后再执行异步任务,异步任务分为宏任务和微任务(宏任务队列和微任务队列),队列都按照先入先出的规则

微任务和宏任务是相互独立的,微任务比宏任务执行时间早

微任务:

1.Promise.then() .catch() .finally()

2.MutationObserver

3.Object.observe

4.nodejs中的process.nextTick()

5.async/await

宏任务:

1.新程序或子程序被直接执行

2.事件的回调函数

3.setTimeout , setInterval导致的回调函数

4.requestAnimationFrame , I/O操作 ,setImmediate , UI rendering等

EventLoop事件循环机制

运行需要靠EventLoop事件循环 :

事件循环是一个不断进行循环的机制,事件循环会不断去寻找可以执行的任务来执行,在执行了同步任务之后,也就是清空了调用栈以后,首先会执行微任务队列中的任务,把微任务队列的任务清空以后才会去执行宏任务.在进行下一步宏任务之前,浏览器可能会发生渲染的情况,在渲染以后再执行宏任务,要注意:并不是每一个浏览器都把这些函数归为同一类宏任务或微任务,有的浏览器会Promise.then()归为宏任务

总结流程:

一轮事件循环Event Loop:同步任务=>微任务=>渲染=>宏任务

<div id = "hd"></div>
//进度条
<script>
function handle(){
    let i = 0;
    (function run(){
        hd.innerHTML = i ;
        hd.style.width = i+'%';
        if(++i<100){
            setTimeout(run,20)
        }
    })();
}
handle();
</script>