หลีกเลี่ยง DOM ที่มีขนาดใหญ่เกินไป

แผนผัง DOM ขนาดใหญ่อาจทำให้ประสิทธิภาพของหน้าเว็บช้าลงได้หลายวิธี ดังนี้

  • ประสิทธิภาพของเครือข่ายและประสิทธิภาพการโหลด

    โครงสร้าง DOM ขนาดใหญ่มักมีโหนดจำนวนมากที่มองไม่เห็นเมื่อผู้ใช้โหลดหน้าเว็บเป็นครั้งแรก ซึ่งเพิ่มค่าใช้จ่ายสำหรับข้อมูลของผู้ใช้โดยไม่จำเป็นและทำให้โหลดช้าลง

  • ประสิทธิภาพรันไทม์

    เมื่อผู้ใช้และสคริปต์โต้ตอบกับหน้าเว็บ เบราว์เซอร์ต้องคํานวณตำแหน่งและการจัดรูปแบบโหนดใหม่อยู่เสมอ แผนผัง DOM ขนาดใหญ่ร่วมกับกฎของรูปแบบที่ซับซ้อนอาจทำให้การแสดงผลช้าลงอย่างมาก

  • ประสิทธิภาพของหน่วยความจำ

    หาก JavaScript ใช้ตัวเลือกข้อความค้นหาทั่วไป เช่น document.querySelectorAll('li') คุณอาจจัดเก็บการอ้างอิงไปยังโหนดจำนวนมากโดยไม่รู้ตัว ซึ่งอาจทำให้หน่วยความจำของอุปกรณ์ของผู้ใช้มากเกินไป

วิธีที่การตรวจสอบขนาด DOM ของ Lighthouse ล้มเหลว

Lighthouse รายงานองค์ประกอบ DOM ทั้งหมดของหน้า, ความลึก DOM สูงสุดของหน้าเว็บ และองค์ประกอบย่อยสูงสุด ดังนี้

ภาพหน้าจอของ Lighthouse หลีกเลี่ยงการตรวจสอบ 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 เพื่อปรับปรุงประสิทธิภาพของรันไทม์

แหล่งข้อมูล