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,执行顺序同上