页面完全加载后触发预取

Question

我的场景是：

用户访问domain.com（首页）
domain.com/products 页面包含大型图像库和相当大的 CSS 和 JS 库
当用户访问domain.com并且主页已完全加载时，我们开始预取资源，如果可能的话，至少有 % 来自存档的图像。

目前在某些页面上 JS "eats" 相当多的资源因此在某些情况下在页面加载期间触发预取不是最好的答案 - 因为它会导致用户与 JS 创建的事件和元素交互时出现小延迟。

我的问题是：

是否有可能（会起作用）触发 <link rel="prefetch" href="image.png"> 或 CSS 文件添加到 <head> 以便它可以 prefetch 来自另一个页面的数据在当前页面完全加载后?
我是否应该像使用 JS 渲染额外的样式表那样做，我在 <head> 中添加新标签作为样式表文件，以便它可以渲染......或者有其他方法吗？

Answer 1

preload of CSS 和 JS 使用 https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content might be a good fit and has good support in most modern browsers: https://caniuse.com/#search=preload

可能有更好的解决方案，例如@soulshined 建议的解决方案，但另一种粗略的方法是另一个页面包含 etags 或缓存控制 headers 将使用 AJAX向您希望加载的资源发送请求。这将导致浏览器请求这些资源并预填充用户代理缓存，以便当用户在另一个页面上请求该资源时，会有更高的更改，缓存将包含资源并且加载速度比必须获取的加载速度更快一切都是第一次。

Answer 2

您可能会使用 Cache Storage to prefetch (precache) assets. I work on an open-source project which uses this approach. Although, to serve precached assets you need a service worker. The logic of finding assets in my project looks like this。

这个项目的演示是here. Also, I wrote an article，它解释了项目的技术细节。

资产 get prefetched once the lib is loaded, so I don't wait for the entire page load. Maybe I should use requestIdleCallback 等待浏览器空闲。

希望对您有所启发。

Answer 3

请注意，您可以在页面完全加载后添加附加样式表，或者在您需要时添加类似这样的样式表：

document.addEventListener("DOMContentLoaded", function(event) { 
      var script = document.createElement("link");
      script.rel = "stylesheet";
      script.href= "stylesOfAnotherPage2.css";

      document.getElementsByTagName("body")[0].appendChild(script);//or head
});

当您加载 page1 时，stylesOfAnotherPage2.css 被缓存，因此当 page2 被调用时，如果 page2 调用相同的文件，stylesOfAnotherPage2.css 已经被缓存。

Answer 4

要预取资产，有一些预取方法，例如 DNS 预取、预连接、预渲染和预取。根据需要，您可以适当地使用它们。每种方法都有其自己的用途 this 将有助于具体了解每一种方法。

Answer 5

您可以使用 HTTP Caching and Link prefetching 来利用您的浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。

预取提示

The browser observes all of these hints and queues up each unique request to be prefetched when the browser is idle. There can be multiple hints per page, as it might make sense to prefetch multiple documents. For example, the next document might contain several large images.

<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css">
<link rel="next" href="2.html">

此外，您可以阅读此主题： Preload, Prefetch And Priorities in Chrome 在那里您可以阅读有关执行、加载和预加载时间的不同状态和优先级，以及一些改进它们的技巧。

页面完全加载后触发预取

Trigger prefetching after page is fully loaded

html

javascript

css

prefetch