Visual408 Lab · 计算机综合学科基础 408 可视化交互学习综合实验室

An interactive, open-source lab for visualizing CS408 fundamentals — right in your browser.

在线使用 · GitHub Pages 镜像 · 反馈建议 · 贡献指南

---

这是什么

把 408 的抽象概念做成可以一步一步推的交互实验：改参数、点下一步、看状态怎么变，而不是看动画。

• 打开即用：无需安装、无需注册，学习进度保存在你自己的浏览器里；
• 118 个实验：数据结构 30、计组 30、操作系统 30、计算机网络 25，另有 3 个跨学科综合实验；
• 每个实验都有确定性测试：教学数值（命中率、缺页数、CPI、握手序号…）都能被复现和验证；
• 多学习档案：同一浏览器可建多个档案，进度互不干扰；
• 实验内搜索与相关实验：不用回目录就能找到本实验的知识点与相邻实验。

在线使用（推荐）

入口	地址	说明
主站	https://visual408-lab.pages.dev/	国内访问较快
镜像	https://zhoupi-314.github.io/Visual408-Lab/	GitHub Pages 自动部署

手机上也能用：底部的播放控件是悬浮 Dock，不会遮挡内容。

实验一览

学科	实验	一句话收获
数据结构	二叉树遍历	栈深 = 还没返回的祖先个数
数据结构	排序（插入/冒泡/快排）	插入排序是「空位 + 手里拿着值」
数据结构	图遍历 BFS/DFS	BFS 用队列按层，DFS 用栈深入
数据结构	查找（顺序/折半）	折半必须有序列且要求随机访问
计算机组成原理	Cache 直接映射	同一个地址也可能两次缺失
计算机组成原理	组相联 Cache	相联度用并行比较换更少的冲突缺失
操作系统	页面置换	命中也要更新 LRU；Belady 只在 FIFO
操作系统	进程调度	周转 = 完成 − 到达；RR 的同刻入队次序容易错
计算机网络	TCP 连接管理	FIN 占 1 个序号；TIME_WAIT 等 2MSL
计算机网络	IPv4 子网划分	可用主机 = 2^(32−前缀) − 2
综合实验	虚拟地址访问链路	TLB 命中 ≠ Cache 命中
综合实验	网络发送链路	分段 ≠ 分片；跨子网时目的 MAC 是网关
综合实验	程序执行链路	load-use 冒险让 CPI 从 1 升到 2

新增 15 个实验（第一批新增）

学科	实验	看点
数据结构	栈与队列	同一串操作，两种结构结果不同
数据结构	大根堆插入	沿父链上浮，逐次交换
数据结构	哈希表线性探测	冲突后向后找空槽，探测可视化
数据结构	Kruskal 最小生成树	按权加边 + 并查集判环
组成原理	指令格式拆分	32 位字按 opcode/rs/rt/imm 切开
组成原理	IEEE 754 浮点	符号/阶码/尾数逐段还原
组成原理	AMAT 平均访问时间	命中率与缺失代价的权衡
组成原理	I/O 方式对比	查询 / 中断 / DMA 的 CPU 占用
操作系统	银行家算法	逐步试探安全序列
操作系统	PV 操作	信号量与缓冲区阻塞
操作系统	磁盘调度	FCFS / SSTF / SCAN 轨迹对比
操作系统	inode 索引分配	直接块与多级间接的容量
计算机网络	CRC 校验	模 2 除法逐步异或
计算机网络	滑动窗口 GBN	超时整窗重传
计算机网络	ARP 解析	跨网段只问网关

再新增 15 个实验（第二批）

