JavaScript 是一门单线程语言，这意味着它一次只能执行一个任务。但浏览器或 Node.js 环境却能同时处理网络请求、用户交互和定时器等多种操作，这归功于事件循环机制。在事件循环中，任务被分为同步和异步两类，它们的执行顺序和方式截然不同。理解这两者的区别，是掌握 JavaScript 异步编程的关键。
同步任务与异步任务的基本概念
同步任务是指那些在主线程上排队执行的任务，前一个任务执行完之前，后一个任务必须等待。例如普通的函数调用、变量赋值、循环等。异步任务则不会立即执行，而是被添加到任务队列中，等待主线程空闲时再执行。常见的异步任务包括定时器（setTimeout、setInterval）、网络请求（XMLHttpRequest、fetch）、Promise 回调、事件监听等。
事件循环的工作流程可以简化为：主线程执行同步任务，遇到异步任务时将其交给相应模块处理，模块完成后将回调放入任务队列；当同步任务全部执行完毕，事件循环会查看任务队列，取出异步任务执行。这个过程不断重复。
任务队列的分类：宏任务与微任务
在事件循环中，异步任务进一步分为宏任务（MacroTask）和微任务（MicroTask）。它们的执行顺序有严格规定：每一轮事件循环，先执行一个宏任务，然后执行所有微任务，再执行下一个宏任务。常见的宏任务有：script整体代码、setTimeout、setInterval、I/O、UI渲染等。微任务有：Promise.then/catch/finally、MutationObserver、queueMicrotask、async/await（实际上是Promise封装）等。
这个区别非常重要，因为它直接决定了代码的执行顺序。例如，一个 Promise 的回调会作为微任务排在当前宏任务结束后的微任务队列中，而 setTimeout 的回调会作为下一个宏任务。
代码示例：同步与异步的执行顺序
下面通过一个简单的例子直观展示同步与异步任务的执行顺序。注意代码中包含了同步代码、Promise（微任务）和 setTimeout（宏任务）。
console.log('同步开始');
setTimeout(() => {
console.log('宏任务：setTimeout');
}, 0);
Promise.resolve().then(() => {
console.log('微任务：Promise.then');
});
console.log('同步结束');运行结果：
同步开始 同步结束 微任务：Promise.then 宏任务：setTimeout
可以看到，同步代码（两个 console.log）首先按顺序执行。然后事件循环检查微任务队列，执行 Promise 回调。最后执行下一个宏任务（setTimeout 回调）。即使 setTimeout 的延迟为 0，它也会被推迟到微任务之后。
理解 async/await 在事件循环中的行为
async/await 是 Promise 的语法糖，它的执行同样遵循事件循环规则。当调用 async 函数时，函数内的代码以同步方式执行，直到遇到 await 关键字。await 会暂停函数执行，并将后续代码包装成 Promise 回调放入微任务队列。看下面的例子：
async function test() {
console.log('async 函数开始');
const result = await Promise.resolve('await 结果');
console.log(result);
console.log('async 函数结束');
}
console.log('外部同步');
test();
console.log('外部同步结束');运行结果：
外部同步 async 函数开始 外部同步结束 await 结果 async 函数结束
注意：test() 被调用后，函数体的同步部分立即执行（打印“async 函数开始”），遇到 await 后立即返回，后续代码被放入微任务队列。然后继续执行外部同步代码，最后处理微任务，恢复 async 函数的执行。
实际开发中的陷阱与最佳实践
很多常见 bug 都源于对同步与异步任务顺序的误解。例如，在 for 循环中使用 setTimeout 或 Promise，若没有正确使用闭包或 let，可能导致意料之外的结果。下面展示一个经典的循环陷阱：
for (var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i); // 输出 5 个 5
}, i * 1000);
}由于 var 声明的 i 是函数级作用域，循环结束后 i 变为 5，所有 setTimeout 回调共享同一个 i。改进方案：使用 let 声明（块级作用域）或通过闭包捕获当前值：
for (let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i); // 输出 0,1,2,3,4
}, i * 1000);
}另一个常见误区是以为异步任务总会在指定延迟后立即执行。实际上，如果主线程被同步任务阻塞，异步任务只能等待。例如：
setTimeout(() => {
console.log('定时器触发');
}, 0);
// 耗时的同步计算
let sum = 0;
for (let i = 0; i < 1000000000; i++) {
sum += i;
}
console.log('计算结束');输出：先打印“计算结束”，再打印“定时器触发”。因为同步循环占用了主线程，定时器回调只能等待循环结束后才被处理。
总结与思考
区分同步与异步任务的核心在于理解事件循环的调度规则：同步任务优先执行，异步任务按类型（宏/微）分阶段处理。微任务的优先级高于宏任务，这意味着 Promise 或 async/await 中的回调会在下一个宏任务之前执行。实际编码时，我们可以通过 queueMicrotask 手动创建一个微任务，或利用 setTimeout(fn, 0) 创建宏任务来调整执行顺序。
掌握这些规则后，你可以更自信地编写异步代码，避免因执行顺序导致的逻辑错误。同时，也能更深刻地理解 JavaScript 运行时的工作原理，为后续学习更复杂的并发模型（如 Web Workers）打下基础。