事件循环机制(1)-- 任务执行顺序

54 阅读2分钟

三个专业术语

1、主线程

所有的同步任务都是在主线程里执行的,异步任务可能会在macrotask或者microtask里面

  • 同步任务: 指的是在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。
  • 异步任务: 指的是不进入主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

2、微任务(micro task)

  • promise
  • async
  • await
  • process.nextTick(node)
  • mutationObserver(html5新特性)

3、宏任务(macro task)

  • script(整体代码)
  • setTimeout
  • setInterval
  • setImmediate
  • I/O
  • UI render

通俗的来说,事件循环(eventLoop)是单线程的JavaScript在处理异步事件时进行的一种循环过程,具体来讲,对于异步事件它会先加入到事件队列中挂起,等主线程空闲时会去执行事件队列中的事件。

线程执行顺序

主线程任务——>微任务——>宏任务 如果宏任务里还有微任就继续执行宏任务里的微任务,如果宏任务中的微任务中还有宏任务就在依次进行

主线程任务——>微任务——>宏任务——>宏任务里的微任务——>宏任务里的微任务中的宏任务——>直到任务全部完成

在同一轮任务队列中,同一个微任务产生的微任务会放在这一轮微任务的后面,产生的宏任务会放在这一轮的宏任务后面

在同一轮任务队列中,同一个宏任务产生的微任务会马上执行,产生的宏任务会放在这一轮的宏任务后面

示例

console.log('Start');

setTimeout(() => {
    console.log('Timer');
}, 0);

Promise.resolve().then(() => {
    console.log('Promise');
});

console.log('End');

执行顺序将是:

  1. console.log('Start')
  2. console.log('End')
  3. console.log('Promise')
  4. console.log('Timer')

这是因为 'Start''End' 是同步代码,所以首先输出;接下来是微任务 'Promise' 被处理;最后才是宏任务 'Timer'