DOM (โมเดลวัตถุเอกสาร) เป็นชื่อทั่วไปของโครงสร้างแบบต้นไม้ของแท็ก HTML ผลกระทบต่อความเร็วเพจคือยิ่งโครงสร้าง HTML ของคุณซับซ้อนมากขึ้นในระหว่างการเรนเดอร์เพจ เพจของคุณก็จะยิ่งช้าลงเท่านั้น

ตามข้อมูลของ Lighthouse ความซับซ้อนของ โครงสร้าง DOM วัดโดยใช้สามเมตริก- หากต้องการระบุจุดอ้างอิงให้เมตริกเหล่านี้:

  • จำนวนแท็กทั้งหมดควรเป็น น้อยกว่า 1500
  • ความลึกของแท็กสูงสุดควรเป็น น้อยกว่า 32
  • แท็กย่อยควรมีจำนวนสูงสุด น้อยกว่า 60

ในตัวอย่างข้างต้น จำนวนแท็กทั้งหมดไม่ดี ความลึกของแท็กสูงสุดนั้นดี แต่จำนวนแท็กย่อยสูงสุดนั้นไม่ดี

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

จุดที่ DOM ที่สูงเกินจริงส่งผลเสียต่อประสิทธิภาพของเพจ ได้แก่:

  • เพจที่มีโหนด (แท็ก) จำนวนมากจะได้รับประสบการณ์ ความแออัดของเครือข่ายและปัญหาในการโหลดเนื่องจากมีขนาดใหญ่จึงเพิ่ม TTFB (Time to First Byte)
  • กำลังแสดงโหนดที่โหลดเพื่อสร้าง ตำแหน่งและสไตล์ของพวกเขาต้องใช้เวลาจึงเพิ่ม FCP (First Contentful Paint)
  • เมื่อจำนวนโหนดเพิ่มขึ้น ภาระที่จำเป็นด้วย การปรับเปลี่ยน JavaScript ทำให้หน่วยความจำมีภาระ, เพิ่ม TFT (Time to Interactive)

เพื่ออธิบายการปรับ DOM ให้เหมาะสมด้วยตัวอย่างง่ายๆ ให้พิจารณาสิ่งต่อไปนี้โดยที่ทั้งจำนวนและความลึกของ DOM ลดลง:

<div id="nav-element">
 <ul>
 </ul>
</div>

แทนที่จะทำสิ่งนี้:

<ul id="nav-element">
</ul>

จำเป็นต้องทำเช่นนี้: สองวิธีที่แนะนำมากที่สุดในการลดขนาด DOM คือการโหลดแบบ Lazy Loading และการแบ่งหน้า เนื่องจากโครงสร้างการ์ดบนหน้ารายการมี DOM จำนวนมาก จึงแนะนำให้เลื่อนหรือแบ่งหน้าแบบไม่สิ้นสุด เมื่อตัดสินใจเลือกจำนวนรายการในการแบ่งหน้า ควรพิจารณาเกณฑ์การวัด DOM อย่างแน่นอน เวลาที่มักจะพิจารณาสำหรับ จำนวนสินค้าในการแบ่งหน้าคือ 15-20 วินาทีแต่จริงๆ แล้วส่วนนี้ควรคำนวณจากฝั่งผู้มีส่วนได้ส่วนเสียส่วนหน้า โดยพิจารณาจากขนาด DOM

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

แหล่งที่มา: