因为javascript是一门单线程语言,所以代码的解析执行都要以自上而下的执行,直到任务队列(task queue)的出现,js开始有了异步任务,当一段代码需要稍后执行时,便可以使用异步方案(setTimeout、setInterval、Poromis、Axios、Dom事件)来使指定操作添加到异步任务中。
代码执行流程: 主线程 => 微任务 => 宏任务
MDN
JavaScript 本质上是一门单线程语言。对于在它被设计出来的那个年代来说,这样的设计是一个很好的选择。那个时候的人们很少有多处理器计算机,并且当时也只是打算用 JavaScript 来编写少量的代码。
当然,随着时间的流逝,电脑的性能得到了飞速的提升。JavaScript 也变成了众多流行语言中的一员。许多非常受欢迎的应用或多或少都有 JavaScript 的影子。为此,找到一种可以突破传统单线程语言限制的方法变得很有必要。
自从 (setTimeout() 和 setInterval()) 加入到 Web API 后,浏览器提供的 JavaScript 环境就已经逐渐开始包含了任务安排、多线程应用开发等强大的特性。了解 JavaScript 运行时是如何安排和运行代码的对了解 queueMicrotask()
会非常有作用。
1. 面试题(答案在最后)
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");
});
2. 面试题
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')
3. 答案
// promise1
// 2
// then1
// queueMicrotask1
// then3
// setTimeout1
// then2
// then4
// setTimeout2
// script start
// async1 start
// async2
// promise1
// script end
// async1 end
// promise2
// setTimeout