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

js中执行是单线程的

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

微任务:

宏任务:

EventLoop事件循环机制

总结流程:

---

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:同步任务=>微任务=>渲染=>宏任务

//进度条