前端 × AI 实验室：挑个问题，动手拆开

模型在吐字，界面却开始卡；缓存命中了，内存却越涨越高；计算搬进 Worker 以后，旧结果又抢在新结果后面回来。熟悉的前端问题一碰上 AI，就有了一批值得拆开的新现场。

这里按四类工作组织实验：查找与缓存、模型缓存、浏览器计算、界面响应。 每条线都从一个具体问题开始，改一个因素，拿到一组能解释的对照。

四张实验桌，坐哪张都能开工

你想拆开什么	先试哪一手	想观察什么	入口
查找与缓存	把目标从第一项换到最后一项	查找工作量、索引准备与额外空间	前端缓存、数组与 Map 实验
模型缓存	修改中间输入，再把上下文长度翻倍	复用从哪里失效，KV 容量怎样变化	KV 专题、KV 内存计算器
浏览器计算	调一次 Wasm，再把固定计算安排到 Worker	调用边界、数据搬运、取消与过期结果	Wasm、Wasm 实验、已有 Worker
界面响应	用相同文本和负载切换更新方式	解析次数、发布次数、输入与滚动	渲染与流式输出、十五个场景

想从一个小模块起步，就选 Wasm

打开 Wasm 实验，先看一次整数加法从 JavaScript 进入模块、再返回页面。想继续就读现有 Worker 代码，把一项固定计算的数据、状态和取消走通，再考虑加载模型。

这条选择服务于当前的学习顺序：它直接连接 JavaScript、内存、异步任务和 AI 执行位置。第一轮能够形成清楚的输入输出，不依赖复杂的模型生成表现。

接下来值得组合的是流式文本渲染。模型越快，前端越需要知道哪些工作应批量执行、哪些结果能缓存，以及用户输入何时被处理。与 KV Cache 放在一起读，可以同时理解服务端省算和客户端省算。

给每局留一张对照单

一个实验先只改一个因素：

• 查找实验改数据量或目标位置，分别记录索引准备和查找工作。
• 缓存实验改内容、版本或容量，观察命中、失效与淘汰。
• Worker 实验改批次大小，观察吞吐、响应和取消机会。
• 浏览器 AI 实验区分首次初始化与同一实例的重复执行。

结果至少包含正确输出、实际做过的工作和资源生命周期。性能数字再附上设备、输入、构建方式与测量位置，才能用于比较。

最短可以记成三行：我改了什么 / 输出是否一致 / 哪些工作减少了，哪些成本增加了。预测错了也保留，下一次正好从这里接着拆。

想把实验接回真正的功能

对声音好奇，就用语音工具检测人声区间，再把转写放进可编辑草稿。想理解本地资料如何按意思查找，去浏览器 AI比较关键字与语义查询。想把启动、取消和恢复串起来，去 Agent 工程实验追一次完整运行。

现有资料怎样放回学习地图

资料	在这张地图里的用途
十五个 Harness 场景	看更新范围、解析、桥接与后台任务的具体路径
模型与语音基础	看一项能力如何接进已有运行时
简单与组合研究	理解能力之间的接口、状态和时间关系
Zed Rust 与 PI 研究	阅读更完整应用的状态归属与跨进程协作

这些研究保留各自的观察日期与范围。新的学习路线可以借用其中的具体代码与问题，再独立验证自己的实验。