Meningkatkan Prestasi Sudut dengan @defer dan Lazy Loading

pengenalan

Ciri @defer baharu dalam Angular ialah sebahagian daripada peningkatan rangka kerja untuk meningkatkan prestasi, terutamanya dalam pemuatan malas dan pengoptimuman pemaparan. Berikut ialah gambaran keseluruhan pantas ciri @defer dan blok @placeholder dan @loading.

Gambaran keseluruhan tentang @defer

Tujuan

• Ciri @defer direka untuk melambatkan pemuatan dan pemaparan komponen atau bahagian aplikasi sehingga ia diperlukan. Ini boleh meningkatkan masa muat awal aplikasi dengan ketara dan meningkatkan pengalaman pengguna.

Penggunaan

• @defer boleh digunakan pada komponen atau bahagian templat untuk menunjukkan bahawa ia harus dimuatkan dengan malas. Ini amat berguna untuk aplikasi besar atau bahagian aplikasi yang tidak kelihatan atau perlu serta-merta apabila pengguna mula-mula mendarat di halaman.

Sintaks

• Sintaks untuk menggunakan @defer adalah mudah dan disepadukan dengan lancar dengan sintaks templat sedia ada Angular. Berikut ialah contoh cara ia boleh digunakan:

  @defer {
  <large-component />
  }

Kelebihan

• Pengoptimuman Prestasi: Dengan menangguhkan pemuatan bahagian tertentu aplikasi, masa pemuatan awal dapat dikurangkan, membawa kepada pengalaman pengguna yang lebih pantas dan responsif.
• Pengurusan Sumber: Menangguhkan pemuatan komponen membantu dalam pengurusan sumber yang lebih baik, kerana sumber hanya digunakan apabila perlu.
• Pengalaman Pengguna: Ia meningkatkan pengalaman pengguna dengan memuatkan kandungan kritikal terlebih dahulu dan menangguhkan kandungan yang kurang kritikal sehingga ia diperlukan.

Integrasi dengan Ekosistem Angular

• Ciri @defer disepadukan dengan baik dengan ciri dan alatan Sudut yang lain, membolehkan pembangun memanfaatkan pemuatan malas, mengubah strategi pengesanan dan teknik pengoptimuman prestasi lain dengan cara yang padu.

Prospek Masa Depan

• Memandangkan Angular terus berkembang, ciri @defer berkemungkinan melihat peningkatan dan pengoptimuman selanjutnya. Pembangun boleh mengharapkan kawalan yang lebih diperhalusi tentang cara dan masa bahagian aplikasi mereka dimuatkan dan dipaparkan.

@defer dan IntersectionObserver

Di bawah tudung, @defer menggunakan API IntersectionObserver. API ini membolehkan anda melihat perubahan dalam persilangan elemen sasaran dengan elemen nenek moyang atau tempat pandang dokumen peringkat atas. Dengan menangguhkan pemuatan komponen sehingga mereka hampir memasuki port pandangan, anda boleh mengelak daripada memuatkan sumber yang mungkin tidak pernah dilihat oleh pengguna, sekali gus menjimatkan lebar jalur dan kuasa pemprosesan.

Faedah Lain IntersectionObserver

Masa Muatan Permulaan yang Diperbaiki: Menangguhkan komponen sehingga ia diperlukan memastikan bahawa hanya bahagian paling kritikal aplikasi dimuatkan pada mulanya. Ini mengurangkan masa pemuatan awal dan meningkatkan prestasi aplikasi yang dirasakan, menjadikannya lebih pantas dan lebih responsif. Angular akan membuat berkas berasingan untuk komponen yang ditangguhkan, dengan itu turut mengurangkan saiz berkas utama anda.

Pengalaman Pengguna Dipertingkat: Dengan memuatkan kandungan sejurus sebelum ia kelihatan, anda boleh memastikan pengalaman yang lebih lancar dan lancar untuk pengguna. Teknik ini boleh memberi manfaat terutamanya untuk halaman yang menatal panjang, yang memuatkan kandungan semasa pengguna menatal boleh menghalang aplikasi daripada menjadi lembap.

Prestasi Lebih Baik pada Peranti Kuasa Rendah: Peranti dengan kuasa pemprosesan terhad atau sambungan rangkaian yang perlahan boleh mendapat manfaat dengan ketara daripada pemuatan tertunda. Dengan hanya memuatkan komponen yang diperlukan, peranti ini boleh mengendalikan aplikasi dengan lebih cekap, memberikan pengalaman yang lebih baik untuk pengguna pada pelbagai jenis peranti.

Contoh

Menggunakan @defer tanpa Sebarang Pilihan

Berikut ialah contoh yang menunjukkan cara menggunakan @defer dalam aplikasi Sudut. Pertama, buat komponen yang memuatkan imej. Menggunakan komponen kendiri adalah keperluan untuk @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");
}

Dan di sini kami menggunakan @defer tanpa sebarang pilihan.

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

Sekarang, melihat berkas yang dihasilkan, kita dapat melihat bahawa komponen imej mempunyai bahagiannya sendiri.

Dalam tab rangkaian, apabila halaman dimuatkan, kita dapat melihat bahawa berkas ini kini dimuatkan pada masa jalan.

Menggunakan @defer dengan Pilihan

Beberapa pilihan tersedia untuk meningkatkan pengalaman pengguna. Dalam bahagian ini, kita akan meneliti sebahagian daripadanya.

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.

Atas ialah kandungan terperinci Meningkatkan Prestasi Sudut dengan @defer dan Lazy Loading. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!