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

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

Jeremy Wagner

เมื่อสร้างหน้าเว็บ หน้าเว็บนั้นจะมี Document Object Model (DOM) DOM แสดงโครงสร้าง HTML ของหน้าเว็บ และให้สิทธิ์ JavaScript และ CSS เข้าถึงโครงสร้างและเนื้อหาของหน้าเว็บ

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

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

DOM ของหน้าเว็บจะใหญ่เกินไปเมื่อใด

คําศัพท์สําคัญ: คุณต้องทราบความแตกต่างระหว่างองค์ประกอบ DOM กับโหนด DOM องค์ประกอบ DOM หมายถึงองค์ประกอบ HTML ที่เฉพาะเจาะจงในต้นไม้ DOM โหนด DOM มีความหมายที่ทับซ้อนกับคำว่าองค์ประกอบ DOM แต่คำจำกัดความของโหนดนี้ขยายให้ครอบคลุมความคิดเห็น เว้นวรรค และข้อความ แม้ว่าการตรวจสอบขนาด DOM ของ Lighthouse จะอ้างอิงถึงโหนด DOM แต่คู่มือนี้จะอ้างอิงถึงเอลิเมนต์ DOM มากกว่าโหนดทุกครั้งที่เป็นไปได้

ตาม Lighthouse ขนาด DOM ของหน้าเว็บจะถือว่ามากเกินไปเมื่อเกิน 1,400 โหนด Lighthouse จะเริ่มแสดงคำเตือนเมื่อ DOM ของหน้าเว็บมีโหนดมากกว่า 800 โหนด ตัวอย่างเช่น HTML ต่อไปนี้

<ul>
  <li>List item one.</li>
  <li>List item two.</li>
  <li>List item three.</li>
</ul>

ในโค้ดด้านบน มีองค์ประกอบ DOM 4 รายการ ได้แก่ องค์ประกอบ <ul> และองค์ประกอบย่อย <li> 3 รายการ หน้าเว็บของคุณจะมีโหนดมากกว่านี้อย่างแน่นอน คุณจึงควรทำความเข้าใจสิ่งที่ทำได้เพื่อควบคุมขนาด DOM รวมถึงกลยุทธ์อื่นๆ เพื่อเพิ่มประสิทธิภาพการเรนเดอร์เมื่อคุณทำให้ DOM ของหน้าเว็บมีขนาดเล็กที่สุดแล้ว

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

DOM ขนาดใหญ่ส่งผลต่อประสิทธิภาพของหน้าเว็บใน 2-3 วิธีดังนี้

1. ในระหว่างการแสดงผลเริ่มต้นของหน้า เมื่อใช้ CSS ในหน้าเว็บ ระบบจะสร้างโครงสร้างที่คล้ายกับ DOM ซึ่งเรียกว่า CSS Object Model (CSSOM) เมื่อตัวเลือก CSS มีความเฉพาะเจาะจงมากขึ้น CSSOM ก็จะซับซ้อนมากขึ้น และต้องใช้เวลามากขึ้นในการเรียกใช้เลย์เอาต์ การจัดสไตล์ การคอมโพสิต และการวาดที่จำเป็นในการวาดหน้าเว็บไปยังหน้าจอ การดำเนินการที่เพิ่มเข้ามานี้จะทำให้เวลาในการตอบสนองของการโต้ตอบสำหรับการโต้ตอบที่เกิดขึ้นในช่วงต้นระหว่างการโหลดหน้าเว็บเพิ่มขึ้น
2. เมื่อการโต้ตอบแก้ไข DOM ไม่ว่าจะผ่านการแทรกหรือลบองค์ประกอบ หรือแก้ไขเนื้อหาและสไตล์ DOM การทำงานที่จำเป็นในการแสดงผลอัปเดตนั้นอาจส่งผลให้มีค่าใช้จ่ายสูงมากสำหรับเลย์เอาต์ การจัดสไตล์ การคอมโพส และงานเพนต์ เช่นเดียวกับการแสดงผลเริ่มต้นของหน้าเว็บ การเพิ่มความเฉพาะเจาะจงของตัวเลือก CSS อาจเพิ่มงานการแสดงผลเมื่อมีการแทรกองค์ประกอบ HTML ลงใน DOM อันเป็นผลมาจากการโต้ตอบ
3. เมื่อ JavaScript ค้นหา DOM ระบบจะจัดเก็บการอ้างอิงถึงองค์ประกอบ DOM ในหน่วยความจำ เช่น หากคุณเรียกใช้ document.querySelectorAll เพื่อเลือกองค์ประกอบ <div> ทั้งหมดในหน้าเว็บ ค่าใช้จ่ายด้านหน่วยความจำอาจสูงมากหากผลลัพธ์แสดงองค์ประกอบ DOM จํานวนมาก

งานที่ใช้เวลานานตามที่แสดงในเครื่องมือวิเคราะห์ประสิทธิภาพในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome งานที่ใช้เวลานานที่แสดงเกิดจากการแทรกองค์ประกอบ DOM ลงใน DOM ขนาดใหญ่ผ่าน JavaScript

