使用 @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中文網其他相關文章！