使用 @defer 和延迟加载提升角度性能

介绍

Angular 中的新 @defer 功能是框架增强性能的一部分，特别是在延迟加载和渲染优化方面。以下是 @defer 功能以及 @placeholder 和 @loading 块的快速概述。

@defer 概述

目的

• @defer 功能旨在延迟应用程序的组件或部分的加载和渲染，直到需要它们为止。这可以显着改善应用程序的初始加载时间并增强用户体验。

用法

• @defer 可以应用于模板的组件或部分，以指示它们应该延迟加载。这对于大型应用程序或应用程序的某些部分特别有用，当用户首次登陆页面时，这些应用程序或应用程序的部分不会立即可见或不需要。

句法

• 使用 @defer 的语法非常简单，并且与 Angular 现有的模板语法无缝集成。以下是如何使用它的示例：

  @defer {
  <large-component />
  }

优点

• 性能优化：通过推迟应用程序某些部分的加载，可以减少初始加载时间，从而带来更快、响应更灵敏的用户体验。
• 资源管理：推迟组件的加载有助于更好的资源管理，因为资源仅在必要时使用。
• 用户体验：它通过首先加载关键内容并推迟不太关键的内容直到需要时来增强用户体验。

与 Angular 生态系统集成

• @defer 功能与其他 Angular 功能和工具很好地集成，允许开发人员以一致的方式利用延迟加载、更改检测策略和其他性能优化技术。

前景

• 随着 Angular 的不断发展，@defer 功能可能会得到进一步的增强和优化。开发人员可以期望对其应用程序的某些部分的加载和渲染方式以及时间进行更精细的控制。

@defer 和 IntersectionObserver

在底层，@defer 使用 IntersectionObserver API。此 API 允许您观察目标元素与祖先元素或顶级文档视口的交集的变化。通过推迟组件的加载，直到它们即将进入视口，您可以避免加载用户可能永远不会看到的资源，从而节省带宽和处理能力。

IntersectionObserver 的其他好处

改进的初始加载时间：将组件推迟到需要时确保最初只加载应用程序的最关键部分。这减少了初始加载时间并提高了应用程序的感知性能，使其感觉更快、响应更灵敏。 Angular 将为延迟的组件创建单独的包，从而减少主包的大小。

增强的用户体验：通过在内容可见之前加载内容，您可以确保为用户提供更流畅、更无缝的体验。此技术对于长滚动页面特别有益，在用户滚动时加载内容可以防止应用程序变得缓慢。

低功耗设备上的更好性能：处理能力有限或网络连接速度慢的设备可以从延迟加载中显着受益。通过仅加载必要的组件，这些设备可以更有效地处理应用程序，为各种设备上的用户提供更好的体验。

示例

使用 @defer 而不带任何选项

这是一个演示如何在 Angular 应用程序中使用 @defer 的示例。首先，创建一个加载图像的组件。使用独立组件是 @defer 的要求。

import { Component } from "@angular/core";

@Component({
  selector: "app-images",
  standalone: true,
  template: `<div style="display: flex; flex-direction: column;">
    @for(image of list; track image) {
    <img [src]="image" width="600" height="400" />
    }
  </div> `,
})
export class ImagesComponent {
  list = Array(5).fill("https://placehold.co/600x400");
}

这里我们使用@defer，没有任何选项。

<h1>Angular Defer Sample Application</h1>
@defer () {
<app-images></app-images>
}

现在，查看生成的包，我们可以看到图像组件有自己的块。

在网络选项卡中，当页面加载时，我们可以看到该包现在已在运行时加载。

将 @defer 与选项一起使用

有几个选项可以增强用户体验。在本节中，我们将介绍其中的一些内容。

Using @placeholder

By default, the defer block will render the content when it is visible in the viewport. However, there can be delays, for example, when the components are making HTTP requests. In those scenarios, we can use the @placeholder option. The content used for the placeholder is not lazy loaded. The content in the @placeholder is shown first until the @defer block's contents are ready to render. The placeholder itself comes with an optional argument called minimum. This allows you to set the time to display the content.

Here is how this would look:

<h1>Angular Defer Sample Application</h1>
@defer () {
<app-images></app-images>
} @placeholder (minimum 500ms) {
<p>Loading Images</p>
}

And here is how this looks:

Using @loading

The @loading block is used to display some content while the content defined in the @defer block is still loading or has started to load. This is different from the @placeholder block, which will appear before the loading starts. This block comes with two optional arguments, after and minimum. Similar to the @placeholder argument, the minimum argument is used to set the time to display the content. The second argument, after, is used to define the waiting time before showing the @loading content.

Here is how this would look:

<h1>Angular Defer Sample Application</h1>
@defer () {
<app-images></app-images>
} @loading (after 1s; minimum 500ms) {
<p>Loading Images</p>
}

While you may not see this properly in the animated GIF, we are telling the block to wait at least 1 second before displaying the @loading content and show it for at least 500 ms.

Conclusion

The @defer feature in Angular is a powerful tool for enhancing performance and user experience by delaying the loading of components until they are needed. By integrating this feature with options like @placeholder and @loading, developers can create more efficient and responsive applications. As Angular continues to evolve, features like @defer will play a crucial role in optimizing resource management and improving application performance across various devices and network conditions.

以上是使用 @defer 和延迟加载提升角度性能的详细内容。更多信息请关注PHP中文网其他相关文章！