Angular 中的增量水合作用将您的应用程序性能提升到新的水平

在快节奏的 Web 开发世界中，性能和用户体验对于任何应用程序的成功都至关重要。在 Angular 19 中，Angular 团队引入了一项革命性功能：增量水合作用。这项新功能增强了现有的水合过程，使开发人员能够精确优化组件的加载和交互性。本文深入探讨了增量水合是什么、其实现，以及在各种场景中使用的水合触发器的详细分析。

了解 Angular 中的水合作用

Hydration 是在客户端激活服务器端渲染应用程序的过程。这需要重用服务器渲染的 DOM 元素、维护应用程序状态以及传输服务器已检索的数据。本质上，水合消除了完全重新渲染 DOM 的需要，从而增强了 Core Web Vitals (CWV) 等性能指标。

Angular 19 引入了增量水合，它更进一步，允许开发人员根据用户交互、可见性或自定义条件有选择地水合组件。这有助于仅加载必要的组件，从而缩短应用程序的初始加载时间和整体性能。

此外，Angular 的增量水化对水合物块中的内容采用事件重放，以确保无缝的用户体验。通过利用 withEventReplay 功能，该框架捕获在水合过程完成之前发生的用户交互 - ，例如单击或按键 - 。一旦组件被水化，这些记录的事件就会被重放，并执行相应的事件监听器，确保在转换过程中不会丢失用户交互，并且应用程序从一开始就感觉响应迅速且引人入胜。

增加水合作用

在深入研究水合触发器之前，让我们确保我们已设置为在 Angular 应用程序中使用增量水合。以下是要遵循的步骤：

先决条件

• Angular 版本：确保您的应用程序已更新到 Angular 版本 19.0.0-rc.0 或更高版本。
• 服务器端渲染 (SSR)：应在您的应用程序中启用 SSR。
• 启用水合：在 Angular 设置中启用水合。
• 延迟块：利用@deferblocks来利用增量水合作用。

更新您的应用程序引导程序

您需要将增量水合导入到您的应用程序中，方法是将 withIncrementalHydration() 添加到providers数组中的provideClientHydration()导入中：

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

// Update bootstrap code
bootstrapApplication(AppComponent, {
providers: [provideClientHydration(withIncrementalHydration())]
});

增量水合语法

延迟块上启用了增量水合功能以及额外的水合触发器。您需要将水合物触发器添加到要利用增量水合的延迟块中。触发器与当前使用的触发器相同（有关更多信息，请参阅本文档），再加上一个额外的水合物从不触发器。以下是所有可用水合物触发器的列表：

1. 立即
2. 闲置
3. 定时器
4. 悬停
5. 关于互动
6. 在视口
7. 从来没有
8. 什么时候

基本语法与可延迟视图的现有语法相同，但添加了特定于水合物的触发器。例如：

@defer (hydrate on interaction) {
  <my-deferred-cmp />
}

水合物触发器与同一代码块中现有的延迟触发器共存。例如：

@defer (on idle; hydrate on interaction) {
  <my-deferred-cmp />
}

水合触发器的引入标志着应用程序管理渲染方式的重大演变，特别是在服务器端渲染 (SSR) 和客户端渲染 (CSR) 的上下文中。水合物触发器（例如交互时的水合物）提供了一种与现有的 Angular 延迟触发器（例如即时触发器）不同的机制。

为了阐明其功能，传统的延迟触发器仅在客户端渲染的上下文中运行。例如，仅当用户通过客户端路由导航到组件时，立即触发才会被激活，这表明一旦初始加载完成，就应该立即渲染。

相比之下，水合物触发器在初始服务器端渲染期间发挥作用。当服务器渲染的组件使用 Hydro 关键字时，它将内容准备为静态 HTML，在满足特定的水合条件或运行特定的水合触发器之前，该内容将保持非交互式。这意味着在初始服务器端渲染期间，组件显示为静态内容；然而，一旦满足条件或激活触发器，水合就会将其转变为完全互动的元素。由于这种功能上的区别，我们可以将常规延迟触发器和水合物触发器描述为互斥的；一次只能应用一种类型的触发器。

这种排他性允许开发人员仔细管理组件的渲染和交互，从而优化应用程序性能。此外，事件重放与水合物触发器结合使用，以确保保留静态阶段期间采取的任何用户操作；这些相互作用将在水合时被捕获并重播。
了解水合物触发器如何与 @placeholder 和 @loading 相互作用也很重要：

使用 Hydro 关键字时，主模板内容在 SSR 期间有效地充当新的占位符。相比之下，在 CSR 场景中使用传统的占位符和加载模板。因此，如果不使用 Hydrate 关键字，则行为默认为标准服务器端渲染，其中指定的占位符在服务器上渲染，并作为完整应用程序加载过程的一部分急切地进行水合。这种细微差别使开发人员能够无缝优化初始加载体验和后续用户交互。

多重水合物触发器

