当前位置: 首页 > Web前端 > JavaScript

JavaScriptmicrotasks和macrotasks详解

时间:2023-03-27 01:24:38 JavaScript

JavaScriptmicrotasks和macrotasks详解环境使得js以某种方式(事件驱动)具有异步属性。在js中,我们一般将所有任务分为两类,一类是同步任务,一类是异步任务。在异步任务中,还有更详细的分类,即microtasks和macrotasks的概念。有序执行会在一个任务执行结束后,下一个任务开始执行前重新渲染页面(task->rendering->task->…)通常是需要在当前同步任务执行完后立即执行的任务,比如对一系列动作进行反馈,或者需要异步执行的任务,不需要分配新的任务,这样可以降低性能高架。执行顺序先看一段代码,先说说执行顺序console.log(1)setTimeout(()=>{console.log(2)})Promise.resolve().then(()=>{console.log(3)})console.log(4)上面代码打印的结果是1432。从上面的代码可以得出它们的执行顺序是:先执行同步代码,遇到异步宏任务就把异步宏任务放入宏任务队列,遇到异步微任务就放入队列异步微任务在微任务列表中,当所有同步代码都执行完后,异步微任务从列表中转移到主线程中执行。异步微任务执行完毕后,将异步宏任务从队列中转移到主线程中执行。循环直到所有任务执行完毕。注:任务关系宏任务是页面渲染前微任务执行中的主流。当js开始执行时,会启动一个宏任务,并在宏任务中一条一条执行指令。宏任务可以同时有多个。但是会按顺序一一执行。每个宏任务之后都可以跟一个微任务队列。如果微任务队列中有指令或方法,则先执行。如果没有,则开始执行下一个宏任务,直到执行完所有宏任务。任务详解为什么宏任务存在后,微任务还存在?那是因为宏任务占用了太多的性能。当你需要一些之前准备好的方法在最后执行,又不想增加新的宏任务时,可以将这些方法一个一个放到微任务中。在队列中,这个宏任务里面的代码执行完之后,就会执行微任务队列。因此,当前同步代码执行遇到了异步任务。如果是异步宏任务,则放入下一轮宏任务队列。如果是异步微任务,则将其放入微任务队列中,跟在当前宏任务之后。microtask相当于macrotask的小尾巴,所以当前macrotask执行完后,后面等待的异步microtask会立即被放入队列继续执行。但是异步宏任务需要等到下一轮,导致异步微任务先于宏任务执行的情况。