From 68267ca55808f656234797d397812987eb96209a Mon Sep 17 00:00:00 2001 From: Melxy97 <861889629@qq.com> Date: Sun, 22 Dec 2024 16:16:25 +0800 Subject: [PATCH] fix: handle expression issues --- .../performance/speculative_loading/index.md | 46 +++++++++---------- 1 file changed, 23 insertions(+), 23 deletions(-) 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) 用于指定一组规则，以确定浏览器应预加载或预渲染哪些未来文档。这些规则作为内联 `