学科	实验	看点
数据结构	Dijkstra 单源最短路	贪心选点 + 逐边松弛
数据结构	拓扑排序（Kahn）	入度表归零入队
数据结构	并查集	按秩合并 + 路径压缩
数据结构	KMP 前缀函数	next 数组逐位构造
组成原理	写直达 vs 写回	主存写次数对比
组成原理	指令周期四阶段	取指/间址/执行/中断时序
组成原理	总线仲裁	链式/计数器/独立请求
组成原理	RAID 0/1/5	容量与容错权衡
操作系统	动态分区分配	首次/最佳/最坏适应
操作系统	段式地址转换	段表 + 越界检查
操作系统	文件物理结构	连续/链接/索引寻址
操作系统	中断处理流程	关中断→保存→识别→服务→恢复
计算机网络	CSMA/CD 退避	冲突 k 次窗口 2^k
计算机网络	NAT 转换表	端口复用与回包还原
计算机网络	DNS 递归/迭代	谁去逐级问

第三批 15 个实验

学科	实验	看点
数据结构	二叉搜索树查找	比较路径逐结点高亮
数据结构	Floyd 全源最短路	距离矩阵按 k 轮更新
数据结构	哈夫曼树 WPL	每次合并最小两个权值
数据结构	循环队列	front/rear 取模与判满
组成原理	流水线时空图	5 级流水线周期格推进
组成原理	三类缺失	强制/冲突缺失逐次判定
组成原理	原码/反码/补码/移码	同一负数的四种位串
组成原理	多体交叉存储	并行启动与加速比
操作系统	缺页处理流程	脏页多一次写回 I/O
操作系统	工作集与抖动	页框不足导致缺页率飙升
操作系统	磁盘地址 CHS→LBA	寻道/旋转/传输量级对比
操作系统	Peterson 互斥	flag + turn 的进入协议
计算机网络	最长前缀匹配	路由表逐条掩码匹配
计算机网络	TCP 流量控制	rwnd 收缩与恢复
计算机网络	DHCP DORA	四个报文的时间轴

第四批 15 个实验

学科	实验	看点
数据结构	B 树插入分裂	中间关键字上移，树向上长
数据结构	基数排序	按位分配/收集，逐轮稳定
数据结构	哈希拉链法	冲突挂链，装载因子实时算
数据结构	AVL 四种旋转	LL/RR/LR/RL 判型与旋转
组成原理	流水线冒险	气泡插入与周期对比
组成原理	寻址方式 EA	四种寻址的有效地址与访存次数
组成原理	总线时序	同步/异步/半同步对照
组成原理	CPI 与加速比	指令混合决定平均 CPI
操作系统	多级反馈队列	时间片用完降级，长作业下沉
操作系统	死锁检测	资源分配图环路判定
操作系统	段页式转换	段表→页表两次查表
操作系统	I/O 缓冲	无/单/双缓冲耗时对比
计算机网络	TCP 拥塞控制	慢启动翻倍、拥塞避免线性
计算机网络	socket 调用顺序	listen/accept 与 connect 对应握手
计算机网络	IP 分片	MTU 切片、偏移按 8 字节

第五批 15 个实验

学科	实验	看点
数据结构	关键路径（AOE 网）	拓扑求最早、逆序求最迟，松弛 0 即关键
数据结构	稀疏矩阵快速转置	num/cpot 定位表，一次扫描完成转置
组成原理	TLB 与地址转换	命中快表省一次访存，缺失才查页表
组成原理	浮点加减法	对阶→相加→规格化→判溢出四步
组成原理	总线带宽计算	位宽÷周期×频率，三因子联动
组成原理	指令微操作序列	ADD/LOAD/STORE 逐步控制信号
操作系统	进程状态转换	五状态逐步迁移与时间线
操作系统	两级页表转换	目录→页表→页框，三级访存
操作系统	读者写者	读读并行、读写互斥的冲突计数
操作系统	生产者消费者	空槽/满槽/互斥，满空即阻塞
计算机网络	停等协议 ARQ	发一帧等一确认，超时重传可见
计算机网络	选择重传 SR	只补丢帧，对比 GBN 全量重发
计算机网络	以太网帧格式	各段字节数与 64 字节最小帧填充
计算机网络	RIP 距离向量	逐轮交换、收敛矩阵、路由表
计算机网络	IPv6 地址压缩	去前导零 + 最长全零段 :: 压缩

