说说你对Event Loop的理解

 EventLoop是什么

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

宏任务与微任务

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

1.微任务

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

 2.宏任务

script中全部代码
DOM操作
用户交互操作
所有的网络请求
定时器相关的setTimeout、setInterval等
事件循环的进程模型
选择当前要执行的宏任务队列,选择一个最先进任务队列的宏任务,如果没有宏任务,则会跳转至微任务的执行步骤。
将事件循环的当前运行宏任务设置为已选择的宏任务。
运行宏任务。
将事件循环的当前运行任务设置为null。
将运行完的宏任务从宏任务队列中移除。
微任务步骤:进入微任务检查点。
更新界面渲染。
返回第一步。
只要主线程空了,就会读取任务队列,这就是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,执行顺序同上

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值