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