HTML中如何使用prefetch预获取未来可能需要的资源-html教程-PHP中文网

prefetch仅将资源存入http缓存，不执行、不解析、不提供js接口；它只在onload完成、浏览器空闲且页面未卸载时触发，受省流模式、safari兼容性、网络/内存限制影响，需同源、静态写在head、指定as属性才有效。

html中如何使用prefetch预获取未来可能需要的资源

prefetch 不是“取数据”，它只把资源存进 HTTP 缓存，不执行、不解析、不提供 JS 接口——写错位置、漏 as、跨域没配 crossorigin，基本等于白写。

prefetch 什么时候真正发起请求

它只在当前页 onload 完成、浏览器空闲（无高优先级请求、CPU/网络负载低）、页面尚未卸载时才可能触发。用户开“省流模式”、用 Safari、网络是 2G、内存紧张，浏览器会直接跳过——不是 bug，是设计如此。

Chrome DevTools 的 Network 面板默认不显示 prefetch 请求，得手动勾选 prefetch 过滤器或清空所有过滤器才能看到
如果资源已强缓存（Cache-Control: immutable 或 max-age 极大），浏览器可能连请求都不发，直接从磁盘读
动态插入的 <link rel="prefetch">（比如 JS 里 document.head.appendChild()）多数情况下无效，必须在首屏 HTML 的里静态存在

怎么写才不会被浏览器忽略

三个硬性条件缺一不可：同源、中声明、带准确 as 属性。漏掉任意一个，Chrome 可能降级为 as="fetch"，Safari 可能直接静默丢弃。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

href 必须是绝对路径或根相对路径（如 /pages/checkout.html），避免 ./next.html 在嵌套路由下解析错误
必须指定 as：HTML 文档用 as="document"，JS 用 as="script"，CSS 用 as="style"，字体必须加 crossorigin
跨域资源要加 crossorigin，否则静默失败；但注意：多数浏览器对跨域 prefetch 支持有限，建议优先同源
别对 /api/xxx 这类接口用 prefetch——它只适用于可缓存的文档、脚本、样式等，HTTP 响应必须带合法 Content-Type 和缓存头

为什么写了却没提升后续页面加载速度

常见原因是资源进了缓存，但后续导航时没匹配上缓存键。比如版本号没更新、缓存策略冲突、MIME 类型不一致（服务端返回 text/plain 却当 as="script" 用），都会导致复用失败。

验证是否真复用：打开目标页面的 Network 面板，看关键资源（如 chunk-xxx.js）的 Size 列是否显示 from disk cache 或 from memory cache
不要指望 prefetch 加速首屏——它不解决当前页任何性能问题，只影响“下一次点击跳转”的体验
SPA 中路由懒加载的 JS 文件，适合 prefetch；但如果是用户 90% 不会点的二级菜单页，预取就是纯带宽浪费

最容易被忽略的一点：prefetch 不是“提前执行”，它只是提前下载。你不能靠它触发初始化逻辑、不能监听完成事件、也不能拿到响应体。想预取 JSON 数据？得换 fetch + Cache API 或路由守卫里手动请求。