引言：在浏览器里“点亮”一台486

上世纪九十年代初，486级别的x86整机是个人计算的标配：处理器、浮点协处理器、主板芯片组、中断与定时系统、扩展总线、插在插槽上的各类板卡、BIOS与磁盘驱动器协同工作，构成一个完整而“透明”的计算系统。近年来，社区中出现了颇具代表性的开源实践：开发者仅使用标准ES6语法、不依赖任何第三方运行时和外部库，就在浏览器标签页里把这套体系完整复原——不仅能引导未经修改的开源DOS系统，还能流畅运行当年的经典3D射击游戏。

这类项目的意义远不止怀旧滤镜。它把教科书里的“计算机组成原理”变成一个可以插拔、观测、改造的活体沙盒。本文以此为蓝本，从架构分层、核心模块实现、交互设计到性能优化，完整梳理浏览器端整机模拟的技术路线，并给出关键环节的实现思路与示意代码。

一、整机模拟与CPU模拟：难度分水岭在哪里

浏览器端的复古计算方案大多停留在两个层次：要么只模拟处理器指令集，要么直接提供一个预封装好的DOS运行环境。前者缺少外设，真实软件根本无法启动；后者本质是软件移植，用户看不到任何硬件交互过程。

整机模拟则要求建立完整的“硬件世界观”：

• 处理器核心与浮点协处理器：指令语义必须严格准确；
• 主板芯片组：中断控制器、可编程定时器、实时时钟、键鼠控制器、DMA通道缺一不可；
• 总线与设备：ISA/VLB插槽上可以插拔显卡、声卡、I/O卡等模型；
• 固件与存储：能执行未经修改的真实BIOS镜像，并从磁盘镜像引导操作系统。

判断“整机”成色的金标准是兼容性：未经修改的BIOS、操作系统与应用程序能否直接运行。任何一处未实现的端口行为或时序偏差，都可能让机器在自检阶段“死机”。这也是整机模拟远难于单纯CPU模拟的根本原因——难的不是指令，而是硬件之间的耦合。

二、总体架构：分层建模

一个可维护的整机模拟器，通常按以下层次组织：

┌────────────────────────────────────┐
│ 表示层：CRT界面 / 模块化标签页 / 板卡工作室 │
├────────────────────────────────────┤
│ 设备层：显卡 / 声卡 / I/O卡 / 存储设备     │
├────────────────────────────────────┤
│ 总线层：ISA / VLB，端口与中断路由         │
├────────────────────────────────────┤
│ 芯片组层：中断 / 定时 / 实时时钟 / DMA     │
├────────────────────────────────────┤
│ CPU核心：取指—译码—执行 + 浮点协处理器     │
└────────────────────────────────────┘

对应的“机器装配”逻辑可以写得非常直观：

class Machine {
  constructor(config) {
    this.cpu     = new CPUCore({ fpu: true });
    this.bus     = new Bus();
    this.chipset = new Chipset(this.bus); // 中断/定时/时钟/DMA
    this.cpu.attach(this.bus);
    for (const card of config.cards) {
      this.bus.insert(card);              // 设备即插即挂载
    }
  }
  powerOn() {
    this.cpu.reset();     // 复位向量：0xFFFFFFF0
    this.chipset.post();  // 上电自检（POST）
    this.cpu.run();       // 进入主循环
  }
}

纯ES6、零依赖的实现方式在这里有实际工程收益：模块边界清晰、没有构建链拖累、源码可直接阅读，非常适合作为教学与二次开发的底座。

三、CPU核心：取指—译码—执行的循环

CPU核心的实现可以归纳为一个不断循环的“语义翻译器”：

step() {
  const prefix = this.decodePrefixes();   // 段前缀/操作数宽度前缀
  const opcode = this.fetch8();           // 取操作码
  this.table[opcode](this, prefix);       // 查表执行
  this.handlePendingInterrupts();         // 每条指令后检查中断
}

几个关键要点：

1. 前缀与寻址模式：x86指令可选前缀叠加上复杂的寻址方式，译码器必须完整覆盖，否则真实固件会立即踏入“未定义行为”；
2. 标志位语义：算术与逻辑指令对状态标志的更新规则必须逐条对齐，BIOS自检大量依赖标志位分支；
3. 浮点协处理器：栈式浮点模型要单独实现，大量老游戏依赖它完成3D运算；
4. 中断检查点：在每条指令执行完毕后检查中断请求，保证设备信号能被及时响应。

在实现策略上，解释执行（逐条查表）结构简单、易于调试；把热点机器码动态翻译成缓存函数则能显著提速。运行DOS时代的软件，语义精确的解释器通常已经够用，这本身就是一个性能与复杂度的工程权衡点。

四、主板与芯片组：整机的“神经系统”

如果说CPU是大脑，芯片组就是让整机“活起来”的神经系统：

