0Pricing
Angular Academy · บทเรียน

การปรับประสิทธิภาพรายการและการเรนเดอร์

เพิ่มความเร็วให้รายการขนาดใหญ่ด้วยการติดตาม

การปรับประสิทธิภาพรายการและการเรนเดอร์ เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

เหตุใดการแสดงผลรายการจึงสำคัญ

รายการเป็นจุดที่มักทำให้ประสิทธิภาพตกลงมากที่สุด การแสดงผลรายการทั้งหมดใหม่ทุกครั้งที่มีการเปลี่ยนแปลงทำให้เสียงานโดยเปล่าประโยชน์และรีเซ็ตสถานะของ DOM Angular จึงมีเครื่องมือช่วยให้คุณแสดงผลได้อย่างมีประสิทธิภาพ

บล็อก @for

โฟลว์ควบคุมในตัว @for ต้องมีนิพจน์ track เพื่อให้ Angular ระบุรายการแต่ละรายการได้ในระหว่างการอัปเดต

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
}

เหตุใดจึงต้องใช้ track

หากไม่มีเอกลักษณ์ที่คงที่ Angular จะไม่สามารถบอกได้ว่ารายการใดย้ายตำแหน่ง ถูกเพิ่ม หรือถูกลบ track จะจับคู่โหนดที่แสดงผลแต่ละโหนดกับข้อมูล ทำให้สามารถนำ DOM กลับมาใช้แทนการสร้างใหม่

การติดตามด้วยเอกลักษณ์

ใช้คีย์ที่ไม่ซ้ำและคงที่ เช่น id หลีกเลี่ยง track $index กับรายการที่มีการจัดลำดับใหม่ เพราะการเปลี่ยนดัชนีทำให้ DOM เปลี่ยนแปลงโดยไม่จำเป็น

@for (user of users(); track user.id) {
  <app-user-card [user]="user" />
}

กรณีที่เหมาะกับ track $index

หากรายการไม่มี id ที่ไม่ซ้ำกันและไม่มีการจัดลำดับใหม่ เช่น บันทึกที่เพิ่มต่อท้ายเท่านั้น ก็สามารถใช้ track $index ได้

@for (line of logLines(); track $index) {
  <p>{{ line }}</p>
}

trackBy แบบเดิม

เมื่อใช้ *ngFor รุ่นเก่า คุณต้องระบุฟังก์ชัน trackBy ที่ส่งคืนคีย์ซึ่งคงที่

trackById(index: number, item: Item) {
  return item.id;
}

trackBy ในแม่แบบ

อ้างอิงฟังก์ชันในไวยากรณ์ย่อของ *ngFor

<li *ngFor="let item of items; trackBy: trackById">
  {{ item.name }}
</li>

สถานะว่างและกำลังโหลด

@for รองรับบล็อก @empty สำหรับกรณีที่คอลเลกชันว่าง ทำให้ไม่ต้องตรวจสอบด้วย *ngIf เพิ่มเติม

@for (item of items(); track item.id) {
  <li>{{ item.name }}</li>
} @empty {
  <li>No items yet.</li>
}

หลีกเลี่ยงการเรียกฟังก์ชันในการผูกค่า

ฟังก์ชันในแม่แบบจะทำงานทุกครั้งที่มีการตรวจสอบ ให้คำนวณค่าล่วงหน้าไว้ใน signals หรือฟิลด์ที่จดจำค่า แทนการเรียกเมธอดในเนื้อหาของ @for

OnPush + รายการแบบไม่เปลี่ยนรูป

ใช้ OnPush ร่วมกับการสร้างการอ้างอิงอาร์เรย์ใหม่ทุกครั้งที่มีการเปลี่ยนแปลง เมื่อใช้ track อย่างถูกต้อง Angular จะอัปเดตเฉพาะแถวที่เปลี่ยนแปลงจริง

this.items.update(list => [...list, newItem]);

การเลื่อนแบบเสมือน

สำหรับรายการขนาดใหญ่มาก ให้แสดงผลเฉพาะแถวที่มองเห็นด้วย CDK cdk-virtual-scroll-viewport ซึ่งช่วยให้ DOM มีขนาดเล็กไม่ว่าข้อมูลจะมีมากเพียงใด

<cdk-virtual-scroll-viewport itemSize="48">
  <div *cdkVirtualFor="let item of items">
    {{ item.name }}
  </div>
</cdk-virtual-scroll-viewport>

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจของคุณเกี่ยวกับการปรับปรุงประสิทธิภาพรายการ

สรุปทบทวน

คุณได้เรียนรู้การปรับปรุงรายการด้วย @for ... track หรือ trackBy แบบเดิม โดยใช้คีย์ที่คงที่ บล็อก @empty การอัปเดตแบบไม่เปลี่ยนรูปเมื่อใช้ OnPush และการเลื่อนแบบเสมือนสำหรับคอลเลกชันขนาดใหญ่มาก

คำถามที่พบบ่อย

บทเรียน “การปรับประสิทธิภาพรายการและการเรนเดอร์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การปรับประสิทธิภาพรายการและการเรนเดอร์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การปรับประสิทธิภาพรายการและการเรนเดอร์”

เพิ่มความเร็วให้รายการขนาดใหญ่ด้วยการติดตาม คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การปรับประสิทธิภาพรายการและการเรนเดอร์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การตรวจจับการเปลี่ยนแปลงทำงานอย่างไร
  2. การตรวจจับการเปลี่ยนแปลงแบบ OnPush
  3. Angular แบบไร้โซน
  4. การปรับประสิทธิภาพรายการและการเรนเดอร์
← กลับไปที่ Angular Academy