如何预加载整个网页

Question

如何使用JavaScript预加载整个网页，以便我可以将该页面缓存在用户的浏览器中？

我知道如何使用JS预加载图像，但我想要的是预加载整个页面。

用例：在我的网站上，我有一个包含大量其他内容（图像、CSS、JS）的Google地图页面，从非缓存浏览器加载需要很长时间（约10秒）。

这是我的主页的子页面，用户通常会访问此页面。因此，我想尽可能预加载所有已加载的内容（图像、JS），以便它们被缓存在用户的浏览器中，以便当他们来到该页面时，它能够更快地加载。从缓存浏览器加载页面可将时间从约10秒减少到2秒左右。

感谢您提前的帮助。

- MrDoAlot

---

这个浏览器功能（并非所有浏览器都支持）https://developer.mozilla.org/en/Link_prefetching_FAQ 是相关的。就个人而言，我认为它的优点在于不需要任何JS来实现，但它并不完全符合问题。 - Christian

Answer 1

在主页面上创建一个不可见或非常小的<iframe src="second_page.html">。

- pts

---

粗糙而且不规范，但是有效的；+1 - Karl

所以你也把第二个页面的加载成本放到了第一个页面上？我认为这不是一个明智的解决方案。因为着陆页的加载成本大幅增加，轻松访问第一个页面的用户将会被弹回。 - viam0Zah

@TörökGábor 你可以在onload事件中使用JavaScript设置iframe的src属性。这样第二个页面就不会干扰第一个页面了。 - user1115652

Answer 2

隐藏的<iframe/>可以通过两种可用的JavaScript API避免： fetch或new XMLHttpRequest()。

目前最现代的API是Fetch，可以像这样使用：

<script>
  const url = './second_page.html';
  fetch(url, {credentials: `include`});
</script>

另一种选择是使用XMLHttpRequest：

<script>
  const url = './second_page.html';
  req = new XMLHttpRequest();
  req.open(`GET`, url);
  req.send();
</script>

任何一个API都会将提供的HTML文件作为字符串返回。更进一步地，返回的HTML文档也可以被遍历以预缓存图片、视频、脚本、样式表等。

---

关于如何优化预缓存HTML文件的想法，可以考虑查看JavaScript库instantclick和quicklink的源代码：

• https://github.com/dieulot/instantclick
• https://github.com/GoogleChromeLabs/quicklink/

- Harley Lang