如果有遗漏,评论区告诉我进行补充
面试官: JS的执行顺序是什么样的?
我回答:
JavaScript 的执行顺序是由其特殊的执行环境所决定的。JS 的执行环境包括全局执行环境、函数执行环境和 eval 执行环境。在这些环境中,变量和函数声明会被提升(hoisting),而变量赋值和函数调用则按照代码出现的顺序执行。此外,异步操作如回调、Promise 和 async/await 也会影响执行顺序。
1. 调用栈(Call Stack)
调用栈是一种后进先出(LIFO)的数据结构,用于存储代码执行期间创建的所有执行上下文(Execution Context)。每当一个函数被调用时,一个新的执行上下文就会被创建并推入调用栈中。当函数执行完毕并返回结果时,其对应的执行上下文就会从调用栈中弹出。
1. 代码解析与提升(Hoisting)
在代码执行之前,JavaScript 引擎会对代码进行预解析,将所有的变量声明(var, let, const)和函数声明提升到当前作用域的顶部。但是,只有声明会被提升,初始化赋值不会被提升。
示例:
console.log(x); // 输出 undefined
var x = 5;
console.log(y); // 输出 ReferenceError: y is not defined
let y = 10;
2. 同步代码执行
一旦提升完成后,JavaScript 将按照代码的书写顺序执行同步代码。这意味着,除了提升之外,所有的代码都是按照自上而下的顺序执行的。
示例:
function sayHello() {
console.log("Hello");
}
sayHello(); // 输出 Hello
console.log("World");
// 输出顺序:
// Hello
// World
2. 事件循环(Event Loop)
事件循环是JavaScript运行时环境的一部分,它负责监听和分发事件,执行回调函数等。事件循环使得JavaScript能够执行异步操作,如网络请求、定时器(setTimeout, setInterval)等。
JavaScript 的事件循环机制是异步操作的核心。事件循环不断检查是否有任务需要执行,如果有,则从任务队列中取出任务并执行。
事件循环涉及两种主要的任务队列:
- 微任务(Microtasks):包括
Promise
的then
回调、MutationObserver
等。 - 宏任务(Macrotasks):包括
setTimeout
、setInterval
、I/O
、UI 渲染等。
微任务会在当前宏任务执行完成后立即执行,而宏任务则会放入下一个宏任务队列中等待执行。
示例:
console.log("Start");
setTimeout(() => {
console.log("Timeout 1");
}, 0);
Promise.resolve().then(() => {
console.log("Promise 1");
setTimeout(() => {
console.log("Timeout 2");
}, 0);
Promise.resolve().then(() => {
console.log("Promise 2");
});
});
setTimeout(() => {
console.log("Timeout 3");
}, 0);
console.log("End");
// 输出顺序:
// Start
// End
// Promise 1
// Promise 2
// Timeout 1
// Timeout 2
// Timeout 3
在这个示例中,Promise
的 then
回调是微任务,会在当前宏任务执行结束后立即执行。而 setTimeout
则是宏任务,会在当前宏任务执行结束后放入下一个宏任务队列中等待执行。
3. JavaScript执行顺序
JavaScript的执行顺序可以大致分为以下几个阶段:
a. 解析与执行
- 全局执行上下文:当浏览器加载一个HTML页面时,会创建一个全局执行上下文,并将全局对象(在浏览器中是
window
对象)与之关联。全局执行上下文首先被推入调用栈。 - 同步代码执行:页面上的
<script>
标签内的同步代码会按照它们出现的顺序执行。这些代码的执行会修改全局执行上下文中的变量和函数。
b. 异步操作
- 事件监听和回调:当JavaScript遇到异步操作(如网络请求、定时器)时,它会将回调函数放入事件队列(Event Queue)中,然后继续执行调用栈中的下一个任务。
- 事件循环:一旦调用栈为空,事件循环就会从事件队列中取出一个事件(实际上是回调函数),并将其对应的函数推入调用栈中执行。这个过程会一直重复,直到事件队列为空。
异步操作(如回调函数、Promise 和 async/await)会暂时挂起主线程的执行,直到异步操作完成。异步操作的结果通常会放入一个任务队列中,一旦主线程空闲时,就会从队列中取出并执行这些任务。
示例:
console.log("Start");
setTimeout(() => {
console.log("Timeout");
}, 0);
Promise.resolve().then(() => {
console.log("Promise");
});
console.log("End");
// 输出顺序:
// Start
// End
// Promise
// Timeout
在这个示例中,setTimeout
和 Promise
都是异步操作,它们不会立即执行,而是会被放入任务队列中等待主线程空闲时执行。
c. 宏任务与微任务
- 宏任务(MacroTask):包括整体代码script,setTimeout,setInterval,setImmediate,I/O,UI渲染等。
- 微任务(MicroTask):Promise.then,MutationObserver等。
在执行完一个宏任务后,事件循环会查看并处理所有可用的微任务,然后再去处理下一个宏任务。这种机制确保了微任务总是比宏任务更早地执行。
示例
console.log('1');
setTimeout(() => {
console.log('2');
}, 0);
Promise.resolve().then(() => {
console.log('3');
});
console.log('4');
执行顺序将是:
'1'
(同步代码)'4'
(同步代码)'3'
(微任务,Promise.then的回调)'2'
(宏任务,setTimeout的回调)
这个顺序展示了JavaScript如何先处理完所有同步代码,然后处理微任务队列中的所有任务,最后才处理宏任务队列中的任务。
总结
JavaScript 的执行顺序主要包括以下几个阶段:
- 代码解析与提升(Hoisting):变量和函数声明会被提升到当前作用域的顶部。
- 同步代码执行:按照代码的书写顺序执行同步代码。
- 异步操作:异步操作会被暂时挂起,并放入任务队列中等待执行。
- 事件循环(Event Loop):不断检查任务队列,执行微任务和宏任务。
理解 JavaScript 的执行顺序对于编写高效的异步代码非常重要。通过掌握事件循环机制,可以更好地管理异步操作,避免不必要的性能瓶颈。