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