宏任务和微任务的分类
常见的宏任务:script、setTimeOut、setInterval、setImmediate
常见的微任务:promise.then,process.nextTick、Object.observe、MutationObserver
执行顺序
宏任务->(如果有微任务)所有微任务->渲染页面->执行下一个宏任务->(如果有微任务)所有微任务->....以此循环下去
详细讲一下上面那个过程:首先我们的script代码就是宏任务,在这里标记为宏1,首先进入到宏任务的队列,执行同步的代码,假如执行过程中比如遇到了setTimeOut,那么这个执行语句会被放到宏任务的队列,作为到下一个宏任务执行,标记为宏2,假如在宏1执行过程又遇到了promise.then,把它放到微任务里面,标记微1,等这条宏任务里的同步代码执行完,再清空所有产生的微任务,比如微1,这条宏任务才算完全结束,然后开始执行宏2,然后后面也是和前面过程一样的,遇到宏任务的话就放到队列后面下一次执行,遇到微任务放到微任务队列,在结束本次宏任务后和开始下一次宏任务之前,执行前面产生的微任务(如果有的话),清空微任务队列。
好比去银行办事情,每个排队去取钱的人就是一个宏任务,假如说存钱是微任务,办银行卡是个宏任务,我已经取了钱了,完成了一次服务,假如说我还要存钱,我就不用重新排队,可以在取钱之后继续进行存钱的服务,(当然不合理,只是举个例子),但是如果我要办卡,那就会触发宏任务,你就不能在当前的位置继续操作,你得重新去后面排队然后在下一次宏任务中进行这个服务,类似上面的宏2。下面在代码中举些实际的例子加深理解!
代码运行(参考例子)
case1
case2
遇到async/await时的各种变化
case3
case4
case5
case6
case7
case8
case9
case10
case11
总结一下遇到await时代码执行顺序的一些变化,执行到await后面的函数或者表达式的时候,执行了之后会阻塞当前函数后面的代码,跳出当前函数执行后面的代码,要await拿到了它等待的结果才会继续往下执行!