本文介绍如何通过 提前加载远程 JSON 资源，并在后续 JavaScript 中直接调用 fetch() 从浏览器缓存中快速读取，避免重复网络请求，提升应用响应性能。
本文介绍如何通过 `` 提前加载远程 json 资源，并在后续 javascript 中直接调用 `fetch()` 从浏览器缓存中快速读取，避免重复网络请求，提升应用响应性能。
在现代 Web 开发中，对关键数据进行预获取（prefetching）是优化首屏后交互体验的有效手段。当你的应用需要在用户触发某操作（如打开模态框、切换标签页）时立即使用某个 JSON 配置或列表数据，提前让浏览器静默加载该资源，可显著减少感知延迟。
✅ 正确的预获取方式
HTML 中应使用 <link rel="prefetch"> 并指定 as="fetch"，确保浏览器按 fetch 请求的语义（含 CORS、缓存策略等）进行预加载：
<head> <link rel="prefetch" href="/api/config.json" as="fetch" crossorigin="anonymous"> </head>
⚠️ 注意事项：
-
href必须是同源或配置了合法 CORS 头的 URL（若跨域，需添加crossorigin属性）； -
as="fetch"是关键——它告诉浏览器该资源将用于fetch()调用，从而启用匹配的缓存策略（如Vary: Origin兼容性）； -
rel="preload"❌ 不适用：它强制高优先级加载但不支持缓存复用至fetch()（尤其在 Chrome 中常被忽略）； -
rel="prefetch"是低优先级、空闲时加载，适合非首屏必需但后续必用的数据。
✅ 在 JS 中安全使用预获取的 JSON
预获取完成后，你只需像平常一样调用 fetch()，浏览器会自动命中 HTTP 缓存（状态码 200 (from disk cache) 或 (from memory cache)），无需额外适配：
// 无论是否已 prefetch，此代码行为一致；但若已 prefetch，则毫秒级返回
async function loadConfig() {
try {
const response = await fetch('/api/config.json');
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const data = await response.json();
console.log('Loaded from cache:', data);
return data;
} catch (err) {
console.error('Failed to load config:', err);
throw err;
}
}✅ 优势验证：打开浏览器 DevTools → Network 标签页，执行 loadConfig() 后观察请求状态——若显示 from cache 且 Timing 中 ServiceWorker, DNS, Connect, SSL, Request 时间均为 - 或 0ms，即表示成功复用预获取结果。
? 进阶建议：增强可靠性与可观测性
-
降级兼容：
prefetch是提示性指令，浏览器可能因带宽、内存或用户设置（如“节省流量”模式）跳过。因此fetch()仍需保留完整错误处理逻辑。 -
预加载 + 预解析：若 JSON 体积大（>100KB），可配合
rel="preload"+as="script"+type="application/json"（需服务端支持）实现更激进加载，但需自行解析字符串，不推荐常规场景。 -
监控预获取状态：目前无标准 API 检测 prefetch 是否完成，可通过
performance.getEntriesByType('resource')稍后检查对应 URL 是否存在且transferSize > 0，作为调试辅助。
总之，<link rel="prefetch" as="fetch"> + 常规 fetch() 是当前兼容性最佳、语义最清晰、开发者负担最小的 JSON 预获取方案。合理运用，可让数据加载从“等待”变为“即时可用”。
