Angular の新しい @defer 機能は、特に遅延読み込みとレンダリングの最適化におけるパフォーマンスを向上させるフレームワークの機能強化の一部です。ここでは、@defer 機能と @placeholder および @loading ブロックの概要を示します。
@defer { <large-component /> }
@defer は内部で IntersectionObserver API を使用します。この API を使用すると、ターゲット要素と祖先要素またはトップレベル ドキュメントのビューポートとの交差部分の変化を観察できます。コンポーネントがビューポートに入る直前までコンポーネントの読み込みを延期することで、ユーザーが決して見ることのないリソースの読み込みを回避でき、帯域幅と処理能力を節約できます。
初期ロード時間の改善: 必要になるまでコンポーネントを延期することで、アプリケーションの最も重要な部分のみが最初にロードされるようになります。これにより、初期ロード時間が短縮され、アプリケーションの体感的なパフォーマンスが向上し、より速く、より応答性が高く感じられるようになります。 Angular は、延期されるコンポーネントに対して個別のバンドルを作成するため、メイン バンドルのサイズも削減されます。
ユーザー エクスペリエンスの強化: コンテンツが表示される直前にコンテンツを読み込むことで、ユーザー エクスペリエンスがよりスムーズでシームレスになります。この手法は、ユーザーがスクロールするときにコンテンツを読み込むことでアプリケーションの動作が遅くなるのを防ぐことができる、長いスクロールのページに特に役立ちます。
低電力デバイスでのパフォーマンスの向上: 処理能力が限られているデバイスやネットワーク接続が遅いデバイスは、遅延読み込みから大きなメリットを得ることができます。必要なコンポーネントのみをロードすることで、これらのデバイスはアプリケーションをより効率的に処理でき、さまざまなデバイスのユーザーに優れたエクスペリエンスを提供します。
これは、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> }
生成されたバンドルを見ると、画像コンポーネントに独自のチャンクがあることがわかります。
ページがロードされると、ネットワーク タブで、このバンドルが実行時にロードされることがわかります。
ユーザーエクスペリエンスを向上させるために、いくつかのオプションが利用可能です。このセクションでは、それらのいくつかについて説明します。
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:
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.
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 と遅延読み込みによる Angular パフォーマンスの向上の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。