• 中断控制器：两片级联的可编程中断控制器提供15条可用中断线路，设备通过拉高中断线请求CPU服务，操作系统再依据中断向量表分派处理例程；
• 可编程定时器：系统的“心跳”，既驱动多任务调度，也为声卡提供方波信号源；
• 实时时钟：维护CMOS中的时间与硬件配置信息；
• 键鼠控制器：把宿主浏览器的键盘事件翻译为目标机器的扫描码；
• DMA控制器：让慢速外设不占用CPU周期即可搬运数据。

值得一提的是，中断线路、DMA通道、I/O端口基地址构成了经典ISA配置的“三元组”，也是当年硬件冲突频发的根源。模拟器把这些资源显式建模为可配置对象——用户在界面上调整声卡的中断号与DMA通道时，本质上是在亲历真实世界的中断协商过程。

五、总线与扩展卡：把“插槽”抽象成接口

总线层的核心是两张路由表：内存映射区间表和I/O端口表。设备插入插槽时注册自己的地址区间，CPU发起访问时由总线统一分派：

class ExpansionCard {
  // 子类按需覆写这些回调
  ioRead(port, size)         { return 0xFFFF; }
  ioWrite(port, value, size) {}
  memoryRead(addr, size)     { return 0; }
  memoryWrite(addr, v, size) {}
  raiseIRQ(line)             { this.bus.assertIRQ(line); }
}

在这一抽象下，各类经典板卡得以模块化落地：

• 显卡：覆盖SVGA、EGA、CGA等显示标准的寄存器与帧缓冲模型；
• 16位声卡：以PCM采样与FM合成发声，通过浏览器原生Web Audio接口输出，并支持配置中断、DMA与端口参数；
• 多功能I/O控制器：串口、并口与磁盘接口的集成模型；
• POST诊断卡：以七段数码管实时显示自检进度，是排查“启动黑屏”的利器。

ISA总线与VLB局部总线也需要区分建模：后者直连处理器引脚，为显卡提供了远高于ISA的带宽。总线模型中维护两条不同的访问路径，才能还原当年硬件的性能差异。

六、BIOS与引导：兼容性是最大的坑

整机启动的完整链路是：复位后CPU从0xFFFFFFF0处取第一条指令，BIOS完成自检、建立中断向量表，将磁盘引导扇区加载到0x7C00并移交控制权；显卡初始化过程中，还会执行扩展卡自带的VGA BIOS。链路上任何“未实现”的端口或行为都可能是致命的。这也是为什么“能引导真实DOS系统、能跑商业游戏”是整机模拟最有说服力的验收标准——它意味着数千个硬件行为细节的对齐。

七、显示与音频：复古体验的还原

CRT界面支持扫描线、绿色磷光、琥珀色、纸白等显示模式，技术上是对帧缓冲做逐像素查表着色，模拟老式显像管的发光特性；音频方面，声卡模型把DMA缓冲中的采样数据送入Web Audio的回放节点合成输出；宿主键盘事件则被映射为扫描码写入键鼠控制器，形成完整的输入闭环。

八、存储仓：镜像化的环境管理

存储功能集中在“存储仓”模块：软盘与硬盘镜像可热切换，预置的操作系统盘、工具盘、游戏盘可组合成一键直达的运行环境。若进一步把镜像与配置托管到对象存储等通用云服务（例如百度智能云），课堂或团队场景就能通过链接直接分发指定环境，省去逐台拷贝镜像的繁琐。

九、自定义板卡工作室：总线即实验台

最有想象力的设计是“自定义板卡工作室”：继承设备基类、实现几个回调，就能把自制扩展卡插进模拟主板，并通过总线状态面板、中断线路指示与七段自检数码管，实时观察自制硬件与CPU、操作系统的交互：

class MyDebugCard extends ExpansionCard {
  ioWrite(port, value) {
    console.log(`[card] port ${hex(port)} ← ${hex(value)}`);
  }
}

对体系结构教学而言，这几乎是零成本的硬件实验环境——完整观察一次中断从设备拉线到服务例程执行的全过程，比阅读十页文档更直观。

十、性能优化：让66MHz级别的机器在浏览器里跑起来

• 指令配额调度：在每帧回调中按时间片执行固定数量的指令，保证UI不卡顿；
• 平坦内存：用TypedArray建模内存，避免频繁垃圾回收；
• 主循环与音视频解耦：将音频合成等任务放入独立工作线程，防止阻塞取指；
• 语义优先：不追求周期级精确，而追求语义精确，这是运行该时代软件的正确平衡点。

十一、结语

这类纯JavaScript整机模拟实践证明：前端并不仅限于页面与交互，凭借清晰的分层架构与严谨的语义建模，浏览器同样能承载系统级软件。对开发者，它是理解x86体系结构、总线协议与中断机制的绝佳入口；对教育者，它把抽象硬件变成了可插拔的教具；对怀旧玩家，它让一台486在标签页里重新点亮。更重要的是，它示范了一种通用的工程方法论：把复杂系统拆解为可独立验证的模块，再用清晰的接口将它们装回一台“完整的机器”。