แผนผัง DOM ขนาดใหญ่อาจทำให้ประสิทธิภาพของหน้าเว็บช้าลงได้หลายวิธี ดังนี้
ประสิทธิภาพของเครือข่ายและประสิทธิภาพการโหลด
โครงสร้าง DOM ขนาดใหญ่มักมีโหนดจำนวนมากที่มองไม่เห็นเมื่อผู้ใช้โหลดหน้าเว็บเป็นครั้งแรก ซึ่งเพิ่มค่าใช้จ่ายสำหรับข้อมูลของผู้ใช้โดยไม่จำเป็นและทำให้โหลดช้าลง
ประสิทธิภาพรันไทม์
เมื่อผู้ใช้และสคริปต์โต้ตอบกับหน้าเว็บ เบราว์เซอร์ต้องคํานวณตำแหน่งและการจัดรูปแบบโหนดใหม่อยู่เสมอ แผนผัง DOM ขนาดใหญ่ร่วมกับกฎของรูปแบบที่ซับซ้อนอาจทำให้การแสดงผลช้าลงอย่างมาก
ประสิทธิภาพของหน่วยความจำ
หาก JavaScript ใช้ตัวเลือกข้อความค้นหาทั่วไป เช่น
document.querySelectorAll('li')
คุณอาจจัดเก็บการอ้างอิงไปยังโหนดจำนวนมากโดยไม่รู้ตัว ซึ่งอาจทำให้หน่วยความจำของอุปกรณ์ของผู้ใช้มากเกินไป
วิธีที่การตรวจสอบขนาด DOM ของ Lighthouse ล้มเหลว
Lighthouse รายงานองค์ประกอบ DOM ทั้งหมดของหน้า, ความลึก DOM สูงสุดของหน้าเว็บ และองค์ประกอบย่อยสูงสุด ดังนี้
Lighthouse จะแจ้งหน้าเว็บที่มีต้นไม้ DOM ซึ่งมีลักษณะดังนี้
- เตือนเมื่อองค์ประกอบร่างกายมีโหนดมากกว่า 800 โหนด
- ข้อผิดพลาดเมื่อองค์ประกอบเนื้อหามีโหนดมากกว่า 1,400 โหนด
วิธีเพิ่มประสิทธิภาพขนาด DOM
โดยทั่วไป ให้มองหาวิธีสร้างโหนด DOM เฉพาะเมื่อจำเป็น และทำลายโหนดเมื่อไม่ต้องการใช้งานอีกต่อไป
หากคุณกำลังจัดส่ง DOM Tree ขนาดใหญ่ ให้ลองโหลดหน้าเว็บและสังเกตด้วยตนเองว่าแสดงโหนดใดอยู่ คุณอาจนำโหนดที่ไม่แสดงออกจากเอกสารที่โหลดในตอนแรก แล้วสร้างโหนดดังกล่าวหลังจากการโต้ตอบที่เกี่ยวข้องของผู้ใช้เท่านั้น เช่น การเลื่อนหรือการคลิกปุ่ม
หากคุณสร้างโหนด DOM ขณะรันไทม์ เบรกพอยท์การเปลี่ยนแปลง DOM ของการแก้ไขย่อยจะช่วยให้คุณระบุได้ว่ามีการสร้างโหนดเมื่อใด
หากคุณหลีกเลี่ยงแผนผัง DOM ขนาดใหญ่ไม่ได้ อีกแนวทางหนึ่งในการปรับปรุงประสิทธิภาพการแสดงผลคือการลดความซับซ้อนของตัวเลือก CSS ดูข้อมูลเพิ่มเติมได้ที่การลดขอบเขตและความซับซ้อนของการคำนวณรูปแบบของ Google
คำแนะนำเฉพาะกลุ่ม
Angular
หากคุณแสดงรายการจำนวนมาก ให้ใช้การเลื่อนเสมือนจริงด้วย Component Dev Kit (CDK)
โต้ตอบ
- ใช้ไลบรารี "การสร้างกรอบเวลา" เช่น
react-window
เพื่อลดจำนวนโหนดของ DOM ที่สร้างขึ้นหากคุณแสดงผลองค์ประกอบซ้ำกันหลายรายการในหน้านั้น - ลดการแสดงผลซ้ำที่ไม่จำเป็นโดยใช้
shouldComponentUpdate
,PureComponent
หรือReact.memo
- ข้ามเอฟเฟกต์จนกว่าทรัพยากร Dependency บางอย่างจะเปลี่ยนไปหากคุณใช้ฮุก
Effect
เพื่อปรับปรุงประสิทธิภาพของรันไทม์