页面完全加载后触发prefetch预取的可行性与实现方案问询

问题1：能否在页面完全加载后，向<head>中添加<link rel="prefetch">标签预取其他页面资源？ #

绝对可以，这其实是优化预取时机、避免影响当前页面交互的绝佳方案！

你提到当前页面JS占用资源多，加载期间预取会导致交互延迟——而等页面完全加载后（比如所有DOM、样式、脚本、图片都加载完成），浏览器的主线程和网络带宽都处于空闲状态，这时候添加prefetch标签，浏览器会在后台悄悄下载指定资源，不会抢占当前页面的交互资源，完美解决你担心的延迟问题。

而且<link rel="prefetch">的设计初衷就是让浏览器在空闲时预取未来可能用到的资源，后续用户访问/products页面时，这些预取的资源会直接从缓存读取，大幅提升加载速度。

问题2：是否需要用JS添加标签到<head>，还是有其他可行方法？ #

通过JS动态添加<link rel="prefetch">标签是最直接、可控且兼容性好的方法，也是业内常用的方案。下面给你一个适配你场景的代码示例：

// 等待页面完全加载完成（包括所有资源）
window.addEventListener('load', () => {
  // 要预取的资源列表，比如products页面的部分图片和CSS
  const resourcesToPrefetch = [
    '/path/to/product-image-1.png',
    '/path/to/product-image-2.png',
    '/path/to/products-styles.css'
  ];

  resourcesToPrefetch.forEach(resource => {
    const link = document.createElement('link');
    link.rel = 'prefetch';
    link.href = resource;
    // 对于图片可以指定as属性，帮助浏览器优化加载策略
    if (resource.endsWith('.png') || resource.endsWith('.jpg')) {
      link.as = 'image';
    }
    document.head.appendChild(link);
  });
});

至于其他方法，还有两种可选，但复杂度更高：

• Service Worker：可以在Service Worker中监听页面加载完成的事件，然后发起预取请求。这种方法适合更复杂的预取策略（比如根据用户行为动态调整预取内容），但需要额外配置Service Worker，学习成本更高。
• 使用<link rel="prefetch">配合onload触发：不过这种方式本质还是依赖JS控制时机，和动态添加标签的思路类似，没有太大优势。

总的来说，JS动态添加prefetch标签是最适合你场景的方案，简单易实现，还能精准控制预取时机。

内容的提问来源于stack exchange，提问作者richardevcom