前端的事件循环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将任务分为同步任务和异步任务去执行

同步任务放入主栈中执行，异步任务放入任务队列中执行
任务队列可分为两个队列：宏任务和微任务
● 宏任务队列: 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');