浏览器事件循环

js是单线程的非阻塞的
1. 如果是多线程会面临很多问题比如一个DOM元素被同时操作带来的问题（H5 提出Web Worker标准有很多限制受主线程的控制是主线程的子线程
2. 通过event Loop实现非阻塞
浏览器的事件循环
1. 执行栈和事件队列
2. 宏任务和微任务

浏览器的事件循环

执行栈和事件队列

preview

事件队列：异步代码的执行并不会等待它返回的结果而是直接将这个事件挂起继续执行栈中的其他任务当异步事件返回结果将它放到事件队列中（被放入的事件不会立即执行回调而是继续等待当前执行栈中的任务都执行完毕）主线程空闲就回去事件队列查找是否有任务如果有则取出排在前面的事件对应的回调到执行栈中然后执行其同步代码

2402010291-b9a57af85eebdab7

宏任务和微任务

Q：为什么需要有微任务？

A: 为了准确控制事件被添加到事件队列中的位置并加快执行高优先级的事件（如果没有微任务那么像IO事件和浏览器渲染事件就会被任意添加到事件队列中难以控制）

宏任务

script
setTimeOut（）
setInterval()
postMessage
I/O
setImmediate
UI RENDER

微任务

Promise(async await)
MutationObserver(html5回调)
process.nextTick(和普通微任务有区别在微任务执行之前执行)

运行机制

异步任务的返回结果会被放到任务队列中根据事件类型决定放到微任务还是宏任务队列

当前执行栈为空时会先查看微任务队列是否有待执行的事件

有依次执行微任务队列的回调直到队列为空然后取出宏任务队列最前面的事件将其回调添加到执行栈
无取出宏队列最前面事件对应的回调并放入执行栈中

当前执行栈执行完毕后时会立刻处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行

1100815376-96173ef6295d6c1f

总结：先执行宏任务然后执行该宏任务产生的微任务若微任务执行中产生了其他任务（微任务则继续执行微任务宏任务则放入下一轮宏任务中）微任务执行完毕再回到宏任务中进行下一轮循环

小练

console.log("1");
new Promise((resolve, reject) => {
  console.log("p2");
  resolve(3);
})
  .then((result) => {
    console.log(result);
    setTimeout(() => {
      console.log("pro time");
    }, 0);
    console.log("after pro time");
  })
  .then(() => {
    console.log("second then");
  });
setTimeout(() => {
  console.log("t1");
}, 0);
console.log("end");

第一轮事件循环

全局代码压入执行栈执行console.log('1') 然后出栈
new Promise()入执行栈执行console.log(p2) 并将then（）放入微任务队列 new Promise()出栈
setTimeout（）入执行栈将对应事件放入宏任务队列 setTimeout出栈
console.log('end') 入栈执行console.log('end') 然后出栈
至此第一轮事件循环结束此时微任务有promise.then() 宏任务有setTimeout() 输出 1-p2-3

第二轮事件循环

取出微任务队列第一个事件的回调至任务栈及第一个then 执行console.log(result) 遇到setTimeout 将其翻入宏任务继续执行下面的代码即console.log('after pro time') 遇到then 属于微任务则继续执行 console.log('second then') 微任务队列清空前往宏任务队列
取出宏任务队列第一个事件并将回调放入执行栈即console.log(t1)
至此第二轮事件循环结束宏任务队列还有一个setTimeout（刚才promise产生的）微任务无事件输出”after pro time” - “second then” - “t1”