JavaScript代码执行顺序：为什么它这么“任性”？

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
💬 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站。

JavaScript 代码执行顺序及其原理分析

背景

JavaScript 是一种广泛使用的脚本语言，特别是在网页开发中起着关键作用。它能够为网页添加动态交互效果，提升用户体验。了解 JavaScript 的执行顺序对于开发高效和响应迅速的应用至关重要。在大多数情况下，JavaScript 代码是按照文本书写的顺序执行的，但在一些特殊情况下，如异步操作的出现，执行顺序可能不是那么直观。

原理

1. 执行上下文（Execution Context）

JavaScript 的执行过程依赖于执行上下文。每当代码执行时，JavaScript 引擎会为该段代码创建一个执行上下文，该上下文包含了变量、函数的定义以及执行相关信息。

• 全局执行上下文：所有代码为其创建一个默认上下文。
• 函数执行上下文：每当调用一个函数时，都会创建一个新的执行上下文。

2. 调用栈（Call Stack）

JavaScript 引擎使用调用栈来管理代码的执行顺序。当代码被执行时，它的执行上下文会被推入栈中，然后逐个执行；当函数执行完成后，它的上下文被弹出栈。这样，JavaScript 就能够按顺序处理代码。

3. 事件循环（Event Loop）

JavaScript 是单线程的，但可以处理异步操作。事件循环机制使得 JavaScript 引擎能够在处理异步操作时，保证主线程的顺序执行。事件循环的主要工作是检查执行栈是否为空，如果为空，则将消息队列中的任务放入执行栈进行执行。

4. 异步编程

JavaScript 提供了异步编程的方式，如回调函数、Promise 和 async/await，使得某些操作可以在未来某个时刻执行，而不阻塞代码的其他部分。

特点

1. 单线程：JavaScript 是单线程的，意味着在一个时间点只会执行一个代码片段。
2. 非阻塞：通过事件循环和回调机制，JavaScript 能够处理异步操作，提高应用的响应速度。
3. 顺序执行：默认情况下，JavaScript 按书写顺序从上到下执行代码，除非遇到异步操作或调用栈中的上下文变化。
4. 动态类型：JavaScript 的变量类型在运行时会自动确定和修改。

代码案例

以下是一个示例代码，展示了 JavaScript 的执行顺序、异步操作和调用栈的变化。

console.log("开始"); // 1. 直接输出 '开始'

setTimeout(() => {
    console.log("这条消息是异步的"); // 4. 这条消息稍后输出
}, 0);

for (let i = 0; i < 3; i++) {
    console.log("计数:", i); // 2. 依次输出 '计数: 0', '计数: 1', '计数: 2'
}

console.log("结束"); // 3. 最后输出 '结束'

执行顺序分析

1. 首先输出“开始”。
2. 执行 setTimeout 函数注册任务到任务队列，但它并不会立即执行。
3. 然后进入循环打印“计数: 0”、“计数: 1”、“计数: 2”。
4. 输出“结束”。
5. 最后，执行完主任务后，事件循环将队列中的异步任务取出并执行，输出“这条消息是异步的”。

输出结果为：

开始
计数: 0
计数: 1
计数: 2
结束
这条消息是异步的

参考资料

1. MDN Web Docs - JavaScript
2. JavaScript.info - Execution Context
3. JavaScript Promises: An Introduction
4. You Don’t Know JS: Scope & Closures

注意事项

1. 异步代码：要注意区分同步与异步的执行顺序。在实际应用中，异步操作可能导致难以预期的执行顺序。
2. 回调地狱：避免嵌套过深的回调，以保持代码可读性。可以使用 Promise 或 async/await 来改进代码结构。
3. 性能方面：不适当的同步操作可能导致页面冻结，影响用户体验，尽量在适当的场景采用异步处理。
4. 理解事件循环：深入了解事件循环及其机制，有助于更好地管理复杂的异步代码和提高应用性能。

结论

JavaScript 按顺序执行的初步理解对于开发高效、响应迅速的应用至关重要。通过合理使用同步和异步机制，开发者可以写出更优雅的代码，同时提升用户体验。掌握执行上下文、调用栈和事件循环的原理，有助于更深入地理解 JavaScript 的执行模型。