我找工作的第一天和丁总准备面试别人的第一天,在这一天相遇了
于是我们共同的理解了如下这个小小的知识点
本文主要讲浏览器的实现,因为暂时不接触node。
众所周知,js天生就是单线程的,所以它有一个任务执行的顺序。event loop就是完成这一任务的执行模型。
js有两种任务形式,一种是同步任务,一种是异步任务。所有的同步任务都在主线程的一个执行栈上执行,异步任务会分成两个列队:
宏队列,macrotask也叫tasks。包括setTimeout和setInterval两个定时器
微队列,microtask也叫jobs。包括Promise、MutationObserver
说到Promise,要说明一点,Promise内部是同步的,但是它的回调是异步的属于微列队。
这里拿一段代码演示,控制台打印的的1~8是什么顺序打印呢?
console.log(1);
setTimeout(() => {
console.log(2);
Promise.resolve().then(() => {
console.log(3)
});
});
new Promise((resolve, reject) => {
console.log(4)
resolve(5)
}).then((res) => {
console.log(res);
})
setTimeout(() => {
console.log(6);
Promise.resolve().then(() => {
console.log(7)
})
},2000)
console.log(8);
放到浏览器中会看到上面代码的执行顺序是1、4、8、5、2、3、6、7
如图所示(按照理解自行画了一个奇丑无比的流程图):
上图中可以看出每一个宏列队是按照注册时间顺序执行的,执行洪任务时会现执行同步任务,再执行微列队里的内容。
那么这时候就会有个别的杠精(这里特指我丁总)会写出如下代码:
setTimeout(function () {
console.log(1)
},3000);
setTimeout(function () {
console.log(2)
setTimeout(()=>{
console.log(3)
},2000)
}, 1000);
当然理解了知识点的我是不会被这点小问题难住的。结果是2、1、3
通过摸索到宏列队会按时间执行的特性,浏览器会优先注册第二个st并打印2,到第三秒的时候,会按照代码的执行顺序注册第一个st并打印1,最后注册第二个st包裹的st并打印3。
是不是有点理解了呢~