浏览器和Node的事件循环
Posted 还是不会呀
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器和Node的事件循环相关的知识，希望对你有一定的参考价值。
事件循环解析
进程：操作系统管理程序的一种方式。
线程：操作系统能够进行调度的最小单位。
javascript代码的执行是单线程执行的，但是为什么碰到异步函数却不会阻塞后续代码的继续执行呢？这就用到了
事件循环。
定义：事件循环是JavaScript代码和浏览器或者Node之间的桥梁。
浏览器是多进程多线程的，在JavaScript代码执行时，知道在内存内维护着执行上下文栈(函数调用栈),碰到异步代码之所以不会阻塞后续代码的执行，是因为异步函数回调交给了浏览器或者Node的另一个线程，到达一定的时间会将对应的回调放入事件队列内，等到顶层代码执行完之后，浏览器或者Node就到这个事件队列内取出回调函数进行执行。
浏览器的事件队列分为：宏任务队列[setTimeout、setInterval]和微任务队列[Promsie的then回调、queueMicortask、await语句以下代码]。在执行宏任务队列内的回调函数之前，都要保证微任务队列时空的，若不为空，则先执行微任务队列内的回调。
Node的事件队列分为：宏任务队列(timer queue[setTimeout、setInterval] > check queue[setImmediate])和微任务队列（next tick queue[process.nextTick] > other queue[Promsie的then回调、queueMicortask]） ,还是微任务的优先级高于宏任务。
浏览器内的事件循环面试题
面试题一
setTimeout(function () {
console.log("setTimeout1");
new Promise(function (resolve) {
resolve();
}).then(function () {
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log("then4");
});
console.log("then2");
});
});
new Promise(function (resolve) {
console.log("promise1");
resolve();
}).then(function () {
console.log("then1");
});
setTimeout(function () {
console.log("setTimeout2");
});
console.log(2);
queueMicrotask(() => {
console.log("queueMicrotask1");
});
new Promise(function (resolve) {
resolve();
}).then(function () {
console.log("then3");
});
// promise1
// 2
// then1
// queueMicrotask1
// then3
// setTimeout1
// then2
// then4
// setTimeout2
面试题二
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
async function async2() {
console.log("async2");
}
console.log("script start");
setTimeout(function () {
console.log("setTimeout");
}, 0);
async1();
new Promise(function (resolve) {
console.log("promise1");
resolve();
}).then(function () {
console.log("promise2");
});
console.log("script end");
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout
面试题三
返回值不同打印的结果也不同
-
返回值是普通的值或者对象，正常执行。
-
返回值是 thenable对象，进入微任务队列向后推迟一次。
-
返回值是 Promsie对象，进入微任务队列向后推迟二次。
面试题3.1
Promise.resolve()
.then(() => {
console.log(0);
return 4;
})
.then((res) => {
console.log(res);
});
Promise.resolve()
.then(() => {
console.log(1);
})
.then(() => {
console.log(2);
})
.then(() => {
console.log(3);
})
.then(() => {
console.log(5);
})
.then(() => {
console.log(6);
});
// 0
// 1
// 4
// 2
// 3
// 5
// 6
面试题3.2
Promise.resolve()
.then(() => {
console.log(0);
return {
then: function (resolve, reject) {
resolve(4);
},
};
})
.then((res) => {
console.log(res);
});
Promise.resolve()
.then(() => {
console.log(1);
})
.then(() => {
console.log(2);
})
.then(() => {
console.log(3);
})
.then(() => {
console.log(5);
})
.then(() => {
console.log(6);
});
// 0
// 1
// 2
// 4
// 3
// 5
// 6
面试题3.3
Promise.resolve()
.then(() => {
console.log(0);
return new Promise((resolve, reject) => {
resolve(4);
});
})
.then((res) => {
console.log(res);
});
Promise.resolve()
.then(() => {
console.log(1);
})
.then(() => {
console.log(2);
})
.then(() => {
console.log(3);
})
.then(() => {
console.log(5);
})
.then(() => {
console.log(6);
});
// 0
// 1
// 2
// 3
// 4
// 5
// 6
Node内的事件循环面试题
面试题一
async function async1() {
console.log("async1 start");
await async2();
console.log("async1 end");
}
async function async2() {
console.log("async2");
}
console.log("script start");
setTimeout(function () {
console.log("setTimeout0");
}, 0);
setTimeout(function () {
console.log("setTimeout2");
}, 300);
setImmediate(() => console.log("setImmediate"));
process.nextTick(() => console.log("nextTick1"));
async1();
process.nextTick(() => console.log("nextTick2"));
new Promise(function (resolve) {
console.log("promise1");
resolve();
console.log("promise2");
}).then(function () {
console.log("promise3");
});
console.log("script end");
// script start
// async1 start
// async2
// promise1
// promise2
// script end
// nextTick1
// nextTick2
// async1 end
// promise3
// setTimeout0
// setImmediate
// setTimeout2
以上是关于浏览器和Node的事件循环的主要内容，如果未能解决你的问题，请参考以下文章