就像延迟触发器和预取触发器一样，您可以同时使用多个水合触发器，只要激活其中任何一个触发器，就可以发生水合。例如：

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

// Update bootstrap code
bootstrapApplication(AppComponent, {
providers: [provideClientHydration(withIncrementalHydration())]
});

关于when触发器需要注意的一个重要点是，在同一个@defer块中不能有多个水合物when触发器。相反，您必须结合条件；否则，会抛出错误。例如，下面的代码将导致错误，指示不允许使用多个when块：

@defer (hydrate on interaction) {
  <my-deferred-cmp />
}

相比之下，下面的代码将正确工作：

@defer (on idle; hydrate on interaction) {
  <my-deferred-cmp />
}

水合触发因素解释

水合触发器决定延迟块何时应变为交互式。让我们详细探讨每个触发器，以及它们的理想使用场景。

立即水化：此触发器在客户端完成渲染组件后立即启动水化。例如：

@defer(hydrate on interaction; hydrate when isLoggedIn()){
<li>
  <a [routerLink]="[isLoggedIn()?'/account':'/signup']">Account</a>
</li>
}

示例用例：将此触发器用于需要立即快速用户交互的基本组件，例如导航菜单或主要号召性用语按钮。

空闲时水化：当浏览器进入空闲状态（请参阅 requestIdleCallback）时，此触发器开始水化，这意味着没有用户交互或计划任务。

@defer(hydrate when firstCondition; hydrate when secondCondition){
<my-component />
}

示例用例：非常适合需要等待一段时间的非关键 UI 元素，例如提供上下文而不妨碍主要交互的补充信息卡。

定时器补水：此触发器在指定的持续时间后激活补水，这是强制性的，可以以毫秒 (ms) 或秒 (s) 为单位定义。

@defer(hydrate when (firstCondition || secondCondition)){
<my-component />
}

示例用例：适合不应立即出现而应在短时间内出现的组件，例如引导用户完成界面的弹出通知或教程。

悬停时水合作用：当用户将鼠标悬停在关联组件上时，利用 mouseenter 和 focusin 事件，此触发器将启动水合作用。

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

// Update bootstrap code
bootstrapApplication(AppComponent, {
providers: [provideClientHydration(withIncrementalHydration())]
});

示例用例：将其用于工具提示或详细信息菜单等功能，以增强用户理解而不使界面混乱。
交互水合：此触发器根据用户驱动的事件（例如单击或按键事件）激活水合。

@defer (hydrate on interaction) {
  <my-deferred-cmp />
}

示例用例：非常适合需要用户在交互之前参与的组件，例如表单、产品库或单击时显示更多信息的按钮。

视口上的水合：当组件进入由 Intersection Observer API 确定的用户视口时，此触发器会水合组件。

@defer (on idle; hydrate on interaction) {
  <my-deferred-cmp />
}

示例用例：将此用于首屏内容，这些内容在用户向下滚动之前不应变为交互式内容。这种方法可以缩短页面加载时间，同时保持用户参与度，使其成为图像、文章或其他产品列表等内容的理想选择。

从不水合：此触发器指定一个将保持静态的方块，表示它永远不应该水合。

@defer(hydrate on interaction; hydrate when isLoggedIn()){
<li>
  <a [routerLink]="[isLoggedIn()?'/account':'/signup']">Account</a>
</li>
}

示例用例：非常适合不需要交互的静态元素，例如页脚、版权信息或法律免责声明。这些部分不需要产生水合作用的开销，并且可以渲染为简单的 HTML。

结合 CSR Defer 和 HydrationTriggers

在许多情况下，组合触发器可以产生更大的灵活性和性能：

@defer(hydrate when firstCondition; hydrate when secondCondition){
<my-component />
}

在本例中，我们指定对于客户端渲染 (CSR)，组件应在用户向下滚动（进入视口）时进行水化。相比之下，对于服务器端渲染 (SSR)，它会根据用户交互进行水合，从而使流程既高效又响应用户操作。

了解增量水合中的嵌套水合

随着 Angular 19 中增量水合的引入，嵌套水合的概念成为需要理解的一个重要方面。当处理多个嵌套的@defer块时，它们的水合条件之间的相互作用可以显着提高性能和资源管理。管理这些嵌套块的行为的规则提供了对渲染内容和渲染时间的更深层次的控制，最终影响应用程序的整体性能。

同步状态评估

当多个@defer块在脱水状态下相互嵌套时，它们的水合条件会同时评估。例如，考虑以下结构：

import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';

// Update bootstrap code
bootstrapApplication(AppComponent, {
providers: [provideClientHydration(withIncrementalHydration())]
});

在此示例中，当用户将鼠标悬停在其中的任何内容上时，外部块设置为水合。然而，即使外部块从未悬停，内部块仍然会在指定的 15 秒持续时间后触发水合作用。这种对条件的并发评估可以在组件如何交互方面提供更大的灵活性，特别是在交互时间可能变化很大的用户界面中。

