前端的事件循环EventLoop

前端的事件循环EventLoop

先看一个题目:

setTimeout(() => {
  console.log(1);
}, 1000)

const a = new Promise((resolve) => {
  console.log(2);
  setTimeout(() => {
    console.log(3);
    resolve()
  }, 1000)
})
a.then(res => {
  console.log(4);
})
console.log(5);
Promise.resolve().then(res => {
  console.log(6);
  setTimeout(() => {
    console.log(7);
  })
  console.log(8);
})
console.log(9);

js是单线程
既然js是单线程,那就不能同时执行多个任务,只能将任务排队执行,
如果有个任务耗时比较多(比如ajax),这种情况后面的任务都会被阻塞
为了防止这种情况,js将任务分为同步任务和异步任务去执行
前端的事件循环EventLoop_第1张图片

同步任务放入主栈中执行,异步任务放入任务队列中执行
任务队列可分为两个队列:宏任务和微任务
● 宏任务队列: ajax、setTimeout、setInterval、Dom监听、requestAnimationFrame等
● 微任务队列: Promise的then回调、 Mutation Observer、 Object.observe
微任务的执行优先级大于宏任务优先级


js任务执行过程:

  1. 按顺序执行主栈中所有同步任务,遇到异步任务先跳过,将异步任务放入任务队列
  2. 所有同步任务执行完成后,观察任务队列中是否已经有结果的任务,执行任务队列中可执行的任务
  3. 优先执行微任务队列中的任务,微任务队列中所有可执行的任务执行完毕后,观察宏任务队列中是否有可执行的任务
  4. 执行宏任务,若宏任务执行的过程中,又有微任务可执行,则微任务插队执行
  5. 重复上述过程
async function async1() {
  console.log('1');
  await async2();
  console.log('2');
}

async function async2() {
  console.log('3');
}

console.log('4');


setTimeout(function () {
  console.log('5');
}, 0);


async1();



new Promise(function (resolve) {
  console.log('6');
  resolve();
}).then(function () {
  console.log('7');
});


console.log('8');

你可能感兴趣的:(前端)