Javascript 页面完全加载后触发预取

我的设想是：

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

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

我的问题是：

甚至有可能（它会工作）触发将

或CSS文件添加到

中，以便在当前页面完全加载后可以从另一页面预取数据吗

我是否应该像使用JS呈现其他样式表一样在

中添加新标记作为样式表文件，这样它就可以呈现。。还是有别的办法

---

使用CSS和JS的预加载可能非常适合，并且在大多数现代浏览器中都有很好的支持：

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

您可以使用预取（precache）资产。我在一个开源项目上工作，该项目使用。尽管如此，要服务于预担保资产，您需要。在我的项目中查找资产的逻辑如下所示

这个项目的演示是。此外，我还写了一篇文章，解释了项目的技术细节

在加载lib之后，我将不再等待整个页面的加载。也许我应该使用等待，直到浏览器空闲

---

希望它能给你一些启发。

请注意，你可以在页面加载完成后添加传统样式表，也可以在任何时候添加类似的样式表：

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时，会缓存另一个page2.css的

样式，因此在调用page2时，如果page2调用相同的文件，则会缓存另一个page2.css的
样式。
要预取资产，有一些预取方法，如DNS预取、预连接、预呈现和预取。根据要求，您可以适当地使用它们。每种方法都有自己的用途，了解每种方法都会很有用。
您可以使用和使用浏览器空闲时间下载或预取用户可能在不久的将来访问的文档

预取提示

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



此外，您还可以阅读以下内容：
在那里，您可以阅读关于执行、加载和预加载时间的不同状态和优先级，以及一些改进它们的提示

不幸的是，你不得不为此打开一个悬赏，但这是为后台任务而做的，当然，在一个完全加载的文档中添加新的样式表或标记。这很简单。当然，您必须执行其他逻辑和DOM操作来刷新等等，但这只是找到特定于您的项目的解决方案的问题。有很多关于这个主题的教程/例子。@soulshined我真的不在乎赏金。我必须明白这一点。是的，我以前也读过类似的文档，但这并不是我想要的。我不需要预加载，我需要预取，这样它可能会停留在用户浏览器上，当我们加载下一个页面时（正如之前加载的资源一样），它加载页面的速度会更快，并且不会造成任何小的延迟。无论如何，谢谢你的回复。我会继续研究的。我没听懂你想说什么！加载页面后，是否尝试加载外部样式表、js和图像？@AAShakil User打开domain.com。由于他没有打开其他页面并加载资源，他在访问下一页时将不得不加载大量资源-因此，在加载当前页面后，我必须以某种方式在当前页面中预取资源-因此，我必须在页面加载后触发它。我现在得到@RicardsMucelans。有关于这方面的教程，还有一些非常好的。但值得注意的是，如果我是一个手机用户，浪费了大量数据来预装一个我甚至不需要或访问的网页，当我的账单来时，我会很难过，尤其是如果账单像你说的那么大的话。但这不是这里也不是那里。检查一下这些链接，然后在后台加载它们，对吗（谈论Ajax解决方案）？说到
预加载
——再说一遍，这不是我需要的——在这种情况下，我需要
预取
，因为这一切的主要目的是减少下一页加载时间和整个页面的加载时间。也许我不明白你的意思。如果页面A向您知道位于页面B上的资源发出AJAX请求（这些资源恰好是可缓存的资源）。如果/当用户最终尝试在A页之后加载B页，那么这些资源很可能会在用户代理缓存中，这意味着B页的加载速度将快于在A页上以某种方式“预加载”这些资源时的加载速度。我想我误解了你的意思。是的，这正是我想要完成的<在这种情况下，代码>预取
选项将更容易使用。我想
<link rel="prefetch alternate stylesheet" title="Designed for Mozilla" href="mozspecific.css">
<link rel="next" href="2.html">