JavaScript 单线程特性导致同步代码阻塞页面，异步机制通过事件循环解决此问题。核心涉及调用栈、任务队列及宏微任务优先级。异步编程从回调演进至 Promise 再到 async/await，旨在降低复杂度。关键点包括 setTimeout 非精确延迟、await 本质为语法糖、浏览器与 Node 环境差异及常见错误规避（如变量提升、Promise 错误处理）。
JavaScript 作为浏览器和 Node.js 的核心脚本语言，单线程是其天生特性 —— 同一时间只能执行一段代码。这一设计源于 JS 的核心用途：处理页面交互（DOM 操作）和网络请求，若所有操作都同步执行，一个耗时的网络请求就会导致页面卡死（俗称'阻塞'）。
比如：
// 同步代码的阻塞问题
function syncTask() {
start = .();
(.() - start < ) {}
.();
}
();
.();
此时页面会卡顿 3 秒，用户无法点击、滚动。而异步机制的出现，正是为了解决'单线程阻塞'问题，让 JS 能在等待耗时操作时，继续执行其他任务。
示例：
let a = 1;
let b = 2;
let c = a + b; // 同步执行，立即得到结果 3
console.log(c); // 顺序输出 3
示例：
console.log("1. 启动异步任务");
setTimeout(() => {
console.log("3. 异步任务完成"); // 延迟 1 秒执行
}, 1000);
console.log("2. 继续执行后续代码"); // 不等待异步任务，立即执行
// 输出顺序：1 → 2 → 3
要彻底理解同步异步，必须搞懂调用栈（Call Stack）、任务队列（Task Queue）、事件循环（Event Loop） 这三大核心组件。
console.log("1. 同步代码开始");
setTimeout(() => {
console.log("6. 宏任务：setTimeout 回调");
}, 0);
Promise.resolve().then(() => {
console.log("4. 微任务：Promise.then");
}).then(() => {
console.log("5. 微任务：第二个 then");
});
console.log("2. 同步代码中间");
async function asyncTask() {
console.log("3. 同步：async 函数执行");
await Promise.resolve(); // await 后相当于微任务
console.log("7. 微任务：await 后续代码");
}
asyncTask();
console.log("8. 同步代码结束");
执行顺序解析：
JS 异步编程经历了三次重要演进，核心目标是解决'回调地狱'，让代码更易读、易维护。
示例（回调地狱）：
// 模拟获取用户信息→获取用户订单→获取订单详情
getUserInfo(userId, (userErr, userData) => {
if (userErr) throw userErr;
getOrderList(userData.id, (orderErr, orderData) => {
if (orderErr) throw orderErr;
getOrderDetail(orderData[0].id, (detailErr, detailData) => {
if (detailErr) throw detailErr;
console.log("订单详情：", detailData);
});
});
});
示例（Promise 链式调用）：
getUserInfo(userId)
.then(userData => getOrderList(userData.id))
.then(orderData => getOrderDetail(orderData[0].id))
.then(detailData => console.log("订单详情：", detailData))
.catch(err => console.error("错误：", err));
示例（async/await 优化）：
async function getOrderInfo(userId) {
try {
const userData = await getUserInfo(userId); // 等待 Promise 成功
const orderData = await getOrderList(userData.id);
const detailData = await getOrderDetail(orderData[0].id);
console.log("订单详情：", detailData);
} catch (err) {
console.error("错误：", err); // 统一捕获所有错误
}
}
getOrderInfo(userId);
setTimeout 的延迟时间是'最小延迟'，而非'精确延迟'。因为回调函数需等待调用栈为空、微任务清空后才执行。
示例：
setTimeout(() => {
console.log("延迟 1 秒执行？");
}, 1000);
// 同步代码阻塞 3 秒
let start = Date.now();
while (Date.now() - start < 3000) {}
// 实际延迟 3 秒才执行，而非 1 秒
await 后的代码会被包装成微任务，且 await 会暂停当前 async 函数，而非整个线程。
示例：
async function test() {
console.log("1");
await Promise.resolve();
console.log("3"); // 微任务
}
test();
console.log("2"); // 同步代码，不被 await 阻塞
// 输出：1 → 2 → 3
示例（Promise.all 并行优化）：
// 串行执行：总耗时 = 1 秒 + 2 秒 = 3 秒
async function serialTask() {
const res1 = await fetch("/api/1");
const res2 = await fetch("/api/2");
}
// 并行执行：总耗时 = 2 秒（取最长任务时间）
async function parallelTask() {
const promise1 = fetch("/api/1");
const promise2 = fetch("/api/2");
const [res1, res2] = await Promise.all([promise1, promise2]);
}
JS 的同步异步本质是单线程模型下的效率优化方案：
掌握本文的原理、案例和避坑点，有助于应对面试中的同步异步问题，以及实际开发中的异步场景优化。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online