การโหลดแบบเลื่อนออกไปด้วย @defer
โหลดส่วนของเทมเพลตเมื่อจำเป็นด้วย @defer
การโหลดแบบเลื่อนออกไปด้วย @defer เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การโหลดแบบเลื่อนเวลาด้วย defer
บล็อก at-defer จะโหลดบางส่วนของแม่แบบและสิ่งที่ต้องพึ่งพาแบบขี้เกียจ ช่วยเพิ่มประสิทธิภาพการโหลดครั้งแรก เนื้อหาที่เลื่อนเวลาจะถูกแยกเป็นชุดไฟล์ส่วนหนึ่งต่างหาก
ไวยากรณ์ defer พื้นฐาน
ห่อเนื้อหาไว้ในบล็อก at-defer โดยค่าเริ่มต้น บล็อกนี้จะโหลดเมื่อเบราว์เซอร์ไม่มีงานเร่งด่วน
// @defer {
// <app-heavy-chart></app-heavy-chart>
// }เหตุผลที่ใช้ defer
การเลื่อนเวลาคอมโพเนนต์ขนาดใหญ่หรือคอมโพเนนต์ที่อยู่ถัดลงไปนอกพื้นที่มองเห็น ช่วยให้ชุดไฟล์เริ่มต้นมีขนาดเล็กและการแสดงผลครั้งแรกเร็วขึ้น คอมโพเนนต์จะโหลดเมื่อจำเป็นต้องใช้จริงเท่านั้น
บล็อก placeholder
บล็อก at-placeholder จะแสดงเนื้อหาก่อนที่บล็อกแบบเลื่อนการโหลดจะถูกเรียกใช้
// @defer {
// <app-comments></app-comments>
// } @placeholder {
// <p>Comments will load soon</p>
// }บล็อกการโหลด
บล็อก at-loading จะแสดงขึ้นขณะกำลังดึงส่วนข้อมูลที่เลื่อนการโหลดไว้
// @defer {
// <app-comments></app-comments>
// } @loading {
// <p>Loading comments...</p>
// }บล็อกข้อผิดพลาด
บล็อก at-error จะแสดงผลเมื่อการโหลดส่วนการพึ่งพาที่เลื่อนการโหลดไว้ล้มเหลว
// @defer {
// <app-comments></app-comments>
// } @error {
// <p>Failed to load comments</p>
// }ตัวเรียกใช้
คุณควบคุมเวลาเริ่มโหลดได้ด้วยตัวเรียกใช้ในส่วนคำสั่ง on เช่น on idle, on viewport, on interaction, on hover หรือ on timer
// @defer (on viewport) {
// <app-chart></app-chart>
// }on viewport
ตัวเรียกใช้ on viewport จะโหลดเนื้อหาเมื่อเนื้อหาเลื่อนเข้ามาอยู่ในมุมมอง เหมาะอย่างยิ่งสำหรับส่วนที่อยู่ถัดลงไปนอกหน้าจอ
on interaction และ on hover
on interaction จะโหลดเมื่อผู้ใช้คลิกหรือเลื่อนโฟกัสไปยังตัวแทน ส่วน on hover จะโหลดเมื่อพอยน์เตอร์วางอยู่เหนือตัวแทน
// @defer (on interaction) {
// <app-editor></app-editor>
// } @placeholder {
// <button>Open editor</button>
// }เงื่อนไข when
คุณยังสามารถเรียกใช้ตามนิพจน์บูลีนด้วย when ได้ โดยจะเริ่มโหลดเมื่อนิพจน์นั้นมีค่าเป็นจริง
// @defer (when shouldLoad()) {
// <app-details></app-details>
// }การดึงข้อมูลล่วงหน้า
คุณสามารถดึงส่วนข้อมูลที่เลื่อนการโหลดไว้ล่วงหน้าแยกจากการแสดงผลได้ เช่น ดึงข้อมูลล่วงหน้าเมื่อไม่มีกิจกรรม เพื่อให้พร้อมก่อนที่ตัวเรียกใช้การแสดงผลจะทำงาน
// @defer (on viewport; prefetch on idle) {
// <app-chart></app-chart>
// }ตรวจสอบอย่างรวดเร็ว: defer
การเรียกใช้เนื้อหาที่เลื่อนการโหลดไว้
สรุป: การโหลดแบบเลื่อนการโหลด
คุณได้เรียนรู้บล็อก at-defer สำหรับการโหลดแบบขี้เกียจ ซึ่งประกอบด้วยบล็อก at-placeholder, at-loading และ at-error รวมถึงตัวเรียกใช้ on idle, on viewport, on interaction, on hover, on timer และ when ตลอดจนการดึงข้อมูลล่วงหน้า คุณเรียนจบหลักสูตรโฟลว์ควบคุมในตัวแล้ว
คำถามที่พบบ่อย
บทเรียน “การโหลดแบบเลื่อนออกไปด้วย @defer” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การโหลดแบบเลื่อนออกไปด้วย @defer” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การโหลดแบบเลื่อนออกไปด้วย @defer”
โหลดส่วนของเทมเพลตเมื่อจำเป็นด้วย @defer คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การโหลดแบบเลื่อนออกไปด้วย @defer” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การแสดงผลตามเงื่อนไขด้วย @if
- การวนซ้ำด้วย @for
- การสลับด้วย @switch
- การโหลดแบบเลื่อนออกไปด้วย @defer