JS中的宏任务和微任务的区别和用法
来源:慕时_木雨凡     阅读:771
源码超市
发布于 2019-06-11 04:23
查看主页

宏任务(macrotask )和微任务(microtask )

宏任务和微任务都是我们在开发工作中经常用到的。

宏任务(macrotask )和微任务(microtask )

macrotask 和 microtask 表示异步任务的两种分类。

在挂起任务时,JS 引擎会将所有任务按照类别分到这两个队列中,首先在 macrotask 的队列(这个队列也被叫做 task queue)中取出第一个任务,执行完毕后取出 microtask 队列中的所有任务顺序执行;之后再取 macrotask 任务,周而复始,直至两个队列的任务都取完。

“先查看能否有事件可执行”,假如有这优先级限制,那应该可以这样了解:

其实并不止一个消息队列,有异步队列事件队列,而事件队列总是优先于异步队列被空闲下来的JS线程取用

宏任务一般是:包括整体代码scriptsetTimeoutsetIntervalI/OUI render
微任务主要是:PromiseObject.observeMutationObserver

区别表现demo

new Promise((resolve) => {    console.log('外层宏事件2');    resolve()}).then(() => {    console.log('微事件1');}).then(()=>{    console.log('微事件2')})console.log('外层宏事件1');setTimeout(() => {    //执行后 回调一个宏事件    console.log('内层宏事件3')}, 0)

结果:

外层宏事件2外层宏事件1微事件1微事件2内层宏事件3
setTimeout(() => {    //执行后 回调一个宏事件    console.log('内层宏事件3')}, 0)console.log('外层宏事件1');new Promise((resolve) => {    console.log('外层宏事件2');    resolve()}).then(() => {    console.log('微事件1');}).then(()=>{    console.log('微事件2')})

结果:

外层宏事件1外层宏事件2微事件1微事件2内层宏事件3

NodeJS的宏任务和微任务跟浏览器环境又有什么区别

浏览器的Event loop是在HTML5中定义的规范,而node中则由libuv库实现。libuv库流程大体分为6个阶段:timers,I/O callbacks,idle、prepare,poll,check,close callbacks,和浏览器的microtask,macrotask那一套有区别。
两者执行的规则不同,所以不相同。

//            js event loop (指主线程从“任务队列”中循环读取任务)////             event queue 可能同时不止一个////            宏任务(macrotask)event queue (macro-task(宏任务):script(主程序代码),,setTimeout,setInterval, I/O, setImmediate(node环境),UI rendering)//            ^//            | 异步//     主线程->//          | |  异步//          | V//          | 微任务(microtask) event queue (micro-task(微任务):Promise,process.nextTick(node环境),Object.observe, MutationObserver)//          |//          V//          假如是浏览器环境 click等事件队列总是优先于异步队列被空闲下来的JS线程取用// 执行顺序   script(主程序代码)—>process.nextTick—>Promises…——>setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering// nextTick 优先级比 Promise 等 microTask 高,setTimeout和setInterval优先级比setImmediate高

浏览器环境

浏览器环境下的 异步任务 分为 宏任务(macroTask) 和 微任务(microTask):

宏任务(macroTask):script 中代码、setTimeoutsetIntervalI/OUI render

微任务(microTask): PromiseObject.observeMutationObserver

当满足执行条件时,宏任务(macroTask) 和 微任务(microTask) 会各自被放入对应的队列:宏队列(Macrotask Queue) 和 微队列(Microtask Queue) 中等待执行。

Node 环境

在 Node 环境中 任务类型 相对就比浏览器环境下要复杂少量:

microTask:微任务;

nextTick:process.nextTick;

timers:执行满足条件的 setTimeout 、setInterval 回调;

I/O callbacks:能否有已完成的 I/O 操作的回调函数,来自上一轮的 poll 残留;

poll:等待还没完成的 I/O 事件,会因 timers 和超时时间等结束等待;

check:执行 setImmediate 的回调;

close callbacks:关闭所有的 closing handles ,少量 onclose 事件;
idle/prepare 等等:可忽略。

因而,也就产生了执行事件循环相应的任务队列 Timers Queue、I/O Queue、Check Queue 和 Close Queue。
2.执行过程
浏览器环境
先执行<script>中的同步任务,而后所有微任务,一个宏任务,所有微任务,一个宏任务......

执行完主执行线程中的任务;

取出 Microtask Queue 中任务执行直到清空;

取出 Macrotask Queue 中一个任务执行;

重复 2 和 3 。

需要 注意 的是:

在浏览器页面中可以认为初始执行线程中没有代码,每一个<script>中的代码是一个独立的 task ,即会执行完前面的<script>中创立的 microTask 再执行后面的<script>中的同步代码;
假如 microTask 一直被增加,则会继续执行 microTask ,“卡死” macroTask;
部分版本浏览器有执行顺序与上述不符的情况,可能是不符合标准或者 js 与 html 部分标准冲突;
Promise 的thencatch才是 microTask ,本身的内部代码不是;
个别浏览器独有API未列出。

Node 环境
循环之前
在进入第一次循环之前,会先进行如下操作:

同步任务;
发出异步请求;
规划定时器生效的时间;
执行process.nextTick()

开始循环
循环中进行的操作:

清空当前循环内的 Timers Queue,清空 NextTick Queue,清空 Microtask Queue
清空当前循环内的 I/O Queue,清空NextTick Queue,清空 Microtask Queue
清空当前循环内的 Check Queue,清空 NextTick Queue,清空 Microtask Queue
清空当前循环内的 Close Queue,清空 NextTick Queue,清空Microtask Queue
进入下轮循环。

可以看出,nextTick 优先级比 PromisemicroTask 高,setTimeoutsetInterval优先级比setImmediate高。
注意
在整个过程中,需要 注意 的是:

假如在 timers 阶段执行时创立了setImmediate 则会在此轮循环的 check 阶段执行,假如在 timers 阶段创立了setTimeout,因为 timers 已取出完毕,则会进入下轮循环,check 阶段创立 timers 任务同理;

setTimeout优先级比setImmediate高,但是因为setTimeout(fn,0)的真正推迟不可能完全为 0 秒,可能出现先创立的setTimeout(fn,0)而比setImmediate的回调后执行的情况。

免责声明:本文为用户发表,不代表网站立场,仅供参考,不构成引导等用途。 系统环境 服务器应用
相关推荐
CSS3 动画
刷机党的福利来了!Moto G2成功移植Ubuntu Touch系统
Runloop在实际中究竟有什么用?
Android 什么是架构?
一种简单易懂的 MyBatis 分库分表方案
首页
搜索
订单
购物车
我的