【前端面试】V8事件轮询

在前端面试中,面试官可能会问你V8的引擎机制,给你这样的一道题目如下:

js 复制代码
console.log(1);

setTimeout(() => { 
    console.log(2);
});
new Promise(reslove => {  
    console.log(3);  
    reslove();
}).then(() => {  
    console.log(4);
});

console.log(5);

面试官会让你给出题目中输出的顺序 以及执行原理

直接在浏览器运行我们可以知道输出的顺序是1、3、5、4、2 ,那这过程中到底为什么会这样输出呢?要了解这个打印顺序的原理,我们必须弄清楚V8的事件轮询机制。下面是一张原理图:

里面涉及到两个概念,一个是宏任务MacroTask,一个是微任务MicroTask。其中MacroTask所存放的任务队列有setTimeout,setintervalMicroTask里面所存放的队列有Promise,.then,还有process,.nextTick等等

它轮询具体的方式是,我们这里假定一个流程,如下图:

开始执行 ,代码优先执行同步的script片段 ,然后我们就一直把同步的执行完。执行完同步之后的我们一旦遇到有异步的代码,我们就开始进入任务类型的判断,如果判断应该存放于MacroTask的,我们就放到宏任务队列里,如果需要放到MicroTask,我们就存放到微任务队列里。

等到所有的同步代码 执行完毕之后,我们优先从微任务里面去把任务拉取出来执行,其次才是从宏任务队列里面拉任务出来执行,然后如此递归循环,直到把所有代码片段执行完毕。

分析:

我们再来回顾看一下上面题目里面的代码:

1.我们首先第一段console.log(1),那我们直接打印1。

2.然后再到setTimeout里面有一个console.log(2),那我们就把这个console.log(2)放到MacroTask队列。

3.然后进而我们看到new Promise,它是构造函数,那直接打印3,再到.then里面console.log(4),我们就放到MicroTask队列里面,也是微任务队列。

4.最后就是console.log(5),直接打印5。

总结:

所以经历过第一遍分析之后,我们打印了1、3、5,等所有代码执行完毕之后,我们优先从微任务里面把代码片段抽取出来,那就从console.log(4)提取出来并执行,那就打印4,最后从宏任务队列里面拿出console.log(2)出来执行,所以打印2。这样下来整体的顺序就会打印成1、3、5、4、2

相关推荐
小彭努力中17 分钟前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊1 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
LinDaiuuj1 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝1 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3112 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion2 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜2 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾2 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*2 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm
wuhen_n2 小时前
CSS元素动画篇:基于当前位置的变换动画(一)
前端·css·html·css3·html5