事件循环event loop 讲解

以下内容是引用或者借鉴别人的，自己只是做个笔记，方便学习。理解错误的地方，欢迎评论。如有侵权，私聊我删除，未经允许，不准作为商业用途

事件循环执行过程

1、一开始整个脚本作为一个宏任务执行
2、执行过程中同步代码直接执行，宏任务进入宏任务队列，微任务进入微任务队列
3、当前宏任务执行完出队，读取微任务列表，有则依次执行，直到全部执行完
4、执行浏览器 UI 线程的渲染工作
5、检查是否有 Web Worker 任务，有则执行
6、执行完本轮的宏任务，回到第 2 步，继续依此循环，直到宏任务和微任务队列都为空

图解

image.png

例子动态图解

代码一

async function async1() {
  console.log('async1 start')
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2')
}
console.log('script start')
setTimeout(function () {
  console.log('setTimeout')
}, 0)
async1()
new Promise(function (resolve) {
  console.log('promise1')
  resolve()
}).then(function () {
  console.log('promise2')
})
console.log('script end')

执行结果

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

过程分析

1、整体 script 作为第一个宏任务进入主线程，代码自上而下执行，执行同步代码，输出 script start
2、遇到 setTimeout，加入到宏任务队列
3、执行 async1()，输出async1 start；然后遇到await async2(),await 实际上是让出线程的标志，首先执行 async2()，输出async2；把 async2() 后面的代码console.log('async1 end')加入微任务队列中，跳出整个 async 函数。（async 和 await 本身就是 promise+generator 的语法糖。所以 await 后面的代码是微任务。）
4、继续执行，遇到 new Promise，输出promise1，把.then()之后的代码加入到微任务队列中
5、继续往下执行，输出script end。接着读取微任务队列，输出async1 end，promise2，执行完本轮的宏任务。继续执行下一轮宏任务的代码，输出setTimeout

代码二

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

  new Promise(resolve => {
    console.log(2);
    for (let i = 0; i < 10; i++) {
      i == 9 && resolve();
    }
    console.log(3);
  }).then(() => {
    console.log(4);
  }).then(() => {
    console.log(44);
  });

  console.log(1);
}, 0);

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

  new Promise(resolve => {
    console.log(12);
    for (let i = 0; i < 10; i++) {
      i == 9 && resolve();
    }
    console.log(13);
  }).then(() => {
    console.log(14);
  });

  console.log(11);
}, 0);

结果

2
3
1
4
44
12
13
11
14
5
15