JavaScript同步与异步执行顺序解析

在 JavaScript 中,代码执行遵循 同步优先,异步靠后 的原则。具体执行顺序如下:

核心执行规则:

  1. 同步代码:立即在主线程执行(优先处理)

  2. 异步代码

    • 微任务(Microtask) :同步代码执行后立即执行(如 Promise.thenasync/await
    • 宏任务(Macrotask) :微任务执行后才执行(如 setTimeoutsetInterval、DOM 事件)

完整执行流程:

示例代码分析:

javascript 复制代码
console.log("1"); // 同步

setTimeout(() => console.log("2"), 0); // 宏任务

Promise.resolve()
  .then(() => console.log("3")); // 微任务

console.log("4"); // 同步

输出顺序:

复制代码
1 → 4 → 3 → 2

特殊场景说明:

  • async/await 本质await 之前的代码同步执行,await 之后的代码相当于 .then()(微任务)
javascript 复制代码
async function demo() {
  console.log("A"); // 同步
  await Promise.resolve();
  console.log("B"); // 微任务
}

总结执行顺序:

同步代码 → 微任务队列(全部清空)→ 宏任务队列(每次取一个)→ 微任务队列(再次检查)→ ...循环

掌握这一机制能有效解决异步陷阱。

相关推荐
Wect9 小时前
深度剖析浏览器跨域问题
前端·面试·浏览器
陈随易9 小时前
bun将会支持Bun.image,你怎么看?
前端·后端·程序员
jingqingdai39 小时前
别用正则格式化 HTML!我用 DOM 遍历实现零风险本地格式化,老项目重构效率直接拉满
前端·重构·html
木斯佳9 小时前
前端八股文面经大全:腾讯前端实习二、三OC面(2026-04-27)·面经深度解析
前端·状态模式
Python私教9 小时前
如意Agent日志系统重构:从 print() 大海捞针到结构化可观测性栈
java·前端·重构
We་ct10 小时前
LeetCode 97. 交错字符串:动态规划详解
前端·算法·leetcode·typescript·动态规划
Chengbei1110 小时前
轻量化 Web 安全日志分析神器 星川智盾日志威胁检测、地理溯源、MITRE ATT&CK 映射,支持 Windows/macOS/Linux
前端·人工智能·安全·web安全·macos·系统安全·安全架构
风流 少年10 小时前
Python Web框架:FastAPI
前端·python·fastapi
GISer_Jing10 小时前
AI时代面试新常态——从“会用工具”到“深挖原理”的跨越
前端·人工智能·ai编程