预加载功能

预加载**预加载**指的是在实际访问相关页面之前执行导航操作（例如 DNS 获取、获取资源或渲染文档）的做法，这些操作基于对用户最有可能访问的下一个页面的预测。

这些预测可以由开发者提供（例如，他们网站上最受欢迎的目的地列表），也可以由浏览器启发式算法确定（例如，基于用户历史记录中的热门网站）。当成功使用时，此类技术可以通过更快地提供页面或在某些情况下立即提供页面来显著提高性能。

此页面回顾了可用的预加载技术以及何时可以以及应该使用它们来提高性能。

预加载机制预加载有几种机制

**预取**涉及在需要之前获取渲染文档（或文档的一部分）所需的一些或全部资源，以便在需要渲染时，可以更快地完成渲染。

**预渲染**更进一步，实际上渲染了内容，以便在需要时显示。根据执行方式，这可能导致从旧页面到新页面的即时导航。

**预连接**通过抢先执行部分或全部连接握手（即 DNS + TCP + TLS）来加快未来从给定来源加载的速度。

**注意：**以上描述是高级和通用的。浏览器为实现预取和预渲染而执行的操作的确切内容取决于使用的功能。更精确的功能描述在下面的预加载功能部分提供。

预加载是如何实现的？预加载主要通过两种方式实现。

首先，一些浏览器会根据各种启发式算法自动预渲染页面，以提供自动性能改进。执行方式的确切内容取决于浏览器实现。例如，Chrome 在地址栏中键入匹配字符串时会自动预渲染页面——如果它非常确定您将访问该页面（请参阅查看 Chrome 的地址栏预测以了解更多详细信息）。此外，当在地址栏中键入搜索词时，它可能会自动预渲染搜索结果页面，前提是搜索引擎已指示这样做。它使用与Speculation Rules API相同的机制执行此操作。

其次，开发人员可以使用多种不同的平台功能来提供有关他们希望浏览器执行的预加载操作的说明。下一节将对此进行回顾。

预加载功能 向浏览器提供提示，表明用户可能需要来自指定资源来源的资源，因此浏览器可以通过抢先启动到该来源的连接来提高性能。支持的浏览器将抢先执行部分或全部连接握手（即 DNS + TCP + TLS）。

例如

html

在浏览器中得到广泛支持，并将为任何未来的跨源 HTTP 请求、导航或子资源带来好处。它对同源请求没有好处，因为连接已打开。

如果页面需要与许多第三方域建立连接，则预连接所有域可能适得其反。 提示最好仅用于最关键的连接。对于其他连接，只需使用 来节省第一步（DNS 查找）的时间。

您还可以将预连接作为 HTTP Link 标头实现，例如

httpLink: ; rel="preconnect"

向浏览器提供提示，表明用户可能需要来自指定资源来源的资源，因此浏览器可以通过抢先执行该来源的 DNS 解析来提高性能。它与相同，只是它只处理 DNS 部分。

同样，浏览器支持广泛，并且它对同源请求没有好处，因为连接已打开。

例如

html

**注意：**有关更多详细信息，请参阅使用 dns-prefetch。

向浏览器提供提示，说明当前页面上的哪些资源是高优先级的，因此当它在页面的中看到 元素时，它可以尽早开始下载这些资源。

例如

html

rel="preload"

href="https://www.example.com/fonts/cicle_fina-webfont.woff2"

as="font"

type="font/woff2"

crossorigin />

结果保存在每个文档的内存缓存中。如果您预加载当前页面未使用为子资源的内容，则通常会浪费资源，尽管如果标头允许，结果可能会填充 HTTP 缓存。

您还可以将预加载作为 HTTP Link 标头实现，例如

httpLink: ; rel="preload"

现代浏览器中对/的支持非常广泛。

向浏览器提供提示，说明当前页面上的哪些 JavaScript 模块是高优先级的，因此它可以尽早开始下载这些模块。

例如

js

它是JavaScript 模块的的专门版本，并且工作方式基本相同。但是，也有一些区别

浏览器知道该资源是 JavaScript 模块，因为不需要as属性，并且它可以使用正确的凭据模式来避免重复获取。

浏览器不仅下载它并将其存储在缓存中，还会下载它，然后将其直接解析并编译到内存模块映射中。

浏览器还可以自动对模块依赖项执行相同的操作。

向浏览器提供提示，表明用户可能需要目标资源用于未来的导航，因此浏览器可以通过抢先获取和缓存资源来提高用户体验。 用于同站点导航资源，或同站点页面使用的子资源。

例如

js

预取可用于获取可能进行的下一次导航的 HTML 和子资源。一个常见的用例是拥有一个简单的网站登录页面，该页面获取网站其余部分使用的更多“重量级”资源。

html

结果保存在磁盘上的 HTTP 缓存中。因此，它对于预取子资源很有用，即使当前页面未使用它们。您也可以使用它来预取用户可能访问的网站上的下一个文档。但是，因此您需要小心处理标头——例如，某些Cache-Control 标头可能会阻止预取（例如no-cache或no-store）。

许多浏览器现在实现了某种形式的缓存分区，这使得对于打算供不同顶级站点使用的资源毫无用处。这包括跨站点导航时的主文档。因此，例如，以下预取

html

将无法从https://aggregator.example/访问。

**注意：**在功能上等效于带有priority: "low"选项设置的fetch() 调用，只是前者通常具有更低的优先级，并且它将具有Sec-Purpose: prefetch标头设置在请求中。

**注意：**prefetch操作的获取请求会产生一个 HTTP 请求，其中包含 HTTP 标头Sec-Purpose: prefetch。服务器可能会使用此标头更改资源的缓存超时，或执行其他特殊处理。该请求还将包含值为empty的Sec-Fetch-Dest标头。请求中的Accept标头将与正常导航请求中使用的值匹配。这允许浏览器在导航后找到匹配的缓存资源。如果返回响应，则将其与请求一起缓存在 HTTP 缓存中。

已弃用 非标准

**注意：**这项技术曾经仅在 Chrome 中可用，现在已弃用。您应该改用Speculation Rules API，它取代了此技术。

为浏览器提供了一个提示，表明用户可能需要在下次导航时访问目标资源，因此浏览器可以通过预渲染资源来提升性能。prerender 用于未来的导航，仅限同站，因此对于多页面应用程序 (MPA) 比较有意义，而不适用于单页面应用程序 (SPA)。

例如

html

它会获取引用的文档，然后获取所有可静态查找的链接资源并将其也获取，并将结果存储在磁盘上的 HTTP 缓存中，并设置 5 分钟的超时时间。例外情况是通过 JavaScript 加载的子资源——它不会查找这些资源。它还有其他问题——例如 ，它也可能被 Cache-Control 头部阻止，并且由于浏览器 缓存分区，对于不同顶级站点使用的资源来说毫无用处。

推测规则 API使用 推测规则 API 来指定一组规则，这些规则决定浏览器应该预取或预渲染哪些未来的文档。这些规则以 JSON 结构的形式提供，位于内联