การวิเคราะห์ประสิทธิภาพด้วยแท็บ Performance ของ Vue DevTools
การบันทึกการอัปเดตคอมโพเนนต์ การค้นหาการเรนเดอร์ซ้ำที่ไม่จำเป็น และเวลาการทำงานของคอมโพเนนต์
การวิเคราะห์ประสิทธิภาพด้วยแท็บ Performance ของ Vue DevTools เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุใดจึงทำโปรไฟล์
ก่อนปรับปรุงประสิทธิภาพ คุณต้องทราบก่อนว่าเวลาใช้ไปกับส่วนใด Vue DevTools มีมุมมองประสิทธิภาพ/ไทม์ไลน์ที่บันทึกการเรนเดอร์คอมโพเนนต์ เพื่อให้คุณค้นหางานที่สูญเปล่าแทนการคาดเดา
การติดตั้ง Vue DevTools
ติดตั้งส่วนขยายเบราว์เซอร์หรือเรียกใช้แอปแบบแยก ในโปรเจกต์ Vite ปลั๊กอิน vite-plugin-vue-devtools จะเพิ่มเครื่องมือตรวจสอบภายในแอป
npm install -D vite-plugin-vue-devtoolsการเริ่มบันทึก
เปิดแท็บไทม์ไลน์/ประสิทธิภาพของ DevTools แล้วกดบันทึก จากนั้นโต้ตอบกับแอปของคุณ หยุดการบันทึกเพื่อเก็บกิจกรรมการเรนเดอร์ของช่วงเวลาดังกล่าว
ไทม์ไลน์การเรนเดอร์คอมโพเนนต์
การเรนเดอร์คอมโพเนนต์แต่ละครั้งจะปรากฏเป็นเหตุการณ์บนไทม์ไลน์ คุณสามารถดูได้ว่าคอมโพเนนต์เรนเดอร์ใหม่เมื่อใด และใช้เวลาเรนเดอร์นานเท่าใด
กราฟการคอมมิต
การคอมมิตคือการส่งการอัปเดตชุดหนึ่งไปยัง DOM กราฟการคอมมิตจะแสดงการคอมมิตแต่ละครั้งและคอมโพเนนต์ที่เรนเดอร์ในครั้งนั้น ทำให้คุณมองเห็นการคอมมิตที่กระทบคอมโพเนนต์มากกว่าที่คาดไว้ได้
แผนภูมิเปลวไฟแสดงเวลาของคอมโพเนนต์
แผนภูมิเปลวไฟจะแสดงระยะเวลาการเรนเดอร์ของคอมโพเนนต์แม่และคอมโพเนนต์ลูกซ้อนกัน แถบที่กว้างหมายถึงการเรนเดอร์ที่ช้า ส่วนกองแถบที่ลึกแสดงให้เห็นว่าการเรนเดอร์ส่งต่อเป็นทอด ๆ ไปทั่วทั้งแผนผัง
การระบุการเรนเดอร์ที่สูญเปล่า
การเรนเดอร์ที่สูญเปล่าคือการที่คอมโพเนนต์เรนเดอร์ใหม่แต่สร้างผลลัพธ์เดิม เหตุการณ์เหล่านี้จะปรากฏเป็นเหตุการณ์การเรนเดอร์ซ้ำที่ผลลัพธ์ไม่ได้เปลี่ยนแปลง DOM
ผลลัพธ์เดิม การเรนเดอร์ใหม่
สาเหตุที่พบบ่อยคือการส่งออบเจ็กต์ที่สร้างใหม่หรือฟังก์ชันลูกศรแบบเขียนในบรรทัดเป็นพร็อพในทุกครั้งที่เรนเดอร์ ทำให้การจดจำผลลัพธ์ใช้ไม่ได้ คอมโพเนนต์ลูกจึงเรนเดอร์ใหม่ แม้ว่าผลลัพธ์ที่มองเห็นจะเหมือนเดิมทุกประการ
<!-- new object every parent render forces child update -->
<Child :config="{ mode: 'a' }" />แก้ไขด้วยการอ้างอิงที่คงที่
ย้ายค่าคงที่ออกมาไว้ภายนอก หรือครอบข้อมูลที่คำนวณแล้วด้วย computed เพื่อให้ส่งการอ้างอิงเดิมในทุกครั้งที่เรนเดอร์
const config = { mode: "a" };
// or: const config = computed(() => ({ mode: mode.value }));เชื่อมโยงกับการโต้ตอบ
ไทม์ไลน์ยังบันทึกเหตุการณ์จากเมาส์และแป้นพิมพ์ด้วย ให้จับคู่การคอมมิตที่ใช้เวลานานกับการโต้ตอบที่เป็นตัวกระตุ้น เพื่อค้นหาเส้นทางการทำงานของโค้ดที่ต้องปรับปรุงได้อย่างแม่นยำ
จำนวนครั้งที่คอมโพเนนต์เรนเดอร์ในตัวตรวจสอบ
ตัวตรวจสอบคอมโพเนนต์สามารถเน้นคอมโพเนนต์ขณะที่มีการอัปเดตได้ การดูตัวนับกะพริบทุกครั้งที่สถานะอื่นเปลี่ยนแปลง จะเผยให้เห็นการเรนเดอร์เกินความจำเป็นได้ทันที
ตรวจสอบอย่างรวดเร็ว
กราฟการคอมมิตในแท็บประสิทธิภาพแสดงถึงอะไร
สรุปทบทวน
ใช้แท็บประสิทธิภาพ/ไทม์ไลน์ของ Vue DevTools เพื่อบันทึกการเรนเดอร์ กราฟการคอมมิตแสดงการล้าง DOM แต่ละครั้งและคอมโพเนนต์ที่เรนเดอร์ ส่วนแผนภูมิเปลวไฟจะแสดงการเรนเดอร์ที่ใช้เวลานาน ให้มองหาการเรนเดอร์ที่สูญเปล่า ซึ่งคือคอมโพเนนต์ที่เรนเดอร์ใหม่โดยผลลัพธ์ไม่เปลี่ยนแปลง และมักเกิดจากการอ้างอิงพร็อพที่ไม่คงที่ จากนั้นแก้ไขด้วยค่าคงที่ที่ย้ายออกมาไว้ภายนอกหรือ computed
คำถามที่พบบ่อย
บทเรียน “การวิเคราะห์ประสิทธิภาพด้วยแท็บ Performance ของ Vue DevTools” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การวิเคราะห์ประสิทธิภาพด้วยแท็บ Performance ของ Vue DevTools” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การวิเคราะห์ประสิทธิภาพด้วยแท็บ Performance ของ Vue DevTools”
การบันทึกการอัปเดตคอมโพเนนต์ การค้นหาการเรนเดอร์ซ้ำที่ไม่จำเป็น และเวลาการทำงานของคอมโพเนนต์ คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การวิเคราะห์ประสิทธิภาพด้วยแท็บ Performance ของ Vue DevTools” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- v-memo สำหรับการจดจำเทมเพลต
- การวิเคราะห์ประสิทธิภาพด้วยแท็บ Performance ของ Vue DevTools
- การเลื่อนเสมือนสำหรับรายการขนาดใหญ่
- Web Worker กับ Vue