同步任务与异步任务：JS 代码执行的宏观流程

嘿，前端的弄潮儿们！咱们聊聊 JS 的“心跳”：同步与异步任务的华尔兹 💃🕺

各位前端的探险家们，欢迎来到我的“深夜代码茶话会”！今天咱们不聊框架，不谈架构，就来聊聊 JavaScript 这门语言的“心跳”——同步与异步任务。掌握了它们，你才能真正理解 JS 代码是如何像一位优雅的舞者，在浏览器或 Node.js 的舞台上翩翩起舞的。

想象一下，你的代码就像一个大型晚宴，而 JavaScript 引擎就是那位忙碌的管家。管家需要负责安排所有宾客（代码）的入座、上菜、聊天等等。但是，宾客们的需求各不相同，有些需要立刻满足，有些则可以稍等片刻。

这就是同步与异步任务的由来。

同步任务，顾名思义，就像管家必须立刻、马上、毫不犹豫地处理的请求。比如，一位客人（代码）说：“我渴了，立刻要喝水！” 管家必须放下手头所有的事情，立刻去倒水。

特点：

阻塞执行： 当管家处理同步任务时，他必须完成这个任务才能开始处理下一个。这意味着，如果一个同步任务执行时间过长，整个晚宴（程序）都会被阻塞，其他客人（代码）只能干等着。
先进先出 (FIFO)： 同步任务就像排队，先来的先处理。
在主线程执行： 管家只有一位，他就是主线程，所有的同步任务都在主线程上执行。

举个栗子：

console.log("开始执行"); // 同步任务 1
let result = 2 + 2;      // 同步任务 2
console.log("结果是：" + result); // 同步任务 3

这段代码就像管家按照顺序，一步一步地完成任务。必须先输出 "开始执行"，计算出 2 + 2 的结果，最后才能输出 "结果是：4"。

同步任务的“缺点”：

如果同步任务中存在耗时操作，比如复杂的计算、大量的 DOM 操作，就会阻塞主线程，导致页面卡顿，用户体验直线下降。想象一下，晚宴上的所有客人都等着管家给一位客人倒水，其他人岂不是要饿死？😱

异步任务就像管家可以稍后处理的请求。比如，一位客人说：“我想听一首音乐，但不是现在，稍后有空的时候播放就好。” 管家不需要立刻放下手头的事情去放音乐，而是把这个请求记录下来，等有空的时候再处理。

特点：

举个栗子：

console.log("开始执行"); // 同步任务 1

setTimeout(function() {
  console.log("2秒后执行"); // 异步任务的回调函数
}, 2000);

console.log("继续执行"); // 同步任务 2

这段代码的执行顺序是：

异步任务的“优点”：

异步任务可以避免阻塞主线程，提高程序的响应速度，改善用户体验。想象一下，晚宴上管家把所有需要稍后处理的请求都记录下来，然后继续为其他客人服务，这样就不会让大家干等着了。👍

异步任务并不是都一样的，它们也有优先级之分，就像晚宴上的客人，有些是 VIP，有些是普通客人。

宏任务 (Macro Task)： 宏任务是比较“大”的任务，比如：
- setTimeout
- setInterval
- I/O 操作 (例如：读取文件、网络请求)
- UI 渲染
- script (首次进入页面执行的脚本)
微任务 (Micro Task)： 微任务是比较“小”的任务，比如：
- Promise.then
- async/await (本质上是 Promise 的语法糖)
- MutationObserver (监听 DOM 变化的 API)
- queueMicrotask (手动将任务添加到微任务队列)

宏任务与微任务的执行顺序：

事件循环会不断地从宏任务队列中取出一个任务执行，每执行完一个宏任务，就会检查微任务队列，将所有微任务都执行完毕，然后再取下一个宏任务执行。

可以用一个表格来清晰地展示：

循环阶段	执行内容
1. 执行栈清空后，开始执行第一个宏任务	通常是 `script` 脚本的执行。