第六批 15 个实验

学科	实验	看点
数据结构	Prim 最小生成树	每步挑最小横切边逐点扩张
数据结构	归并排序	段长翻倍逐轮归并、比较计数
数据结构	中缀转后缀求值	优先级弹栈 + 后缀求值双栈
数据结构	图的存储结构	邻接矩阵/邻接表/逆邻接表并排
组成原理	ALU 标志位与溢出	CF/OF 一次看清两种解释
组成原理	存储器扩展	位扩展×字扩展芯片数计算
组成原理	流水线性能指标	吞吐率、加速比、效率三件套
组成原理	Booth 补码乘法	Q₀Q₋₁ 判加减、算术右移逐步
操作系统	fork 进程计数	双返回与 2ⁿ 进程树
操作系统	哲学家就餐	三种策略对比死锁
操作系统	最少资源防死锁	n×(k−1)+1 的推导
操作系统	i 节点最大文件	直接块 + 三级间接逐层累加
计算机网络	CIDR 路由聚合	二进制公共前缀逐位求
计算机网络	跨网段 IP 与 MAC	IP 不变、MAC 逐跳更换
计算机网络	时延带宽积与利用率	停等利用率与管道容量

第七批 15 个实验

学科	实验	看点
数据结构	KMP 匹配过程	next 跳表、i 永不回退
数据结构	中序线索二叉树	空指针变前驱/后继线索
数据结构	一元多项式相加	双指针归并、系数相消删项
数据结构	后缀式建表达式树	一个栈拼树，先右后左
组成原理	汉明码检错纠错	syndrome 直接指错位号
组成原理	Cache 平均访问时间	同时 vs 层次两种口径
组成原理	加法器进位延迟	行波 (n+1)t 对比先行进位
组成原理	CPU 寄存器数据通路	一条指令的传送流水
操作系统	高响应比优先调度	Rp=(等待+服务)/服务
操作系统	工作集与窗口	Δ 窗口滑动看页集合
操作系统	SPOOLing 假脱机	独占设备虚拟成共享
操作系统	多级目录按名存取	逐级访盘数目录项
计算机网络	HTTP 持久连接	2RTT 与 1RTT 的差距
计算机网络	TCP 与 UDP 首部	20B 与 8B 字段拆解
计算机网络	交换机自学习	表项积累与泛洪/直达

这 105 个实验共用一套通用视图层（chips / bars / grid / bits / timeline / matrix）， 模拟器只产出数据与状态，渲染由统一组件完成 —— 所以它们都有逐帧演示动画，且新增一个实验约 100 行代码。 每个实验还提供**「快速场景」预设**、重置参数、播放速度 1×/2×、复制本步链接，以及键盘提示（← → 翻步、空格播放、R 重置）。

每个实验统一提供：参数输入、单步/回放、代码联动、巩固练习（答题记录进错题本）。 另有题库页，可检索全部原创题目与解析。

设计原则

1. 确定性：模拟器是纯函数，同一输入永远得到同一帧序列，禁止随机与时钟；
2. 可验证：每个实验的黄金数值都写成测试，改坏了会立刻红；
3. 低耦合：实验只依赖协议，不依赖播放器与存储；新增实验不改框架；
4. 无后端：纯静态站点，运行时零网络请求，数据只在你本机。

技术原理（简述）

content/ (yaml+mdx)  ──构建期校验──▶  知识索引
packages/sim-core   纯函数 simulate(input) → Frame[]
packages/display    共享渲染组件（面板/指标/表格/流水线）
apps/web            只负责装配：路由、播放器、存储

• 不可变帧：一次算出全部状态快照，回退只是移动索引（O(1)），不需要重放；
• 组合而非复制：跨学科实验直接复用单科内核（例如访问链路调用 Cache 判定），有对账测试；
• 存储端口化：StoragePort 有内存与 IndexedDB 两个实现，将来接云端只换适配器；
• 版权门禁：内容 schema 强制 authorized 字段，未授权内容会让构建失败。

本地开发

