JS—异步编程：3分钟掌握异步编程

个人博客：haichenyi.com。感谢关注

一. 目录

一--目录
二--引言
[三--JavaScript 事件循环机制](#三–JavaScript 事件循环机制)
[四--定时器的秘密：setTimeout 和 setInterval](#四–定时器的秘密：setTimeout 和 setInterval)
五--异步编程模型对比

二. 引言

在现代Web开发中，异步编程是提升性能的关键技术。无论是脚本加载，用户交互，网络请求，异步编程都是贯穿始终的。上一篇博客已经说了异步加载JavaScript脚本的async和defer了。本文在深入讲解一下异步编程。

三.JavaScript 事件循环机制

3.1 单线程与任务队列

JavaScript 运行时环境的核心结构如下：

3.2 微任务 vs 宏任务

类型	示例	优先级	执行时机
微任务	Promise.then()	高	当前宏任务结束后立即执行
宏任务	setTimeout、DOM 事件	低	下一轮事件循环

3.3 执行流程详解

同步代码入栈执行
- 所有同步代码按顺序入**调用栈(Call Stack)**执行
- 遇到异步API(如setTimeout，pormise等)，交给浏览器内核处理
异步任务完成后回调分发
- 宏任务(如setTimeout回调)推入宏任务队列
- 微任务(如promise.then())推入微任务队列
事件循环规则
- 单次循环(Tick)的步骤
  - 1.执行调用栈中的同步代码，只到栈空
  - 2.清空微任务队列 中的所有任务(按入队顺序执行)
  - 3.渲染页面(如果需要的话)
  - 4.从宏任务队列 取出第一个任务 推入调用栈执行
  - 5.重复执行

3.4 示例代码与执行过程

复制代码

console.log("Script Start"); // 同步任务
setTimeout(() => console.log("Timeout"), 0); // 宏任务
Promise.resolve()
  .then(() => console.log("Promise 1")) // 微任务
  .then(() => console.log("Promise 2")); // 微任务
console.log("Script End"); // 同步任务

执行步骤分解：

1. 同步代码执行

复制代码

	Call Stack: [main]
	→ 打印 "Script Start"
	→ 注册 `setTimeout`（交给浏览器计时模块）
	→ 注册 `Promise.then()`（微任务入队）
	→ 打印 "Script End"

2.清空微任务队列

复制代码

Microtask Queue: [Promise 1]
→ 执行 `Promise 1`，打印 "Promise 1"
→ 注册下一个 `then()`（微任务入队）
→ Microtask Queue: [Promise 2]
→ 执行 `Promise 2`，打印 "Promise 2"

3.取出宏任务执行

复制代码

Macrotask Queue: [Timeout]
→ 执行 `Timeout`，打印 "Timeout"

4.最终输出

复制代码

Script Start
Script End
Promise 1
Promise 2
Timeout

四.定时器的秘密：setTimeout 和 setInterval

4.1 最小延迟的真相

场景	最小延迟	原因
未嵌套调用	1ms	浏览器优化策略
嵌套超过 5 层	4ms	防止无限循环阻塞
后台标签页	≥1000ms	浏览器节流（Chrome 为例）

PS：这种值都不准确，都是需要根据实际的场景来的。

测试代码：

复制代码

const start = performance.now();
setTimeout(() => {
  console.log(`实际延迟: ${performance.now() - start}ms`);
}, 0);

4.2 setInterval 的陷阱

复制代码

// 问题：回调执行时间超过间隔会导致堆积
setInterval(() => {
  heavyTask(); // 假设耗时 15ms
}, 10);

// 解决方案：递归 setTimeout + 动态补偿
function recursiveCall() {
  setTimeout(() => {
    heavyTask();
    recursiveCall();
  }, 10);
}

五.异步编程模型对比

异步编程，并发，并行。有没有想过到底是什么？cpu就像我们的大脑，我们同时只能思考一件事情，为什么一个cpu就能实现"并发"？多任务"同时执行"？

这个"并发"？真的是我们以为的并发吗？多任务"同时执行"真的是我们认为的"同时执行"吗？答案是否定的，不是

让我们来走进并发的世界，世界是一个巨大的草台班子。

我们认定一件事情：我们一个脑袋，同时只能思考一个问题，不能思考多个问题。CPU也是一样的，一个CPU同时只能执行一个指令，同时发多个指令只能排队执行。

那么，问题就来了，这个并发，多线程是怎么实现的呢？只要把时间分的足够的小，"同一时间"能执行的任务就能足够的多，这样就能达到"并发"的目的。 怎么理解这句话呢？

举个栗子：

我们之前上学的时候，一上午4节课，每节课40分钟，我们一上午就是上完第一节语文课，上第二节数学课，上第三节英语课，上第四节物理课。以40分钟为一个时间片，按照顺序上课。
我要是以20分钟为一个时间片呢？上20分钟语文，上20分钟数学，上20分钟英语，上20分钟物理。然后，循环一次。最终语文花了40分钟，数学花了40分钟，英语花了40分钟，物理花了40分钟，还是花了相同的时间，完成了同样的事情。
要是时间片再短一点呢？上1分钟语文，上1分钟数学，上1分钟英语，上1分钟物理。循环40次
要是时间片再短一点呢？上1秒钟语文，上1秒钟数学，上1秒钟英语，上1秒钟物理。循环40*60次
要是时间片再短一点呢？上1毫秒语文，上1毫秒数学，上1毫秒英语，上1毫秒物理。循环40601000次
要是再短一点呢？

可能，你会说1分钟都学不到东西了，更别说1秒，1毫秒了，能学什么东西？诶，这就是区别，机器能记住上一次执行的状态，下次再接着执行，不要杠，不接受反驳。

并发的底层原理就行，把一个任务分割成足够小的时间块， 比方说你的任务A完成需要0.5秒钟，任务B完成需要0.5秒。例如，把任务A分成5次执行，每次消耗0.1秒，任务B也是同样。可能，CPU干了0.1秒的任务A，然后干0.2秒的任务B。具体的执行顺序，是CPU调度的。反正，总耗时是1秒钟，完成了任务A和任务B。在人类看来，1秒钟完成了两个任务，并发执行的。这就是并发。

以上，我说的都是单核，也就是1个CPU，现在手机，电脑都是4核，8核。这就设计另一个名词了：并行，并行才能我们所理解的"并发"，才是真正的并发。多个任务同时执行，不存在时间片轮转

说了这么多，总结一下：精华
说了这么多，总结一下：精华
说了这么多，总结一下：精华

同步 vs 异步（编程模型视角）
- 同步（Synchronous）代码顺序执行，每一步操作必须等待前一步完成。
  - 特点：逻辑简单直观，但会阻塞后续操作。
- 异步（Asynchronous）代码不按顺序等待，通过回调、事件循环或线程调度等方式，让耗时操作在后台执行，主流程继续运行。
  - 特点：提升吞吐量，避免阻塞，但逻辑复杂度高。
并发 vs 并行（CPU 执行视角）
- 并发（Concurrency）单核 CPU 上通过时间片轮转，让多个线程交替执行，看似"同时"运行（实际是快速切换）。
  - 本质：通过调度策略模拟多任务，例如线程切换、协程（Coroutine）。
- 并行（Parallelism）多核 CPU 上真正同时执行多个线程，每个核心独立处理任务。
  - 本质：硬件层面的同时执行。

对比项	并发	并行
依赖条件	单核即可	需多核 CPU
执行方式	时间片轮转（交替执行）	多核同时执行
编程模型	多线程、协程	多线程、分布式计算

Java 多线程的底层实现
- 单核 CPU
  - 多线程通过时间片轮转（Time Slicing）实现并发。
  - 每个线程获得极短的 CPU 时间片（如 10ms），快速切换，用户感知为"异步"。
  - 本质：调度策略的同步切换，但宏观上表现为异步行为。
- 多核 CPU
  - 线程可分配到不同核心，实现真正并行。
  - 例如：4 核 CPU 可同时运行 4 个线程，其余线程仍依赖时间片轮转。
异步编程 ≠ 多线程
- 多线程是实现异步的一种方式，但异步编程模型更抽象：
  - 回调（Callback）：单线程下通过事件循环处理异步（如 JavaScript）。
  - Future/Promise：封装异步操作结果（如 Java 的 CompletableFuture）。
  - 协程（Coroutine）：轻量级线程，由用户态调度（如 Kotlin 协程）
- 示例：Java 的 NIO（Non-blocking I/O）
  使用单线程事件循环处理网络请求，通过非阻塞 I/O 和就绪选择（Selector）实现高并发，无需多线程。

再回到本篇的开头，JavaScript的异步编程，就可以理解为，单核CPU的并发，通过时间片的轮转方式去调度任务。任务怎么调度？再看一下单线程与任务队列。这样就串起来了。