Chrome实验性跨域存储API让Transformers.js模型缓存实现零重复下载

背景与挑战

在浏览器中使用 Transformers.js 进行推理时，模型权重和底层的 ONNX Runtime Wasm 运行时会被下载并缓存。由于浏览器的缓存按 origin 隔离，即使不同站点请求相同的资源，也会产生 177 MB 的重复下载和存储。随着模型体积不断增长，这一问题对用户体验和网络成本造成了显著压力。

跨域存储 API（Cross‑Origin Storage）概述

跨域存储 是一项早期提案，提供 navigator.crossOriginStorage 接口。
资源通过 SHA‑256 哈希 进行唯一标识，跨站点可通过相同哈希直接读取已缓存文件。
开发者可通过 origins 参数控制可访问范围：'*'（全局可见）或指定白名单。
写入时浏览器会验证哈希，确保文件完整性；读取时若不存在则返回错误，保持隐私安全。

在 Transformers.js 中的实践

import { env, pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]";
// 启用实验性跨域存储后端
env.experimental_useCrossOriginStorage = true;
const asr = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny.en', { device: 'webgpu' });

启用后，库会为每个模型文件计算哈希，并尝试通过 navigator.crossOriginStorage.requestFileHandle(hash) 获取本地副本。
若命中缓存，直接返回 Blob，省去网络往返；否则降级为普通下载并将文件写入跨域存储，以供后续站点复用。

关键技术细节

资源键值：hash = { algorithm: 'SHA-256', value: '8f43…' }
写入流程：createWritable() → write(blob) → close()
访问控制：origins: '*' 适用于公开模型（如 Whisper、DistilBERT）；企业内部模型可限定特定子域。
隐私防护：对仅出现少数站点的文件，浏览器可能隐藏其存在，防止通过哈希探测用户浏览历史。

业务价值

维度	传统缓存	跨域存储后
重复下载	177 MB（Whisper）+ 4.7 MB（Wasm）	仅首次下载一次
加载时延	数秒至十几秒	毫秒级读取
存储占用	多站点累计	单一副本占用
完整性保障	需自行校验	浏览器自动校验
隐私风险	跨站点缓存泄露可能	可通过 `origins` 限制全局可见

生态与后续

Transformers.js 已在 v4 中加入实验性后端，默认关闭。
类似项目 WebLLM、wllama 也在探索 COS 接口。
Chrome 团队计划在正式实现前进行更多安全评估，社区可通过 GitHub 仓库提交 Issue 与 PR。

结语

跨域存储 API 为前端 AI 推理提供了全新的缓存范式。通过哈希统一标识、可控的跨站点共享以及浏览器层面的完整性校验，开发者能够显著降低网络开销、提升用户体验，同时兼顾隐私安全。若想立刻体验，可安装官方 Cross‑Origin Storage 扩展并按文中示例开启实验标志，感受“一次下载、全站共享”的实际效果。