การระบุและแก้ไขคอขวด
วิเคราะห์และแก้ไขคอขวดด้านประสิทธิภาพ
การระบุและแก้ไขคอขวด เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
วัดผลก่อนปรับปรุงประสิทธิภาพ
การคาดเดาว่าส่วนใดทำให้แอปช้าจะทำให้เสียเวลา แนวทางแบบมืออาชีพคือวัดผลก่อน ค้นหาคอขวดที่แท้จริง แก้ไข แล้ววัดผลอีกครั้ง Vue DevTools และเครื่องมือวิเคราะห์ประสิทธิภาพของเบราว์เซอร์คือเครื่องมือหลักของคุณ
Vue DevTools
ส่วนขยายเบราว์เซอร์ Vue DevTools ช่วยให้คุณตรวจสอบโครงสร้างต้นไม้ของคอมโพเนนต์ สถานะแบบตอบสนอง และเหตุการณ์ต่าง ๆ แท็บประสิทธิภาพจะบันทึกว่าคอมโพเนนต์ใช้เวลาแสดงผลนานเท่าใด เพื่อให้คุณมองเห็นคอมโพเนนต์ที่ช้าได้
การใช้แท็บประสิทธิภาพ
เริ่มบันทึก ใช้งานแอปของคุณ แล้วหยุดการบันทึก DevTools จะแสดงเส้นเวลาของการแสดงผลคอมโพเนนต์ คอมโพเนนต์ที่มีแถบการแสดงผลยาวหรือเกิดขึ้นบ่อยคือจุดที่ควรตรวจสอบเป็นอันดับแรก
เครื่องมือวิเคราะห์ประสิทธิภาพของเบราว์เซอร์
แผงประสิทธิภาพของ DevTools ในเบราว์เซอร์จะบันทึกทั้งหน้าเว็บ ได้แก่ การเรียกใช้สคริปต์ การแสดงผล และการวาด Long บล็อกการเรียกใช้สคริปต์สีเหลืองมักชี้ไปที่งาน JavaScript ที่มีค่าใช้จ่ายสูงระหว่างการแสดงผล
การตรวจจับการแสดงผลซ้ำมากเกินไป
คอขวดที่พบได้บ่อยคือคอมโพเนนต์แสดงผลซ้ำบ่อยกว่าที่คาดไว้อย่างมาก หากการเปลี่ยนแปลงเล็กน้อยทำให้โครงสร้างย่อยขนาดใหญ่แสดงผลซ้ำ ให้ตรวจหาสถานะแบบตอบสนองที่ใช้ร่วมกันหรือขอบเขตคอมโพเนนต์ที่ขาดหายไป
การแสดงผลรายการขนาดใหญ่
การแสดงผลโหนด DOM หลายพันโหนดพร้อมกันทำได้ช้าและใช้หน่วยความจำมาก หากรายการมีหลายร้อยหรือหลายพันแถว ตัว DOM เองจะกลายเป็นคอขวด ไม่ใช่ตรรกะข้อมูลของคุณ
<!-- rendering 10,000 rows like this is expensive -->
<li v-for="row in tenThousandRows" :key="row.id">{{ row.name }}</li>แนวคิดการเลื่อนเสมือน
การเลื่อนเสมือนจะแสดงผลเฉพาะแถวที่มองเห็นในพื้นที่แสดงผลขณะนั้น รวมถึงบัฟเฟอร์ขนาดเล็ก และนำโหนด DOM กลับมาใช้ใหม่ขณะที่ผู้ใช้เลื่อน รายการที่มี 10,000 รายการจะมีโหนดใน DOM เพียงไม่กี่สิบโหนด
การใช้ไลบรารีรายการเสมือน
ไลบรารีอย่าง vue-virtual-scroller จะจัดการเรื่องนี้ให้คุณ คุณส่งข้อมูลทั้งหมดและความสูงของแถวให้ไลบรารี จากนั้นไลบรารีจะจัดการการแสดงเฉพาะช่วงที่เหมาะสม
import { RecycleScroller } from "vue-virtual-scroller"
// in template:
// <RecycleScroller :items="rows" :item-size="40" v-slot="{ item }">
// <div>{{ item.name }}</div>
// </RecycleScroller>ข้อผิดพลาดจากการแสดงผลซ้ำที่เกี่ยวข้องกับคีย์
การใช้อินเด็กซ์ของอาร์เรย์เป็น :key ในรายการแบบไดนามิกอาจทำให้ Vue นำโหนด DOM กลับมาใช้ผิดเมื่อมีการเพิ่ม ลบ หรือจัดลำดับรายการใหม่ ส่งผลให้เนื้อหาผิดและเกิดการแสดงผลซ้ำมากขึ้น
<!-- buggy: index keys break on reorder -->
<li v-for="(item, i) in items" :key="i">{{ item.name }}</li>แก้ไขข้อผิดพลาดของคีย์
ใช้ตัวระบุที่คงที่และไม่ซ้ำกันเป็นคีย์ เพื่อให้ Vue จับคู่องค์ประกอบกับข้อมูลได้ถูกต้องในการอัปเดตแต่ละครั้ง
<!-- correct: stable id key -->
<li v-for="item in items" :key="item.id">{{ item.name }}</li>กระบวนการทำงานที่ใช้ได้จริง
นำทุกอย่างมารวมกัน: บันทึกการทำงานด้วย DevTools ค้นหาคอมโพเนนต์ที่ช้าที่สุด ตรวจสอบการแสดงผลซ้ำมากเกินไปหรือรายการขนาดใหญ่ ใช้วิธีแก้ไขที่เหมาะสม (การแคชค่าที่คำนวณ การจดจำผลลัพธ์ด้วย v-memo การเลื่อนเสมือน และคีย์ที่คงที่) แล้ววัดผลอีกครั้งเพื่อยืนยันการปรับปรุง
ตรวจสอบความเข้าใจ
ทดสอบความรู้ของคุณเกี่ยวกับการค้นหาคอขวด
สรุปทบทวน
ปรับปรุงประสิทธิภาพโดยเริ่มจากการวัดผลด้วย Vue DevTools และเครื่องมือวิเคราะห์ประสิทธิภาพของเบราว์เซอร์ จากนั้นมุ่งแก้คอขวดที่แท้จริง ได้แก่ การแสดงผลซ้ำมากเกินไป รายการขนาดใหญ่ (แก้ด้วยการเลื่อนเสมือน) และข้อผิดพลาดจากการใช้คีย์เป็นอินเด็กซ์ (แก้ด้วยคีย์ที่คงที่) วัดผลอีกครั้งเสมอเพื่อยืนยันผลลัพธ์ ถัดไป คุณจะเรียนรู้วิธีทดสอบแอปพลิเคชัน Vue
คำถามที่พบบ่อย
บทเรียน “การระบุและแก้ไขคอขวด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การระบุและแก้ไขคอขวด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การระบุและแก้ไขคอขวด”
วิเคราะห์และแก้ไขคอขวดด้านประสิทธิภาพ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน
บทเรียน “การระบุและแก้ไขคอขวด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การโหลดแบบขี้เกียจและการแยกโค้ด
- เทคนิคการจดจำผลลัพธ์
- การระบุและแก้ไขคอขวด