同步任务、异步任务、宏任务、微任务

122 阅读1分钟

一、同步任务

同步任务就是执行时,执行被放进消息队列中,等待执行的任务。

例如:

console.log('test');
let name = 'test';

这都是同步任务,执行了就立即出结果了。

二、异步任务

异步任务就是执行时,将回调放进对应的线程队列中,等待触发条件被触发,将任务放进消息队列中等待执行。

例如:

window.addEventListener('click', function (e) =>{
   console.log(e.target.value);
})

这就是异步任务,当js引擎执行到这段代码时,会将回调函数放进事件触发线程的队列中,当页面有事件点击时,会将该任务从事件触发线程的队列中取出,放在消息队列中等待执行。

宏任务

为了让优先级比较高的任务,比如造成页面渲染的任务及时执行,并且不阻塞之后的任务,js将任务分为宏任务,宏任务就是消息队列中的任务。

  • js整体代码
  • setTimeout
  • setInterval
  • I/O
  • UI交互事件
  • postMessage
  • setImmediate

微任务

每一个宏任务都有一个队列来保存在这个宏任务执行期间产生的微任务,在这个宏任务执行完,要结束时会将其微任务中队列中的任务执行完,然后才会渲染。

  • Promise.then/catch/finally以及其相关的语法糖
  • MutationObserve
  • async await

process.nextTick(Node.js 专用)

process.nextTick不是微任务,但它的行为与微任务类似。它会在事件循环的当前阶段结束后立即执行,优先级比微任务更高

执行顺序:

宏 ----> 微 ---->渲染 ----> 宏 ----> 微 ----> 渲染.......