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

Connor Clark
Connor Clark
X GitHub

เผยแพร่: 8 ต.ค. 2025

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

DOM Tree ที่ซับซ้อนไม่ได้เป็นปัญหาด้านประสิทธิภาพในตัวของมันเอง แต่เป็นอาการของรูปแบบการออกแบบที่ใช้การซ้อนองค์ประกอบที่ไม่จำเป็น

ข้อมูลเชิงลึกนี้พิจารณา DOM ทั้งหมด รวมถึงภายในรูท Shadow โดยจะไม่สนใจโหนด DOM ที่ไม่ใช่องค์ประกอบด้วย และจะไม่สนใจเนื้อหา <iframe> ด้วย

สิ่งที่ควรพิจารณามีดังนี้

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

วิธีส่งต่อข้อมูลเชิงลึกนี้

ข้อมูลเชิงลึกนี้จะล้มเหลวก็ต่อเมื่อมีการคำนวณเลย์เอาต์หรือรูปแบบใหม่ขนาดใหญ่ที่ใช้เวลานานกว่า 40 มิลลิวินาที

  • การอัปเดตเลย์เอาต์ขนาดใหญ่เกี่ยวข้องกับออบเจ็กต์เลย์เอาต์มากกว่า 100 รายการ (ซึ่งโดยประมาณคือองค์ประกอบ)
  • การคำนวณรูปแบบใหม่ขนาดใหญ่ส่งผลต่อองค์ประกอบมากกว่า 300 รายการ

เมื่อเกิดข้อผิดพลาด ข้อมูลเชิงลึกนี้จะไฮไลต์เหตุการณ์เหล่านี้ในแผนภูมิเปลวไฟในแผงประสิทธิภาพ

วิธีลดค่าใช้จ่ายของกิจกรรมเหล่านี้

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

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

Angular

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

โต้ตอบ

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

ข้อมูลอ้างอิงเพิ่มเติม