Steigerung der Angular-Leistung mit @defer und Lazy Loading

Einführung

Die neue @defer-Funktion in Angular ist Teil der Verbesserungen des Frameworks zur Verbesserung der Leistung, insbesondere bei Lazy Loading und Rendering-Optimierung. Hier ist ein kurzer Überblick über die @defer-Funktion und die @placeholder- und @loading-Blöcke.

Übersicht über @defer

Zweck

• Die @defer-Funktion soll das Laden und Rendern von Komponenten oder Teilen der Anwendung verzögern, bis sie benötigt werden. Dies kann die anfängliche Ladezeit der Anwendung erheblich verkürzen und das Benutzererlebnis verbessern.

Verwendung

• @defer kann auf Komponenten oder Teile der Vorlage angewendet werden, um anzugeben, dass sie verzögert geladen werden sollen. Dies kann besonders nützlich sein für große Anwendungen oder Abschnitte einer Anwendung, die nicht sofort sichtbar oder notwendig sind, wenn der Benutzer zum ersten Mal auf einer Seite landet.

Syntax

• Die Syntax für die Verwendung von @defer ist unkompliziert und lässt sich nahtlos in die vorhandene Vorlagensyntax von Angular integrieren. Hier ist ein Beispiel dafür, wie es verwendet werden könnte:

  @defer {
  <large-component />
  }

Vorteile

• Leistungsoptimierung: Durch die Verzögerung des Ladens bestimmter Teile der Anwendung kann die anfängliche Ladezeit verkürzt werden, was zu einer schnelleren und reaktionsschnelleren Benutzererfahrung führt.
• Ressourcenmanagement: Das Aufschieben des Ladens von Komponenten trägt zu einem besseren Ressourcenmanagement bei, da Ressourcen nur bei Bedarf genutzt werden.
• Benutzererfahrung: Es verbessert die Benutzererfahrung, indem kritische Inhalte zuerst geladen werden und weniger kritische Inhalte zurückgestellt werden, bis sie benötigt werden.

Integration mit dem Ökosystem von Angular

• Die @defer-Funktion lässt sich gut in andere Angular-Funktionen und -Tools integrieren, sodass Entwickler Lazy Loading, Strategien zur Änderungserkennung und andere Techniken zur Leistungsoptimierung auf zusammenhängende Weise nutzen können.

Zukunftsaussichten

• Da Angular sich weiterentwickelt, wird die @defer-Funktion wahrscheinlich weitere Verbesserungen und Optimierungen erfahren. Entwickler können eine genauere Kontrolle darüber erwarten, wie und wann Teile ihrer Anwendung geladen und gerendert werden.

@defer und der IntersectionObserver

Unter der Haube verwendet @defer die IntersectionObserver API. Mit dieser API können Sie Änderungen am Schnittpunkt eines Zielelements mit einem Vorgängerelement oder im Ansichtsfenster des Dokuments der obersten Ebene beobachten. Indem Sie das Laden von Komponenten verzögern, bis sie kurz vor dem Eintritt in das Ansichtsfenster stehen, können Sie das Laden von Ressourcen vermeiden, die der Benutzer möglicherweise nie sieht, und so Bandbreite und Rechenleistung sparen.

Weitere Vorteile von IntersectionObserver

Verkürzte Erstladezeit: Durch das Zurückstellen von Komponenten, bis sie benötigt werden, wird sichergestellt, dass zunächst nur die kritischsten Teile der Anwendung geladen werden. Dies verkürzt die anfängliche Ladezeit und verbessert die wahrgenommene Leistung der Anwendung, sodass sie sich schneller und reaktionsschneller anfühlt. Angular erstellt separate Bundles für die zurückgestellten Komponenten und reduziert so auch die Größe Ihres Hauptpakets.

Verbesserte Benutzererfahrung: Indem Sie Inhalte laden, bevor sie sichtbar werden, können Sie ein reibungsloseres und nahtloseres Erlebnis für Benutzer gewährleisten. Diese Technik kann besonders bei Seiten mit langem Bildlauf von Vorteil sein, bei denen das Laden von Inhalten beim Scrollen des Benutzers verhindern kann, dass die Anwendung träge wird.

Bessere Leistung auf Geräten mit geringem Stromverbrauch: Geräte mit begrenzter Rechenleistung oder langsamen Netzwerkverbindungen können erheblich von verzögertem Laden profitieren. Da nur die erforderlichen Komponenten geladen werden, können diese Geräte Anwendungen effizienter verarbeiten und bieten Benutzern auf einer Vielzahl von Geräten ein besseres Erlebnis.

Beispiele

Verwenden von @defer ohne Optionen

Hier ist ein Beispiel, das zeigt, wie @defer in einer Angular-Anwendung verwendet wird. Erstellen Sie zunächst eine Komponente, die Bilder lädt. Die Verwendung eigenständiger Komponenten ist eine Voraussetzung für @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");
}

Und hier verwenden wir @defer ohne Optionen.

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

Wenn wir uns nun das generierte Bundle ansehen, können wir sehen, dass die Bildkomponente einen eigenen Block hat.

Auf der Registerkarte „Netzwerk“ können wir beim Laden der Seite sehen, dass dieses Bundle jetzt zur Laufzeit geladen wird.

Verwenden von @defer mit Optionen

Es stehen mehrere Optionen zur Verfügung, um das Benutzererlebnis zu verbessern. In diesem Abschnitt werden wir einige davon durchgehen.

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.

Das obige ist der detaillierte Inhalt vonSteigerung der Angular-Leistung mit @defer und Lazy Loading. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!