标签: link-prefetch

I've been trying to use something like this to get a performance boost when clicking from a simple landing page to a heavyweight single page app:

<link rel="prefetch" href="https://example.com" as="document" />
<link rel="prefetch" href="https://example.com/app.js" as="script" />
<link rel="prefetch" href="https://example.com/app.css" as="style" />

It seems to have no noticeable performance boost when my landing page is on a subdomain. Say, https://subdomain.example.com.

When I click on a link to visit https://example.com, I still see a long delay in the Chrome network …

假设有以下代码片段：

document.addEventListener("DOMContentLoaded", () => {
  const src = "https://via.placeholder.com/200x100?text=loaded";
  
  const link = document.createElement("link");
  link.rel = "prefetch";
  link.as = "image";
  link.href = src;
  document.head.append(link);
  
  document.getElementById("btn").addEventListener("click", () => {
    document.getElementById("img").src = src;
  });
});

<button id="btn">Press me to show prefetched image (but go offline first!)</button>
<br><img id="img" src="" alt="press button to load prefetched image">

Firefox 71，离线使用Web开发工具，然后按下按钮，图像完美加载。我期望如此，因为开发人员工具中的“网络”选项卡显示了预取的图像。

Chrome 79，使用网络开发工具离线，然后按下按钮，图像无法加载。我也这么怀疑，因为“网络”选项卡显示了奇怪的预取条目。

大多数资源（尤其是caniuse.com）都注意到图像的跨浏览器支持prefetch，没有已知问题。所以我必须在某个地方放弃我的推理。

Chrome 中的请求如下所示：

预取请求扩展：

我究竟做错了什么？