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

我正在开发一个资源密集型的web应用程序。用户在第一个页面上工作，并在进入第二个阶段之前提交一些数据

问题是第二阶段的网页加载时间太长，这破坏了整个过程的流程，特别是因为web应用程序针对的是互联网连接速度最快的国家

---

有没有什么方法可以让我在用户访问第一个网页时在后台抢先加载第二阶段的网页（或该网页使用的资源）？

这可以通过

使用这些文件时，浏览器会将用户可能在当前页面之后访问的指定文档（页面、图像等）下载到缓存中

预取

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

语法：

示例：

<!-- 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

属性，该属性告诉浏览器将下载什么。可能的

值包括：


脚本
style
图像
媒体
文档

我们可以使用“预加载”和“媒体”属性提前加载图像，以限制将图像下载到具有特定分辨率的设备：


标记还有大量其他属性，这些属性也可能有用：

资料来源：





您可以在此处检查这些功能的浏览器兼容性：

预取
：

预加载
：