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

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

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

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

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

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

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

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

สาเหตุที่การตรวจสอบขนาด DOM ของ Lighthouse ไม่สำเร็จ

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

การตรวจสอบ Lighthouse หลีกเลี่ยง DOM ที่มีขนาดใหญ่เกินไปซึ่งแสดงองค์ประกอบ DOM ทั้งหมด ความลึก DOM สูงสุด และองค์ประกอบย่อยสูงสุด
Lighthouse จะไฮไลต์รายละเอียดขนาด DOM ที่มากเกินไป

Lighthouse จะแจ้งหน้าเว็บที่มี DOM Tree ดังนี้

  • เตือนเมื่อองค์ประกอบเนื้อหามีโหนดมากกว่า 800 โหนด
  • ข้อผิดพลาดเมื่อองค์ประกอบเนื้อหามีโหนดมากกว่าประมาณ 1,400 รายการ

วิธีเพิ่มประสิทธิภาพขนาด DOM

โดยทั่วไป ให้หาวิธีสร้างโหนด DOM เฉพาะเมื่อจำเป็น และทำลายโหนดเมื่อไม่จำเป็นแล้ว

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

หากคุณสร้างโหนด DOM ที่รันไทม์ เบรกพอยท์การเปลี่ยนแปลง DOM ของการแก้ไข Subtree จะช่วยระบุเวลาที่สร้างโหนดได้

หากหลีกเลี่ยงแผนผัง DOM ขนาดใหญ่ไม่ได้ อีกวิธีหนึ่งในการปรับปรุงประสิทธิภาพการแสดงผลคือการลดความซับซ้อนของตัวเลือก CSS ดูข้อมูลเพิ่มเติมได้ที่ลดขอบเขตและความซับซ้อนของการคำนวณสไตล์ของ Google

ดูรายละเอียดเพิ่มเติมได้ที่บทความขนาด DOM ที่ใหญ่ส่งผลต่อการโต้ตอบอย่างไร และคุณจะทำอะไรได้บ้าง

คำแนะนำเฉพาะสำหรับกองซ้อน

Angular

หากแสดงรายการขนาดใหญ่ ให้ใช้การเลื่อนเสมือนจริงด้วย Component Dev Kit (CDK)

โต้ตอบ

  • ใช้ไลบรารี "การสร้างกรอบเวลา" เช่น react-window เพื่อลดจำนวน โหนดของ DOM ที่สร้างขึ้นให้เหลือน้อยที่สุดหากคุณแสดงผลองค์ประกอบซ้ำกันหลายรายการในหน้านั้น
  • ลดการแสดงผลซ้ำที่ไม่จำเป็นให้เหลือน้อยที่สุดโดยใช้ shouldComponentUpdate PureComponent หรือ React.memo
  • ข้ามเอฟเฟกต์ เฉพาะเมื่อทรัพยากร Dependency บางรายการมีการเปลี่ยนแปลงในกรณีที่คุณใช้ฮุก Effect เพื่อปรับปรุงประสิทธิภาพของรันไทม์

แหล่งข้อมูล