事件循环机制EventLoop

1,152 阅读6分钟

66D20D677161C44F4C8699507CB14C13.png

js中的eventloop

Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理

首先我们来了解一下三个重要的概念

主线程

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

微任务(micro task)

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

宏任务(macro task)

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

堆,栈、队列

堆(Heap)

是一种数据结构,是利用完全二叉树维护的一组数据,分为两种,一种为最大,一种为最小堆,将根节点最大叫做最大堆大根堆,根节点最小叫做最小堆小根堆

线性数据结构,相当于一维数组,有唯一后继。

栈(Stack)

在计算机科学中是限定仅在表尾进行插入删除操作的线性表。是一种数据结构,它按照后进先出的原则存储数据,先进入的数据被压入栈底最后的数据栈顶,需要读数据的时候从栈顶开始弹出数据

是只能在某一端插入删除特殊线性表

队列(Queue)

特殊之处在于它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作,和一样,队列是一种操作受限制的线性表。

进行插入操作的端称为队尾,进行删除操作的端称为队头。 队列中没有元素时,称为空队列

队列的数据元素又称为队列元素。在队列中插入一个队列元素称为入队,从队列删除一个队列元素称为出队。因为队列只允许在一端插入,在另一端删除,所以只有最早进入队列的元素才能最先从队列中删除,故队列又称为先进先出FIFO—first in first out

浏览器中的Event Loop

Javascript 有一个 main thread 主线程和 call-stack 调用栈(执行栈),所有的任务都会被放到调用栈等待主线程执行。

JS调用栈

JS调用栈采用的是后进先出的规则,当函数执行的时候,会被添加到栈的顶部,当执行栈执行完成后,就会从栈顶移出,直到栈内被清空。

同步任务和异步任务

Javascript单线程任务被分为同步任务异步任务,同步任务会在调用栈中按照顺序等待主线程依次执行,异步任务会在异步任务有了结果后,将注册的回调函数放入任务队列中等待主线程空闲的时候(调用栈被清空),被读取到栈内等待主线程的执行。

image.png

任务队列Task Queue,即队列,是一种先进先出的一种数据结构。

image.png

事件循环的进程模型

  • 选择当前要执行的任务队列,选择任务队列中最先进入的任务,如果任务队列为空即null,则执行跳转到微任务(MicroTask)的执行步骤。
  • 将事件循环中的任务设置为已选择任务。
  • 执行任务。
  • 将事件循环中当前运行任务设置为null。
  • 将已经运行完成的任务从任务队列中删除。
  • microtasks步骤:进入microtask检查点。
  • 更新界面渲染。
  • 返回第一步。

执行进入microtask检查点时,用户代理会执行以下步骤:

  • 设置microtask检查点标志为true。
  • 当事件循环microtask执行不为空时:选择一个最先进入的microtask队列的microtask,将事件循环的microtask设置为已选择的microtask,运行microtask,将已经执行完成的microtasknull,移出microtask中的microtask
  • 清理IndexDB事务
  • 设置进入microtask检查点的标志为false。

执行栈在执行完同步任务后,查看执行栈是否为空,如果执行栈为空,就会去执行Task(宏任务),每次宏任务执行完毕后,检查微任务(microTask)队列是否为空,如果不为空的话,会按照先入先出的规则全部执行完微任务(microTask)后,设置微任务(microTask)队列为null,然后再执行宏任务,如此循环。

举个例子

console.log('script start');

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

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});
console.log('script end');

首先我们划分几个分类:
第一次执行


Tasks:run script、 setTimeout callback

Microtasks:Promise then	

JS stack: script	
Log: script start、script end。

执行同步代码,将宏任务(Tasks)和微任务(Microtasks)划分到各自队列中

第二次执行

Tasks:run script、 setTimeout callback

Microtasks:Promise2 then	

JS stack: Promise2 callback	
Log: script start、script end、promise1、promise2

执行宏任务后,检测到微任务(Microtasks)队列中不为空,执行Promise1,执行完成Promise1后,调用Promise2.then,放入微任务(Microtasks)队列中,再执行Promise2.then

第三次执行

Tasks:setTimeout callback

Microtasks:	

JS stack: setTimeout callback
Log: script start、script end、promise1、promise2、setTimeout

当微任务(Microtasks)队列中为空时,执行宏任务(Tasks),执行setTimeout callback,打印日志。

第四次执行

Tasks:setTimeout callback

Microtasks:	

JS stack: 
Log: script start、script end、promise1、promise2、setTimeout

清空Tasks队列和JS stack

再举个例子

console.log('script start')

async function async1() {
  await async2()
  console.log('async1 end')
}
async function async2() {
  console.log('async2 end') 
}
async1()

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

new Promise(resolve => {
  console.log('Promise')
  resolve()
})
  .then(function() {
    console.log('promise1')
  })
  .then(function() {
    console.log('promise2')
  })

console.log('script end')

这里需要先理解async/await
async/await 在底层转换成了 promise 和 then 回调函数。
也就是说,这是 promise 的语法糖。
每次我们使用 await, 解释器都创建一个 promise 对象,然后把剩下的 async 函数中的操作放到 then 回调函数中。
async/await 的实现,离不开 Promise。从字面意思来理解,async 是“异步”的简写,而 await 是 async wait 的简写可以认为是等待异步方法执行完成。

总结

  1. 微任务队列优先于宏任务队列执行;

  2. 微任务队列上创建的宏任务会被后添加到当前宏任务队列的尾端;

  3. 微任务队列中创建的微任务会被添加到微任务队列的尾端;

  4. 只要微任务队列中还有任务,宏任务队列就只会等待微任务队列执行完毕后再执行;

  5. 只有运行完await语句,才把await语句后面的全部代码加入到微任务行列;

  6. 在遇到await promise时,必须等await promise 函数执行完毕才能对await语句后面的全部代码加入到微任务中;

    在等待 await Promise.then微任务时:

    • 运行其他同步代码;
    • 等到同步代码运行完,开始运行 await promise.then 微任务;
    • await promise.then微任务完成后,把await语句后面的全部代码加入到微任务行列;

可参考

developer.mozilla.org/zh-CN/docs/…

zh.javascript.info/event-loop

www.ruanyifeng.com/blog/2013/1…

juejin.cn/post/684490…

以上是我自己的理解,还有很多不足,希望大家不吝赐将,感谢。