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 ขนาดใหญ่ส่งผลต่อประสิทธิภาพของหน้าเว็บใน 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 จํานวนมาก

ปัจจัยเหล่านี้ทั้งหมดอาจส่งผลต่อการโต้ตอบ แต่รายการที่ 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 จะกำหนดให้คุณฝังคอมโพเนนต์หลายรายการไว้ในคอนเทนเนอร์หลัก

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

• รีแอ็กชัน
• 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 ของหน้าเว็บมีการเปลี่ยนแปลงอันเป็นผลมาจากการโต้ตอบของผู้ใช้

บทสรุป

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

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