本文介绍如何通过 HTML 的 提前加载远程 JSON 资源，并在后续 JavaScript 中通过 fetch() 从浏览器缓存中快速读取，避免重复网络请求，提升应用响应速度。
本文介绍如何通过 html 的 `` 提前加载远程 json 资源，并在后续 javascript 中通过 `fetch()` 从浏览器缓存中快速读取，避免重复网络请求，提升应用响应速度。
在现代 Web 开发中，合理利用浏览器缓存机制可显著优化数据加载体验。当某个 JSON 接口（如配置文件、静态字典或初始化数据）确定会在页面生命周期中被使用时，推荐采用 <link rel="prefetch"> 进行资源预获取——它会以低优先级在浏览器空闲时提前请求并缓存该资源，后续调用 fetch() 时若命中缓存，即可实现近乎零延迟的读取。
✅ 正确用法示例
在 HTML 中声明预获取：
<link rel="prefetch" href="/api/config.json" as="fetch">
⚠️ 注意：
as="fetch"至关重要，它明确告知浏览器该资源将用于fetch()请求，从而启用正确的缓存策略（如匹配 CORS 模式与内容类型），否则可能无法复用。
随后在 JavaScript 中按需发起标准 fetch 请求：
立即学习“Java免费学习笔记（深入）”；
// 此 fetch 将优先从 HTTP 缓存中读取（若已 prefetch 完成且未过期）
fetch('/api/config.json')
.then(response => {
if (!response.ok) throw new Error(`HTTP error! status = ${response.status}`);
return response.json();
})
.then(data => {
console.log('预获取的 JSON 已就绪:', data);
// 在此处初始化组件、填充表单或设置全局状态
})
.catch(err => {
console.warn('预获取失败，回退到实时请求:', err);
// 可选：降级处理逻辑（如重试、显示错误提示）
});? 关键注意事项
-
缓存时效性依赖 HTTP 头：预获取是否真正生效，取决于服务器返回的
Cache-Control、Expires等响应头。建议为 JSON 资源设置合理缓存策略（如Cache-Control: public, max-age=3600）。 -
不保证立即可用：
prefetch是提示型指令，浏览器可能因带宽、内存或用户交互状态而延迟或跳过。因此，fetch()仍需具备错误处理能力。 - 不适用于动态/敏感数据：仅适用于静态、公开、可缓存的 JSON（如 i18n 语言包、主题配置），切勿用于含用户凭证、时效性强或个性化内容的接口。
-
兼容性良好：Chrome、Edge、Firefox、Safari（16.4+）均支持
rel="prefetch"+as="fetch"；旧版 Safari 可回退至普通fetch，无副作用。
? 总结
<link rel="prefetch" as="fetch"> 是轻量、标准且高效的资源预加载方案。它无需额外库、不阻塞渲染，又能显著减少关键数据的首次获取延迟。配合健壮的 fetch 错误处理与合理的服务端缓存配置，即可构建更流畅、更可靠的前端数据加载流程。