ปัจจัยเหล่านี้ทั้งหมดอาจส่งผลต่อการโต้ตอบ แต่รายการที่ 2 ในรายการข้างต้นมีความสำคัญอย่างยิ่ง หากการโต้ตอบทําให้เกิดการเปลี่ยนแปลง DOM ก็อาจทําให้เกิดงานจำนวนมากซึ่งอาจทําให้ INP ในหน้าเว็บไม่ดี

ฉันจะวัดขนาด DOM ได้อย่างไร

คุณวัดขนาด DOM ได้ 2 วิธี วิธีการแรกใช้ Lighthouse เมื่อเรียกใช้การตรวจสอบ สถิติเกี่ยวกับ DOM ของหน้าปัจจุบันจะอยู่ในการตรวจสอบ "หลีกเลี่ยง DOM ที่มีขนาดใหญ่เกินไป" ในส่วนหัว "การวินิจฉัย" ส่วนนี้แสดงจํานวนองค์ประกอบ DOM ทั้งหมด องค์ประกอบ DOM ที่มีองค์ประกอบย่อยมากที่สุด และองค์ประกอบ DOM ที่ฝังอยู่ลึกที่สุด

วิธีง่ายกว่านั้นคือการใช้คอนโซล JavaScript ในเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ในเบราว์เซอร์หลักๆ หากต้องการดูจํานวนองค์ประกอบ HTML ทั้งหมดใน DOM ให้ใช้โค้ดต่อไปนี้ในคอนโซลหลังจากที่โหลดหน้าเว็บแล้ว

document.querySelectorAll('*').length;

หมายเหตุ: โปรดทราบว่าข้อมูลโค้ดด้านบนมีเฉพาะจำนวนองค์ประกอบ HTML ใน DOM เท่านั้น แต่ไม่รวมโหนดทั้งหมดใน DOM

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

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

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

ฉันจะวัดจํานวนองค์ประกอบ DOM ที่ได้รับผลกระทบจากการโต้ตอบได้อย่างไร

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

สังเกตจำนวนองค์ประกอบที่ได้รับผลกระทบใน DOM ซึ่งเป็นผลมาจากการคำนวณสไตล์ใหม่ โปรดทราบว่าส่วนที่แรเงาของการโต้ตอบในแทร็กการโต้ตอบแสดงถึงส่วนของระยะเวลาการโต้ตอบที่นานกว่า 200 มิลลิวินาที ซึ่งเป็นเกณฑ์ "ดี" ที่กําหนดไว้สําหรับ INP

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

ฉันจะลดขนาด DOM ได้อย่างไร

นอกจากการตรวจสอบ HTML ของเว็บไซต์เพื่อหามาร์กอัปที่ไม่จำเป็นแล้ว วิธีหลักในการลดขนาด DOM คือลดระดับความลึกของ DOM สัญญาณหนึ่งที่บ่งบอกว่า DOM อาจมีความลึกเกินความจำเป็นคือเมื่อคุณเห็นมาร์กอัปที่มีลักษณะดังต่อไปนี้ในแท็บองค์ประกอบของเครื่องมือสําหรับนักพัฒนาซอฟต์แวร์ของเบราว์เซอร์

<div>
  <div>
    <div>
      <div>
        <!-- Contents -->
      </div>
    </div>
  </div>
</div>

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

ความลึกของ DOM ยังอาจเป็นอาการของเฟรมเวิร์กที่คุณใช้ด้วย โดยเฉพาะอย่างยิ่งเฟรมเวิร์กแบบคอมโพเนนต์ เช่น เฟรมเวิร์กที่ใช้ JSX จะกำหนดให้คุณฝังคอมโพเนนต์หลายรายการไว้ในคอนเทนเนอร์หลัก

อย่างไรก็ตาม เฟรมเวิร์กหลายเฟรมเวิร์กช่วยให้คุณหลีกเลี่ยงการฝังคอมโพเนนต์ได้โดยใช้สิ่งที่เรียกว่า "แฟรกเมนต์" เฟรมเวิร์กแบบคอมโพเนนต์ที่นำเสนอฟีเจอร์แบบข้อมูลโค้ด ได้แก่ (แต่ไม่จำกัดเพียง) รายการต่อไปนี้

• รีแอ็กชัน
• Preact
• Vue
• Svelte

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

กลยุทธ์อื่นๆ ที่ควรพิจารณา

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

ลองใช้แนวทางแบบเพิ่ม

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

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

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

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

จำกัดความซับซ้อนของตัวเลือก CSS

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

อ่านเพื่อดูข้อมูลเพิ่มเติม: ลดขอบเขตและความซับซ้อนของการคำนวณสไตล์

ใช้พร็อพเพอร์ตี้ content-visibility

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

อ่านเพื่อดูข้อมูลเพิ่มเติม: content-visibility: พร็อพเพอร์ตี้ CSS ใหม่ที่จะช่วยเพิ่มประสิทธิภาพการแสดงผล

บทสรุป

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

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