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

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

Jeremy Wagner

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

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

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

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

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

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

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

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

document.querySelectorAll('*').length;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

พิจารณาใช้วิธีการเพิ่ม

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

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

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

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

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

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

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

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

บทสรุป

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

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