写完了三年 AI 编程工具，今天才发现它最关键的能力根本不在模型里——在浏览器自己管得了的那两件事里

写完了三年 AI 编程工具，今天才发现它最关键的能力根本不在模型里——在浏览器自己管得了的那两件事里

你给页面加 AI 能力，第一反应是什么？租服务器、接 API、配 key、调代理。隐私、成本、网络延迟，一堆隐性账要算。

但 2026 年的浏览器已经把两件事悄悄做完了：AI 推理和 UI 定位。两者完全不搭界的领域，今天被同一个小环境接住了——浏览器。

WebLLM：浏览器自己会跑模型了

WebLLM 是 MLC（Machine Learning Compilation）团队的作品，它的本质是把大模型直接编译成 WebGPU 可以跑的 shader 代码，用户打开网页，模型就在本地 GPU 上跑，无需服务器。

实际数字：Llama-3.1-8B 在 M2 Max 上跑到 41 tokens/秒，是原生 MLC 速度的 80%。Phi-3.5-mini 更激进，71 tokens/秒，达到原生 79.6%。这不是 Demo，这是 2026 年中已经稳定跑在生产环境里的水平。

支撑这个速度的底层是 WebGPU。2026 年初，WebGPU 覆盖了约 70% 的全球浏览器流量（Chrome 113+/Firefox 147+/Safari 18+/Edge 113+），比 2025 年初的 38% 翻了近一倍。更重要的是，同期一篇独立研究论文（Ahmet Barış Günaydın）实测：WebGPU 在同一块 M2 Pro GPU 上跑融合计算 shader，性能比 PyTorch MPS 高 159 倍，比 PyTorch CUDA 高 720 倍。

为什么？因为传统 ML 框架向 GPU 发送数万条独立指令，而 WebGPU 的融合 shader 把整个计算过程打包成一次 dispatch。GPU dispatch 本身的 overhead 是 36–71 微秒，积少成多之后，这笔账就大了。

Transformers.js v4 补了另一块短板。它不只跑 LLM，还支持 Whisper 语音识别、CLIP 图像分类、BERT 系列 NLP 任务。v4 用了全新的 C++ WebGPU 运行时，和 ONNX Runtime 团队合作重写，20B 参数模型在浏览器里跑到 60 tokens/秒。QCon London 2026 的现场演示里，有人用本地 Whisper 做了接近人类质量的实时转录，还能拿到每个词的概率分数去检测幻觉——全程没发任何数据到服务器。

CSS Anchor Positioning：弹层会自己找位置了

另一边，CSS 层面也在发生类似的事。CSS Anchor Positioning 在 2026 年通过 Interop 2026 正式达到 Baseline Widely Available，覆盖 Chrome 125 / Firefox 132 / Safari 18.2，全球约 91% 的浏览器流量。这是五家浏览器引擎（Apple/Google/Igalia/Microsoft/Mozilla）第一次在同一周期内把同一个 CSS 新特性做穿。

它的核心能力是：弹层元素自己会找位置，不再需要 JavaScript 算坐标。

.trigger {
  anchor-name: --menu-btn;
}
.menu {
  position: absolute;
  position-anchor: --menu-btn;
  position-area: bottom span-right;
  position-try-fallbacks: flip-block;
}

三行 CSS，弹层贴在按钮下方，屏幕边缘会自动翻转方向，滚动/放大/暗色模式切换都不掉线——这些事情以前靠 Floating UI / Popper.js 要写几十行 JS 维护，现在浏览器每帧原生处理，合成器线程执行，INP 收益 40–80ms。

把它们放在一起：隐私 + 零 API 成本

WebLLM 让 AI 推理跑在本地，数据不离开浏览器。Anchor Positioning 让 UI 定位不依赖服务器，端到端零网络往返。这两件事加在一起，意味着一个场景可以完整跑在浏览器里：

隐私敏感的数据分析——用户自己的文档，本地 LLM 读，Anchor Positioning 渲染查询结果。QCon 2026 有人演示了 DuckDB（WebAssembly 在浏览器里跑 SQL）和本地 LLM 的组合，数据不外流，查询靠自然语言。

离线 AI 辅助工具——模型第一次下载后缓存到 IndexedDB，后续加载跳过网络，直接从磁盘读到 GPU。Transformers.js 会在首次加载后记住模型分片 URL，第二次访问热启动。

实时 AI 交互界面——流式输出 + 弹层提示 + 打字效果，全套在主线程之外跑 Web Worker，不卡 UI。WebLLM 的 Streaming API 直接对应这套模式。

落到下一步

如果你想试试这个组合，最快的路径是 WebLLM + 任何开源 LLM（推荐从 Phi-3.5-mini 或 Llama-3.2-1B 开始，体积在 2–4GB，交互速度在 M2 MacBook 上可接受）。UI 部分用 Anchor Positioning 做弹层，不需要任何 npm 包。

对于隐私要求高的内部工具，这个栈把「数据不出内网」从架构承诺变成了物理事实——数据根本不存在于网络上。