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

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

Jeremy Wagner

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

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

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

1. ระหว่างการแสดงผลครั้งแรกของหน้า เมื่อใช้ CSS กับหน้าเว็บ ระบบจะสร้างโครงสร้างที่คล้ายกับ DOM ที่เรียกว่าโมเดลออบเจ็กต์ CSS (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 DevTools ในมุมมองนี้ จำนวนโหนด DOM ปัจจุบันของหน้าเว็บจะแสดงแผนภูมิพร้อมกับการดำเนินการเลย์เอาต์และการคำนวณรูปแบบอีกครั้งต่อวินาที

หากขนาดของ DOM เข้าใกล้เกณฑ์คำเตือนของ Lighthouse DOM หรือล้มเหลวเลย ขั้นตอนต่อไปคือการคิดหาวิธีลดขนาด 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 กำหนดให้คุณซ้อนคอมโพเนนต์หลายรายการในคอนเทนเนอร์หลัก

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

• แสดงความรู้สึก
• นำเสนอ
• สถานที่
• สเวลต์

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

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

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

พิจารณาหาวิธีเสริม

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

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

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

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

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

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

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

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

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

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

บทสรุป

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

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

รูปภาพหลักจาก Unsplash โดย Louis Reed