JavaScript的运行机制

JavaScript 的运行机制基于单线程事件循环（Event Loop），这使得它能在非阻塞的情况下处理异步操作。以下是其核心概念的详细解释：

1. 单线程特性

JavaScript 是单线程的，意味着它一次只能执行一个任务。这是因为浏览器中的 JavaScript 主要用于操作 DOM，如果允许多线程同时修改页面，会导致冲突和竞态条件。

2. 执行栈（Call Stack）

所有同步代码都在执行栈中执行。当调用一个函数时，它会被压入栈顶；函数执行完毕后，会从栈中弹出。例如：

function greet() {
  console.log('Hello');
  sayName();
  console.log('Goodbye');
}

function sayName() {
  console.log('Doubao');
}

greet(); // 执行顺序：Hello → Doubao → Goodbye

执行栈按照后进先出（LIFO）的顺序处理函数调用。

3. 任务队列（Task Queue）与事件循环

JavaScript 通过异步回调处理耗时操作（如网络请求、定时器），这些操作不会阻塞主线程。当异步操作完成后，回调函数会被放入任务队列。

事件循环（Event Loop）的作用是：

• 不断检查执行栈是否为空。
• 若执行栈为空，则从任务队列中取出一个任务放入执行栈执行。

console.log('Start');

setTimeout(() => {
  console.log('Async task'); // 回调函数在延迟后放入任务队列
}, 0);

console.log('End'); // 执行顺序：Start → End → Async task

4. 宏任务（MacroTask）与微任务（MicroTask）

任务队列分为两类，优先级不同：

• 微任务（MicroTask）：更高优先级，包括 Promise.then、MutationObserver、process.nextTick（Node.js）等。
• 宏任务（MacroTask）：较低优先级，包括 setTimeout、setInterval、setImmediate（Node.js）、requestAnimationFrame（浏览器）等。

执行顺序规则：

1. 执行栈清空后，优先处理所有微任务队列中的任务。
2. 微任务队列清空后，执行一个宏任务。
3. 重复步骤 1 和 2。

console.log('Start');

Promise.resolve().then(() => {
  console.log('Promise 1'); // 微任务
});

setTimeout(() => {
  console.log('Timeout'); // 宏任务
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 2'); // 微任务
});

console.log('End');
// 执行顺序：Start → End → Promise 1 → Promise 2 → Timeout

5. 浏览器与 Node.js 的差异

• 浏览器：事件循环由浏览器引擎实现，处理 DOM 事件、网络请求等。
• Node.js：事件循环基于 libuv 库，有专门的阶段处理 I/O、定时器等，微任务和宏任务的执行顺序略有不同。

总结

JavaScript 的运行机制通过单线程执行栈 + 事件循环 + 任务队列实现了高效的异步编程，避免了阻塞主线程，确保页面响应流畅。理解事件循环是编写高性能 JavaScript 代码的关键。