diff --git a/files/zh-cn/web/performance/speculative_loading/index.md b/files/zh-cn/web/performance/speculative_loading/index.md index 01574582bfffc9..cf47a7e25036ed 100644 --- a/files/zh-cn/web/performance/speculative_loading/index.md +++ b/files/zh-cn/web/performance/speculative_loading/index.md @@ -17,18 +17,18 @@ l10n: 推测性加载有几种机制: -- **预加载(Prefetching)** 在需要之前获取渲染文档(或文档的一部分)所需的一些或全部资源,以便在将要渲染时更快地实现渲染。 +- **预取(Prefetching)** 在需要之前获取渲染文档(或文档的一部分)所需的一些或全部资源,以便在将要渲染时更快地实现渲染。 - **预渲染(Prerendering)** 更进一步,会实际渲染内容,以便在需要时可以展示。根据实现方式的不同,可以实现从旧页面到新页面的即时导航。 - **预连接(Preconnecting)** 通过预先执行部分或全部的连接握手(即 DNS + TCP + TLS)来加速来自给定源的未来加载。 > [!NOTE] -> 上述描述是高层次和泛化的。浏览器究竟将执行何种操作来实现预加载和预渲染,取决于所使用的特性。更准确的特性描述在下面的[推测性加载特性](#推测性加载特性)部分给出。 +> 上述描述是高层次和泛化的。浏览器究竟将执行何种操作来实现预取和预渲染,取决于所使用的特性。更准确的特性描述在下面的[推测性加载特性](#推测性加载特性)部分给出。 ## 推测性加载是如何实现的? 推测性加载主要通过两种方式实现。 -首先,一些浏览器会根据各种启发式方法自动预渲染页面,以提供自动的性能改进。具体如何实现取决于浏览器的实现。例如,Chrome 会在地址栏中输入匹配字符串时自动预渲染页面——如果它有很高的信心你会访问该页面(有关详细信息,请参阅[查看 Chrome 的地址栏推测](https://developer.chrome.google.cn/docs/web-platform/prerender-pages#view_chromes_address_bar_predictions))。此外,当搜索词输入到地址栏时,它可能会自动预渲染搜索结果页面,当搜索引擎指示这样做时。它使用与 [Speculation Rules API](/zh-CN/docs/Web/API/Speculation_Rules_API) 相同的机制来实现这一点。 +首先,一些浏览器会根据各种启发式方法自动预渲染页面,以提供自动的性能改进。具体如何实现取决于浏览器的实现。例如,Chrome 会在地址栏中输入匹配字符串时自动预渲染页面——如果它有很高的信心你会访问该页面(有关详细信息,请参阅[查看 Chrome 的地址栏推测](https://developer.chrome.google.cn/docs/web-platform/prerender-pages?hl=zh-cn#view_chromes_address_bar_predictions))。此外,当搜索词输入到地址栏时,它可能会自动预渲染搜索结果页面,当搜索引擎指示这样做时。它使用与[推测规则 API](/zh-CN/docs/Web/API/Speculation_Rules_API) 相同的机制来实现这一点。 其次,有几个不同的平台特性可供开发者使用,以提供他们希望浏览器执行的推测性加载的指令。这些特性将在下一节中进行描述。 @@ -44,9 +44,9 @@ l10n: ``` -`` 在浏览器中得到广泛支持,并将改善未来的跨源 HTTP 请求、导航或子资源。这对于同源请求并没有收益,因为连接已经打开过了。 +`` 在浏览器中得到了广泛支持,并将改善未来的跨源 HTTP 请求、导航或子资源。这对于同源请求并没有收益,因为连接已经打开过了。 -如果页面需要连接到许多第三方域,全部预连接可能会适得其反。`` 提示最好仅用于最关键的连接。对于其他的连接,只需使用 `` 来节省第一步的时间——DNS 查找。 +如果页面需要连接到许多第三方域,对它们全部都预连接可能会适得其反。`` 提示最好仅用于最关键的连接。对于其他的连接,只需使用 `` 来节省第一步的时间——DNS 查找。 你还可以将预连接实现为 HTTP [Link](/zh-CN/docs/Web/HTTP/Headers/Link) 标头,例如: @@ -71,7 +71,7 @@ Link: ; rel="preconnect" ### `` -[``](/zh-CN/docs/Web/HTML/Attributes/rel/preload) 给浏览器一个提示,表明哪些资源在*当前页面*上是高优先级的,因此浏览器可以在看到 {{htmlelement("link")}} 元素时尽早开始下载它们。 +[``](/zh-CN/docs/Web/HTML/Attributes/rel/preload) 给浏览器一个提示,表明哪些资源在*当前页面*上是高优先级的,因此浏览器可以在观察到 {{htmlelement("link")}} 元素时尽早开始下载它们。 例如: @@ -86,7 +86,7 @@ Link: ; rel="preconnect" crossorigin /> ``` -结果保存在每个文档的内存缓存中。如果你预加载当前页面不使用的资源,通常会造成一种资源浪费,尽管结果可能会填充 HTTP 缓存(如果标头允许)。 +结果被保存在每个文档的内存缓存中。如果你预加载当前页面并不使用的资源,通常会造成一种资源浪费,尽管在标头允许时这些结果也会填充进 HTTP 缓存。 你还可以将预加载实现为 HTTP [Link](/zh-CN/docs/Web/HTTP/Headers/Link) 标头,例如: @@ -106,11 +106,11 @@ Link: ; rel="preload" ``` -它是 `` 的专用版本,用于 [JavaScript 模块](/zh-CN/docs/Web/JavaScript/Guide/Modules),并且基本以相同的方式工作。然而还是有些区别: +它是 `` 用于 [JavaScript 模块](/zh-CN/docs/Web/JavaScript/Guide/Modules)的专用版本,并且基本以相同的方式工作。然而还是有些区别: - 浏览器知道资源是一个 JavaScript 模块,因为不需要 `as` 属性,它可以使用正确的凭据模式来避免双重获取。 -- 浏览器不仅下载并将其存储在缓存中,还将其解析并编译到内存模块映射中。 -- 浏览器还可以自动为模块依赖项做同样的事情。 +- 浏览器不仅会下载并将其存储在缓存中,还将其解析并编译到内存模块映射中。 +- 浏览器还可以自动为模块的依赖项做同样的事情。 ### `` @@ -122,16 +122,16 @@ Link: ; rel="preload" ``` -预加载可用于获取可能的下一次导航的 HTML 和子资源。一个常见的用例是简单的网站着陆页,该页获取整个站点其余部分使用的更“重量级”的资源。 +预取可用于获取可能的下一次导航的 HTML 和子资源。一个常见的用例是简单的网站着陆页,该页获取整个站点其余部分使用的更“重量级”的资源。 ```html ``` -结果保存在磁盘中的 HTTP 缓存中。因此,即便它们不被当前页面使用,也对于预加载子资源很有用。你还可以使用它来预加载用户可能在站点上访问的下一个文档。然而,你也因此要小心地处理标头——例如某些 [Cache-Control](/zh-CN/docs/Web/HTTP/Headers/Cache-Control) 标头可能会阻止预加载(例如 `no-cache` 或 `no-store`)。 +结果被保存在磁盘中的 HTTP 缓存中。因此,即便它们不被当前页面使用,也对于预取子资源很有用。你还可以使用它来预取用户可能在站点上访问的下一个文档。然而,你也因此要小心地处理标头——例如某些 [Cache-Control](/zh-CN/docs/Web/HTTP/Headers/Cache-Control) 标头可能会阻止预取(例如 `no-cache` 或 `no-store`)。 -现在许多浏览器实现了一些形式的[缓存分区](https://developer.chrome.google.cn/blog/http-cache-partitioning?hl=zh-cn),这使得 `` 对于那些打算由不同顶级站点使用的资源无用。这包括会跨站点导航的主文档。例如下面的预加载: +现在许多浏览器实现了某种形式的[缓存分区](https://developer.chrome.google.cn/blog/http-cache-partitioning?hl=zh-cn),这使得 `` 对于那些打算由不同顶级站点使用的资源无用。这包括会跨站点导航的主文档。例如下面的预取: ```html @@ -149,7 +149,7 @@ Link: ; rel="preload" ### `` > [!NOTE] -> 这项技术仅在 Chrome 中可用,现已弃用。作为取代,应该使用 [Speculation Rules API](/zh-CN/docs/Web/API/Speculation_Rules_API) 。 +> 这项技术仅在 Chrome 中可用,现已弃用。作为取代,应该使用[推测规则 API](/zh-CN/docs/Web/API/Speculation_Rules_API) 。 [``](/zh-CN/docs/Web/HTML/Attributes/rel/prerender) 给浏览器一个提示,表明用户可能需要目标资源进行下一次导航,因此浏览器可以通过预渲染资源来提高性能。`prerender` 仅用于同站导航,因此适用于多页应用程序(MPA),而不适用于单页应用程序(SPA)。 @@ -159,11 +159,11 @@ Link: ; rel="preload" ``` -它将获取所引用的文档,然后获取任何静态可寻的链接资源,将结果存储在磁盘中的 HTTP 缓存,超时时间为五分钟。通过 JavaScript 加载的子资源是例外情况——它无法找到这些资源。它还有其他问题——像 `` 一样,它也可能被 [Cache-Control](/zh-CN/docs/Web/HTTP/Headers/Cache-Control) 标头阻止,并因浏览器[缓存分区](https://developer.chrome.google.cn/blog/http-cache-partitioning)而对那些打算由不同顶级站点使用的资源无用。 +它将获取所引用的文档,然后获取任何静态可寻的链接资源,将结果存储在磁盘中的 HTTP 缓存,超时时间为五分钟。通过 JavaScript 加载的子资源是例外情况——它无法找到这些资源。它还有其他问题——像 `` 一样,它也可能被 [Cache-Control](/zh-CN/docs/Web/HTTP/Headers/Cache-Control) 标头阻止,并因浏览器[缓存分区](https://developer.chrome.google.cn/blog/http-cache-partitioning?hl=zh-cn)而对那些打算由不同顶级站点使用的资源无用。 -### Speculation Rules API +### 推测规则 API -[Speculation Rules API](/zh-CN/docs/Web/API/Speculation_Rules_API) 用于指定一组规则,以确定浏览器应预加载或预渲染哪些未来文档。这些规则作为内联 `