水合物的例外情况

虽然大多数水合物触发器在嵌套结构中都能正确运行，但水合物触发时有一个明显的例外。 When 触发器是基于条件的，并且完全依赖于包含它的组件中定义的逻辑。具体来说，这意味着只有当直接父块或包含块已经水合时，when 才能评估其逻辑。例如：

@defer (hydrate on interaction) {
  <my-deferred-cmp />
}

在这种情况下，如果外部块（悬停时有水合物）在鼠标悬停事件时不触发水合，则内部块（检查用户对象是否不为空）将永远不会水合。这种行为的原因很清楚：除非父组件已被处理并且其逻辑可访问，否则评估when的表达式无法执行。因此，如果外部块仍然脱水，则评估内部块的必要逻辑尚不存在。

分级水合过程

当嵌套块的水合被触发时，Angular 会遵循级联过程 - 任何父块都必须首先被水合，然后才能对子组件执行操作。这种级联操作至关重要，因为它允许以正确的顺序加载嵌套组件的依赖项。水合过程像瀑布一样有效地工作，其中每一步都依赖于前一步的完全处理。因此，嵌套的脱水块需要采取谨慎的方法来加载所有级别所需的代码，然后才能操作它们。

值得注意的互动

在嵌套结构中使用混合触发器时，必须牢记所涉及触发器的性质。例如，如果您希望某些组件水合，同时确保其他组件保持静态（未水合），您可以策略性地使用以下结构：

@defer (on idle; hydrate on interaction) {
  <my-deferred-cmp />
}

在这种情况下，外部块在悬停时会水合，而包含广告单元的内部块将保持不水合，保持其静态性质。这种分离是可能的，因为基于事件的触发器（例如悬停时的水合物）不依赖于组件逻辑来激活，因此可以独立于嵌套在 @deferblocks 中包含的逻辑进行操作。

了解嵌套水合对于有效利用 Angular 19 中的增量水合至关重要。通过仔细构建嵌套的 @deferblocks 并选择适当的水合触发器，开发人员可以优化应用程序性能，同时保持响应能力。管理组件何时以及如何交互的能力是一项强大的功能，与管理嵌套水合作用的规则相结合，可以显着改善现代 Angular 应用程序中的用户体验和资源管理。

使用增量补水的常见场景

延迟加载产品项目
在电子商务平台中，当在类别页面上显示产品列表时，用户是否会与每个产品进行交互是不确定的。通过使用 Hydro 语法将这些产品放置在 @defer 块中，组件将呈现为静态内容，但关联的 JavaScript 仅在用户与特定产品交互时才会被获取和 Hydrated。这种方法减少了初始捆绑包大小，优化了性能，同时在需要时提供产品详细信息。

提供静态博客内容
对于主要以静态文章为特色的博客平台，利用帖子组件的 Hydronever 条件可以让您避免传送任何关联的 JavaScript。这会缩短加载时间，因为用户可以访问文章，而不会产生通常与交互相关的资源开销。

优化重的首屏组件
当您有大型组件（例如标题或轮播）出现在首屏但基于热图数据显示最少的用户交互时，将它们包装在带有水合触发器的 @defer 块中可能会很有帮助。这种策略允许这些组件首先渲染，而它们的交互行为和相关资源仅在用户交互时加载，确保高效的数据传输并增强用户体验。

增强用户与表单的互动
对于需要立即响应用户操作的输入表单，在交互触发器上使用水合物是理想的选择。这保证了一旦用户开始与表单组件交互，表单组件就会被激活，从而提高应用程序的可用性。

加载动态或非首屏内容
对于动态数据显示或仅在用户滚动时才变得相关的内容较多的部分，利用视口触发器上的水合物是一种有价值的方法。这不仅适用于产品显示，还适用于图像或附加内容，提供无缝的用户体验，而不会对初始加载时间产生不利影响。

与动画元素的互动
对于增强用户参与度但对于主要交互不是必需的交互元素（例如工具提示或下拉菜单），建议在悬停触发器上使用水合物。这确保了只有当用户将鼠标悬停在这些元素上时才会激活这些元素，从而保持初始负载轻量级，同时在需要时仍提供其他选项。

结论

Angular 19 中的增量水合意味着在优化应用程序性能和用户体验方面取得了重大进步。通过策略性地利用水合触发器，开发人员可以精确控制哪些组件应该具有交互性以及何时发生。这种精细的方法不仅提高了效率，还通过确保无缝界面提高了用户满意度。

通过掌握每个水合触发器的复杂性，您可以提升您的 Angular 应用程序，使其响应迅速、高效并为用户参与做好准备。当您探索这些概念时，请记住您的用户群的需求以及您所呈现的具体内容，以便就何时以及如何整合应用程序的各种元素做出明智的决策。祝您开发愉快！

以上是Angular 中的增量水合作用将您的应用程序性能提升到新的水平的详细内容。更多信息请关注PHP中文网其他相关文章！