事件轮询(event loop)
含义
event loop
即事件轮询,这个是js里面为了解决单线程阻塞问题提出的解决方案,也是js异步执行机制的原理
- 异步任务执行的顺序又是怎样的呢?这时候我们就需要了解事件轮询机制
console.log(1)
setTimeout(()=>{
console.log(2)
},0)
setInterval(() => {
console.log(3)
}, 30);
console.log(4)
console.log(5)
new Promise((resolve)=>{
console.log(6)
resolve(7)
}).then(res=>{
console.log(res)
})
事件轮询
- 图示
- 图解
- 首先加载js的时候,整个的script代码会一行一行的执行
- 每一行代码执行都会进入调用栈,调用栈是一个执行代码的地方
- 调用栈在运行代码的时候会判断这行代码是同步还是异步,如果是同步直接执行返回执行之后得到的结果,如果是异步,会将异步的代码放到webAPI里面,直接执行后面的同步代码
- 异步的代码在webAPI里面会等待时机,比如说一个定时器3s执行,在3s到达的时候会将对应的回调函数添加到执行的队列(task queue)里面
- 所有的同步代码执行结束之后,此时会开启事件轮询,查看task queue里面是否有任务需要执行,如果有就拿到调用栈执行,一直到所有的task queue任务结束
- 案例
console.log(1)
setTimeout(function cb(){
console.log(2)
}, 1000)
console.log(3)
- 执行过程
- console.log(1)进入调用栈 是同步 控制台打印输出 1 结束
- setTimeout(cb, 1000) 进入调用栈 是异步, 将cb放入webAPI等待,继续执行下一步代码
- console.log(2)进入调用栈 是同步 控制台打印输出 2 结束
- 此时调用栈任务执行结束,开启事件轮询
- cb函数在一秒钟后进入执行队列(task queue)
- cb函数进入调用栈执行,输出 3 结束
- 点击查看完整代码执行
- 总结
- 可以看出所有的同步任务都会在异步任务之前执行
- 异步任务如果有很多 他们的执行顺序又是如何呢
宏任务和微任务
- 宏任务:macrotask,
setTimeout,setInterval, ajax, dom事件
,宏任务是由浏览器提供的 - 微任务:microtask,
promise,async/await
,微任务是由es6提供的 - 为什么要区分宏任务和微任务?
- 因为宏任务和微任务的执行时机不一样,这样就会导致我们对于异步的代码认识产生理解的误区
- 执行顺序
- js首先会执行调用栈里面同步的代码
- 遇到宏任务,会将宏任务的回调函数压入到webapi中等待,合适进入
task queue
队列等待 - 遇到微任务,会将微任务的回调函数压入
micro task queue
队列中 - 调用栈中所有同步代码执行完成,开启event loop,会优先执行
micro task queue
队列中的回调函数 - 微任务执行完成之后,dom进行渲染
- dom渲染完成,会执行
task queue
中的的回调函数 - 重复以上步骤
- 案例演示
console.log(1)
setTimeout(function cb(){
console.log(2)
}, 0)
new Promise(function handler(resovle){
resovle(3)
}).then(function(res){
console.log(res)
})
console.log(4)
微任务执行在DOM渲染之前执行,宏任务执行在DOM渲染之后
<body>
<h1>页面中的元素</h1>
<script>
console.log(1)
setTimeout(function cb(){
alert(222)
console.log(2)
}, 1000)
new Promise(function handler(resovle){
resovle(3)
}).then(function(res){
alert(111)
console.log(res)
})
console.log(4)
</script>
</body>
</html>
console.log(res)
})
console.log(4)
</script>
``` + 弹出alert(111)的弹窗此时页面上h1并没有生成,弹出alert(222)的时候页面h1已经生成,由此证明微任务是在dom渲染之前执行,宏任务是在dom渲染之后执行