如何抢先加载网页或资源？

Question

我正在开发一个非常耗费资源的网络应用。用户在第一页上工作并在进入第二阶段之前提交一些数据。

问题是第二阶段的网页加载时间太长，这打破了整个过程的流程，特别是因为网络应用程序的目标是那些没有最快互联网连接的国家。

在用户访问第一个网页的那一刻，我是否有办法在后台抢先加载第二阶段的网页（或该网页使用的资源）？

Answer 1

这可以在prefetch attribute for <link> 。

的帮助下实现

当使用这些文件时，浏览器会下载用户可能会在当前页面抢先进入缓存后访问的指定文档（页面，图像等）。

prefetch属性

该指令告诉浏览器获取下一次导航可能需要的资源。这意味着可能会以极低的优先级获取资源，因为当前页面中所需的所有内容优先于下一页上的资源。这使得预取更适合加速下一页而不是当前页面。

语法： <link rel="prefetch" href="(url)">

示例：

<!-- full page -->
<link rel="prefetch" href="https://example.com/example-page/" />

<!-- just an image -->
<link rel="prefetch" href="https://example.com/example-image.png" />

此外，如果您正在动态加载内容，则可以使用此方法预先加载资源：

preload属性

与prefetch属性不同，新的preload rel值定位当前导航。它还支持额外的as属性，该属性告诉浏览器它将下载什么。可能的as值包括：

• script
• style
• image
• media
• document

我们可以使用preload提前加载图像以及media属性，以限制将图像下载到特定分辨率的设备：

<link rel="preload" as="image" href="map.png" media="(max-width: 600px)">

<link>标记还有很多其他属性，这些属性也可能有用：https://www.w3schools.com/tags/att_link_rel.asp。

来源：

• https://davidwalsh.name/html5-prefetch
• https://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001/So-You-Want-To-Pre-Load-Huh.htm

您可以在此处查看这些功能的浏览器兼容性：
prefetch：https://caniuse.com/#feat=link-rel-prefetch
preload：https://caniuse.com/#feat=link-rel-preload