HTML资源预取实现方法：link prefetch空闲预取策略参考

资源预取技术link rel="prefetch"是一种后台加载机制，仅在浏览器空闲时异步获取后续页面可能需要的资源，其执行受多重条件限制，需要开发者精准掌握触发规则。

该机制与常规预加载存在本质区别，仅当页面完成加载且系统资源空闲时才会触发，开发者需特别注意其非强制执行的特性。

为什么写了 link rel="prefetch" 却看不到 Network 请求

未出现预期请求通常源于以下条件未满足：

1. Chrome开发者工具需手动开启prefetch请求显示，或清除现有过滤器
2. 资源已被强缓存标记，浏览器直接读取本地副本
3. 页面尚未完成加载流程，或用户已离开当前页面
4. 目标URL存在跨域限制，请求被静默拦截
5. as属性配置错误，导致资源类型识别失败

link rel="prefetch 必须满足的三个硬性条件

有效使用必须同时符合：

1. 必须在初始DOM解析阶段就存在于head标签内
2. 目标资源必须满足同源策略要求
3. 浏览器必须处于低负载空闲状态

标准写法示例：<link rel="prefetch" href="/js/detail.chunk.js" as="script">，其中as属性必须准确匹配资源类型。

和 preload 混用会重复请求

二者混合使用时需注意：

1. preload会立即以高优先级加载当前页资源
2. prefetch会延迟以低优先级加载后续页资源
3. 浏览器将分别发起独立请求，不会自动合并

构建工具自动生成的prefetch可能造成重复加载，可通过开发者工具Network面板验证请求优先级。

真正想"预取数据"，prefetch 不适用

该机制仅完成资源下载，不提供数据访问接口：

1. API数据预取应使用Cache API手动缓存
2. 关键数据建议在路由切换前主动请求
3. 代码分割模块推荐直接使用动态import语法

需要注意的是，prefetch的执行时机完全由浏览器控制，在网络条件差或用户快速操作等场景下可能被跳过，因此仅适合作为性能优化辅助手段。