Question

我的情景是：

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

目前在某些页面 JS ＆＃34;吃掉＆＃34;在页面加载期间，在某些情况下触发预取的相当多的资源并不是最好的答案 - 因为当用户与 JS 创建的事件和元素进行交互时，它会导致一个小的延迟。

我的问题是：

甚至可以（可行）触发<link rel="prefetch" href="image.png">或CSS文件添加到<head>，以便> 预取来自其他网页的数据当前页面已满载？

我应该这样做，比如使用JS渲染其他样式表，我在<head>中添加新标签作为样式表文件，以便它可以渲染..还是有另一种方式？

Answer 1

您可以使用Cache Storage预取（预缓存）资产。我正在开发一个使用this approach的开源项目。但是，要提供预先缓存的资产，您需要service worker。在我的项目中查找资产的逻辑看起来像this。

该项目的演示是here。另外，我写了an article来解释项目的技术细节。

加载lib后资产get prefetched，所以我不等待整个页面加载。也许我应该使用requestIdleCallback等待浏览器空闲。

希望它会给你一些启发。

Answer 2

请注意，您可以在页面加载完整后添加aditional样式表，或者在您想要的时候添加这样的样式表：

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 3

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

预取提示

浏览器会观察所有这些提示并将每个唯一的队列排队请求在浏览器空闲时预取。可以有每页多个提示，因为预取多个可能有意义文档。例如，下一个文档可能包含几个大文件图像。

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

另外，你可以阅读这个帖子： Preload, Prefetch And Priorities in Chrome 在那里，您可以阅读有关执行，加载和预加载时间的不同状态和优先级，以及一些改进它们的提示。

Answer 4

使用https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content的CSS和JS的{p> preload可能非常合适，并且在大多数现代浏览器中都有很好的支持：https://caniuse.com/#search=preload

可能有更好的解决方案，例如@soulshined建议的解决方案，但另一种粗略的方法是执行此操作的另一个页面包含etags或缓存控制标头将使用AJAX将请求发送到您希望加载的资源。这将导致浏览器请求这些资源并预填充用户代理缓存，以便当用户请求另一页上的资源有更高的更改时，缓存将包含资源，并且它的加载速度比它具有的速度快第一次拿到一切。

Answer 5

要预取资源，可以使用一些预取方法，例如DNS预取，预连接，预渲染和预取。预取。根据要求，您可以适当地使用它们。每种方法都有自己的目的this对于了解每一种方法都很有用。

页面完全加载后触发预取

5 个答案: