乐趣区

关于前端:Angular-应用程序的-Hydration-概念详解

jiezi

Angular 应用程序的 Hydration 概念

Hydration 概念是 Angular 应用程序中的一个要害概念，它波及到 Angular 框架在客户端渲染（Client-side rendering，CSR）中的运作形式。要深刻了解 Hydration，首先须要理解 CSR 和 SSR（Server-side rendering，服务器端渲染）之间的根本区别，以及 Angular 是如何利用 Hydration 来进步 CSR 性能的。本文将具体解释 Angular 应用程序的 Hydration 概念，并通过示例来阐明。

CSR 和 SSR 的根本区别

在了解 Hydration 之前，让咱们简要回顾一下 CSR 和 SSR 的根本区别。

  • CSR（Client-side Rendering）：在 CSR 中，整个应用程序的构建和渲染都产生在客户端浏览器中。当用户拜访一个 CSR 利用时，浏览器会下载利用的 JavaScript 代码，而后在用户的设施上执行该代码来渲染页面。这种形式的益处是能够在客户端实现动静交互，但也有性能挑战，因为首次加载时须要下载大量的 JavaScript 代码，导致页面加载工夫较长。
  • SSR（Server-side Rendering）：在 SSR 中，服务器在接管到客户端申请时，会在服务器上事后渲染 HTML 内容，并将其发送到客户端浏览器。这意味着用户会更快地看到内容，因为不用期待大量 JavaScript 代码下载和执行。但与 CSR 相比，SSR 可能在简单的利用中导致服务器负载减少，并且对实现某些交互性能有肯定限度。

Angular 的 CSR 和 SSR

Angular 反对两种渲染模式：CSR 和 SSR。默认状况下，Angular 应用程序采纳 CSR 模式，这意味着整个渲染过程产生在客户端。但在某些状况下，如须要更好的首屏加载性能或 SEO（搜索引擎优化）要求，能够抉择应用 SSR。

在 Angular 中，CSR 应用程序通常应用以下形式启动：

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

而 SSR 应用程序则应用以下形式启动：

platformServer().bootstrapModule(AppModule)
  .then(moduleRef => {const appRef = moduleRef.injector.get(ApplicationRef);
    const state = moduleRef.injector.get(PlatformState);
    appRef.isStable.pipe(first(isStable => isStable === true),
    ).subscribe(() => {state.renderToString().then(html => {console.log(html); // 在服务器上渲染的 HTML
        moduleRef.destroy();});
    });
  });

在 CSR 模式下，Angular 应用程序的初始加载将包含一些根本的 HTML 构造和一个 JavaScript 包（通常蕴含整个利用的代码），而后在浏览器中运行这些代码以渲染残缺的页面。

但这里波及到一个性能问题：JavaScript 包的下载和执行可能须要肯定的工夫，用户在此期间将看到一个空白的页面或加载指示器。这正是 Hydration 概念的出发点。

Hydration 概念的背地

Hydration 的核心思想是在 CSR 应用程序中，尽快显示内容，而不用期待整个 JavaScript 包的下载和执行。为了做到这一点，Angular 引入了一种机制，使应用程序可能在浏览器端逐渐加载和填充内容。

具体来说，当 Angular 应用程序以 CSR 模式启动时，它会将一些初始 HTML 内容嵌入到服务器生成的 HTML 中，这些内容会立刻在浏览器端显示。而后，JavaScript 包会下载并在后盾执行。一旦 JavaScript 包下载实现并筹备好，它会“水合”（hydrate）这些初始 HTML 内容，也就是将其转化为具备交互性的 Angular 组件。

这意味着用户在期待 JavaScript 包下载和执行时，依然能够与页面上的内容进行交互。Hydration 的益处是进步了用户感知的加载速度，因为页面会尽早显示内容，同时依然容许应用程序在后盾加载和初始化。

Hydration 的工作原理

要了解 Hydration 的工作原理，让咱们更深刻地理解它的步骤：

  1. 服务器端渲染（SSR）生成初始 HTML：在服务器端渲染中，Angular 应用程序的初始 HTML 内容会被生成，并蕴含一些非凡的标记，以标识哪些局部须要水合。
  2. 初始 HTML 发送到客户端：生成的初始 HTML 内容会随响应发送到客户端浏览器。
  3. 客户端下载 JavaScript 包：浏览器开始下载 Angular 应用程序的 JavaScript 包，这个包蕴含了应用程序的代码、组件和模块。
  4. JavaScript 包的执行：一旦 JavaScript 包下载实现，浏览器会开始执行它。在执行过程中，Angular 框架会辨认初始 HTML 中的非凡标记，而后将这些标记转化为 Angular 组件。
  5. 水合（Hydration）：当 Angular 框架水合（hydrate）初始 HTML 内容时，它会将这些内容替换为理论的 Angular 组件，并建设起与这些组件的交互能力。这意味着用户能够与页面上的内容进行交互，而不用期待整个 JavaScript 包的加载和执行。

Hydration 示例

为了更好地了解 Hydration，让咱们通过一个简略的示例来演示它的工作原理。假如咱们有一个 Angular 应用程序，其中蕴含一个简略的组件，用于显示用户的

姓名。这个组件的初始 HTML 可能如下所示：

<!-- 初始 HTML -->
<app-root>
  <app-user-name>Loading...</app-user-name>
</app-root>

在这个示例中，<app-user-name>是一个 Angular 组件，用于显示用户的姓名。初始 HTML 中蕴含了一个占位符文本“Loading…”，这是因为在水合之前，JavaScript 包尚未下载和执行。

当初，让咱们看看 Hydration 是如何利用于这个示例的：

  1. 服务器端渲染（SSR）生成初始 HTML，并将其发送到客户端。
<!-- 服务器生成的初始 HTML -->
<app-root>
  <app-user-name _nghost-abc123>John Doe</app-user-name>
</app-root>

在这个 HTML 中，咱们能够看到 <app-user-name> 组件的内容曾经被填充为“John Doe”，并且有一个非凡的属性 _nghost-abc123，它用于标识这个组件。

  1. 客户端浏览器开始下载 JavaScript 包。
  2. JavaScript 包的执行过程中，Angular 框架检测到初始 HTML 中的非凡标记。
  3. Angular 框架将初始 HTML 中的非凡标记替换为理论的 Angular 组件，并建设交互。
<!-- 水合后的 HTML -->
<app-root>
  <app-user-name _nghost-abc123 _ngcontent-def456>John Doe</app-user-name>
</app-root>

在这个 HTML 中，<app-user-name>组件曾经被替换为一个具备 Angular 交互能力的组件，并且有两个非凡属性 _nghost-abc123 和 _ngcontent-def456，它们用于确保组件的款式隔离。

当初，用户能够与页面上的内容进行交互，而不用期待整个 JavaScript 包的加载和执行。

Hydration 的劣势和利用场景

Hydration 的次要劣势在于进步了用户感知的加载速度，尤其是对于 CSR 应用程序。用户可能更快地看到页面上的内容，并与之交互，而不用期待整个 JavaScript 包的下载和执行。

Hydration 在以下状况下特地有用：

  1. 改善首屏加载性能：对于那些心愿疾速展现内容给用户的应用程序，Hydration 能够显著改善首屏加载性能，进步用户体验。
  2. 进步 SEO：对于须要 SEO 的应用程序，Hydration 能够确保搜索引擎爬虫可能看到页面的初始内容，而不用期待 JavaScript 的执行。这能够进步搜索引擎排名。
  3. 渐进加强：Hydration 反对渐进加强的策略，即便 JavaScript 加载失败或禁用，页面依然可能失常工作，因为初始内容曾经在服务器端渲染时生成。

Hydration 的挑战和注意事项

只管 Hydration 提供了许多性能劣势，但也须要留神一些挑战和注意事项：

  1. 额定的复杂性：施行 Hydration 须要在 Angular 应用程序中引入额定的复杂性，包含在初始 HTML 中增加非凡标记以辨认须要水合的局部。
  2. 代码拆分：为了实现更好的 Hydration 成果，通常须要将应用程序的代码拆分成小块，以便更快地下载和执行要害局部。
  3. 性能监控：须要监控 Hydration 的性能，确保 JavaScript 包的下载和执行不会导致性能问题。
  4. 初始状态同步：确保初始 HTML 中的内容与后续 JavaScript 执行的状态同步，以防止不一致性。

论断

Hydration 是 Angular 应用程序中的一个要害概念，它容许在 CSR 模式下进步用户感知的加载速度，同时保留了应用程序的交互性。通过在初始 HTML 中增加非凡标记，Angular 可能在后盾下载和执行 JavaScript 包的同时，尽早显示页面内容。

Hydration 的实现须要肯定的复杂性和思考，但它能够改善首屏加载性能、进步 SEO、反对渐进加强策略等。理解 Hydration 的工作原理和利用场景，能够帮忙开发者更好地优化 Angular 应用程序的性能和用户体验。

退出移动版