0
点赞
收藏
分享

微信扫一扫

对于EventLoop的理解

归零者245号 2022-02-27 阅读 202

EventLoop是什么

即事件循环,是指浏览器或Node的一种解决JavaScript单线程运行时不会阻塞的一种机制,也就是实现异步的原理。作为一种单线程语言,JavaScript本身是没有异步这一说法的,是由其宿主环境提供的。

宏任务与微任务

JavaScript代码运行时,任务分为宏任务和微任务两种,Event Loop也将任务队列分为宏队列和微队列分别管理宏任务和微任务,宏队列和微队列也具备队列特性:先进先出。

1.微任务

  1. Promise中的then、catch、finally
  2. MutationObserver(监视DOM变动的API)
  3. Process.nextTick(Node环境)

2.宏任务

  1. script中全部代码
  2. DOM操作
  3. 用户交互操作
  4. 所有的网络请求
  5. 定时器相关的setTimeout、setInterval等

事件循环的进程模型

  1. 选择当前要执行的宏任务队列,选择一个最先进任务队列的宏任务,如果没有宏任务,则会跳转至微任务的执行步骤。
  2. 将事件循环的当前运行宏任务设置为已选择的宏任务。
  3. 运行宏任务。
  4. 将事件循环的当前运行任务设置为null。
  5. 将运行完的宏任务从宏任务队列中移除。
  6. 微任务步骤:进入微任务检查点。
  7. 更新界面渲染。
  8. 返回第一步。
    只要主线程空了,就会读取任务队列,这就是js的运行机制,也被称为EventLoop机制。
    在同一个上下文中,总的执行顺序:同步代码→微任务→宏任务
console.log("1")
setTimeout(()=>{
    console.log('2')
    new Promise(function(resolve){
     console.log("3")
      resolve();
}).then(function() {
        console.log('4')
    })
}, 0)

setTimeout(()=>{
    console.log('5')
    Promise.resolve().then(function() {
        console.log('6')
    })
}, 0)
console.log("7")

浏览器输出:
1
7
2
3
4
5
6

首先执行同步任务,先打印1
执行到第一个setTimeout属于宏任务,挂起放到宏任务队列,遇到第二个setTimeout也是挂起放到宏任务队列。
接着打印7。
同步任务执行完成→js执行栈为空→去查找微任务:微任务为空→查到宏任务。
执行第一个宏任务,打印2,接着执行new Promise,打印3,Promise.then属于微任务,挂起放到微任务队列中。
宏任务执行完成→js执行栈为空→查找微任务:打印4
继续循环查找宏任务,执行到第二个setTimeout,执行顺序同上。

举报

相关推荐

0 条评论