高级java每日一道面试题-2024年9月08日-前端篇-JS的执行顺序是什么样的?

如果有遗漏,评论区告诉我进行补充

面试官: 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. '1'（同步代码）
2. '4'（同步代码）
3. '3'（微任务，Promise.then的回调）
4. '2'（宏任务，setTimeout的回调）

这个顺序展示了JavaScript如何先处理完所有同步代码，然后处理微任务队列中的所有任务，最后才处理宏任务队列中的任务。

总结

JavaScript 的执行顺序主要包括以下几个阶段：

1. 代码解析与提升（Hoisting）：变量和函数声明会被提升到当前作用域的顶部。
2. 同步代码执行：按照代码的书写顺序执行同步代码。
3. 异步操作：异步操作会被暂时挂起，并放入任务队列中等待执行。
4. 事件循环（Event Loop）：不断检查任务队列，执行微任务和宏任务。

理解 JavaScript 的执行顺序对于编写高效的异步代码非常重要。通过掌握事件循环机制，可以更好地管理异步操作，避免不必要的性能瓶颈。