Pemuatan Tertangguh dengan @defer
Muat bahagian templat secara malas dengan @defer.
Pemuatan Tertangguh dengan @defer ialah pelajaran Angular Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Angular Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Pemuatan Tertunda dengan defer
Blok at-defer memuatkan bahagian templat dan kebergantungannya secara malas, sekali gus meningkatkan prestasi pemuatan awal. Kandungan tertunda dipecahkan kepada bahagian berasingan.
Sintaks defer Asas
Bungkus kandungan dalam blok at-defer. Secara lalai, kandungan itu dimuatkan apabila pelayar tidak sibuk.
// @defer {
// <app-heavy-chart></app-heavy-chart>
// }Sebab Menggunakan Defer
Menangguhkan komponen berat atau komponen di bawah lipatan memastikan himpunan awal kekal kecil dan paparan pertama berlaku dengan pantas. Komponen hanya dimuatkan apabila benar-benar diperlukan.
Blok placeholder
Blok at-placeholder memaparkan kandungan sebelum blok tertunda dicetuskan.
// @defer {
// <app-comments></app-comments>
// } @placeholder {
// <p>Comments will load soon</p>
// }Blok pemuatan
Blok at-loading dipaparkan semasa bahagian tertunda sedang diambil.
// @defer {
// <app-comments></app-comments>
// } @loading {
// <p>Loading comments...</p>
// }Blok ralat
Blok at-error dipaparkan jika pemuatan kebergantungan tertunda gagal.
// @defer {
// <app-comments></app-comments>
// } @error {
// <p>Failed to load comments</p>
// }Pencetus
Anda mengawal masa pemuatan bermula dengan pencetus dalam klausa on, seperti on idle, on viewport, on interaction, on hover atau on timer.
// @defer (on viewport) {
// <app-chart></app-chart>
// }on viewport
Pencetus on viewport memuatkan kandungan apabila kandungan itu ditatal sehingga kelihatan, sesuai untuk bahagian yang berada di bawah lipatan.
on interaction dan on hover
on interaction memuatkan kandungan apabila pengguna mengklik atau memfokuskan ruang letak; on hover memuatkannya apabila penuding berada di atas ruang letak itu.
// @defer (on interaction) {
// <app-editor></app-editor>
// } @placeholder {
// <button>Open editor</button>
// }Syarat when
Anda juga boleh mencetuskan pemuatan berdasarkan ungkapan boolean menggunakan when, dan pemuatan akan berlaku apabila ungkapan itu menjadi benar.
// @defer (when shouldLoad()) {
// <app-details></app-details>
// }Prapengambilan
Anda boleh melakukan prapengambilan bahagian tertunda secara berasingan daripada pemaparan, contohnya prapengambilan ketika idle, supaya bahagian itu sudah tersedia sebelum pencetus pemaparan diaktifkan.
// @defer (on viewport; prefetch on idle) {
// <app-chart></app-chart>
// }Semakan pantas: defer
Mencetuskan kandungan tertunda.
Imbas kembali: Pemuatan tertunda
Anda telah mempelajari blok at-defer untuk pemuatan malas, bersama-sama blok at-placeholder, at-loading dan at-error, serta pencetus seperti on idle, on viewport, on interaction, on hover, on timer dan when, termasuk prapengambilan. Anda telah menamatkan kursus Aliran Kawalan Terbina Dalam.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 38
- Pelajaran
- 144
Soalan Lazim
Adakah pelajaran “Pemuatan Tertangguh dengan @defer” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Angular Academy, termasuk “Pemuatan Tertangguh dengan @defer”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Angular Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Pemuatan Tertangguh dengan @defer”?
Muat bahagian templat secara malas dengan @defer. Anda berlatih Angular Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Angular Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Angular Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “Pemuatan Tertangguh dengan @defer” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Angular Academy ini?
Ya. Setiap pelajaran Angular Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Paparan Bersyarat dengan @if
- Pengulangan dengan @for
- Pertukaran dengan @switch
- Pemuatan Tertangguh dengan @defer