需要 Node.js ≥ 24 与 pnpm ≥ 11。不需要数据库、不需要 Docker。

git clone https://github.com/zhouPi-314/Visual408-Lab.git
cd Visual408-Lab
pnpm install
pnpm dev          # http://127.0.0.1:5173

命令	作用
pnpm dev	开发服务器
pnpm test	283 个单元测试
pnpm verify	一次跑完类型检查/测试/内容/构建（提交前用这个）
pnpm typecheck	类型检查
pnpm build	生产构建（apps/web/dist）
pnpm content:check	内容校验 + 版权门禁
pnpm a11y	axe 无障碍审计（需本机 Edge）

一键部署（想自己搭一份）

GitHub Pages 已配置自动部署：fork 后 push 到 main 即发布（.github/workflows/deploy.yml）。

Cloudflare Pages 已配置随 push 自动部署（.github/workflows/deploy-cloudflare.yml）： 在仓库 Secrets 里配置 CLOUDFLARE_API_TOKEN 与 CLOUDFLARE_ACCOUNT_ID 即生效，未配置时该任务自动跳过。

也可以本地手动部署（国内更快）：

npx --yes wrangler@latest pages deploy apps/web/dist --project-name <你的项目名>

也可以直接运行仓库里的脚本：

./scripts/deploy-pages.ps1 -ProjectName <你的项目名>

目录结构

apps/web                 导航、实验页、题库、播放器
packages/sim-core        协议 + 118 个纯函数模拟器
packages/display         共享渲染组件
packages/storage         StoragePort（内存 / IndexedDB）
packages/content-schema  内容 schema + 版权门禁
content/<学科>/<实验>/    内容唯一事实源
docs/                    架构、部署、无障碍、备份演练

进度与路线图

当前：118 个实验 / 283 个测试 / 双主题（浅色·深色）/ 无障碍 0 违规。

开发节奏（目标）：以每天 15–20 个实验的速度补充，每个实验都附确定性测试与内容， 不为了数量牺牲可验证性。

• 近期：补齐四科高频考点（图算法、指令周期、PV 操作、路由与 ARP 等）；实验内搜索；
• 中期：本机多存档隔离、完整的题目解析库、更多跨学科链路（存储层次、可靠的传输）；
• 长期：可选的云端账号与跨设备同步、在线 C++ 沙箱（需独立安全评审）、AI 讲题（可关闭）。

已知问题与修复记录

问题	现状
小屏播放条遮挡内容	已修：改为悬浮 Dock，留出安全区
代码行号对比度不足（axe serious）	已修：标记装饰性并提高对比度
插入排序帧里出现重复值	已修：改为「空位 + 手里值」建模
zod < 4.6.6 的 DoS 风险	已修：升级并保持审计 0 漏洞
宽表格在手机上横向滚动	已修：置换实验可切「只看当前列」
本地仅单一存档	已修：支持多学习档案（进度隔离）
综合实验页表写死	已修：页表可在界面编辑（VPN:PFN）
读屏器人工走查	已做：NVDA 实测通过，见 无障碍审计
CI 红但本地绿	已修：tsc -b 的增量缓存会跳过检查，CI 改用 typecheck:ci（--force），并禁止提交 *.tsbuildinfo

参与贡献

欢迎 Issue / PR / 纠错 / 建议：

• 发现知识性错误：请指出实验名与第几步，最好附上教材依据；
• 新增实验：请同时提交模拟器、黄金测试、内容与截图；
• 界面与无障碍：优先修对比度、键盘路径与移动端问题。

详见 CONTRIBUTING.md。

许可与致谢

• 代码：MIT；借鉴或复用时请注明来源，详见 NOTICE；
• 内容：题目与解析均为原创，不收录未授权真题与教材图表；
• 安全说明：SECURITY.md。

这个项目首先服务于大家的考研复习理解408计算机学科基础与计算机专业同学和计算机爱好者的学习，欢迎大家的使用学习。 如果它对你有帮助，欢迎点个 Star ⭐ 或留下你的建议。