jQuery Academy · บทเรียน

การปรับปรุงประสิทธิภาพการดำเนินการกับ DOM

การปรับปรุงประสิทธิภาพการดำเนินการกับ DOM เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

เหตุใดจึงควรเพิ่มประสิทธิภาพ DOM

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

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

การจัดวางใหม่และการวาดใหม่

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

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

เป้าหมายของเราคือลดการทำงานเหล่านี้ให้น้อยที่สุด

การอัปเดต DOM ที่ไม่มีประสิทธิภาพ

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

การเปลี่ยนแปลงไม่กี่ครั้งอาจไม่เห็นผลชัดเจน แต่หากมีหลายร้อยหรือหลายพันครั้ง หน้าเว็บอาจช้ามากและไม่ตอบสนอง

การรวมการเปลี่ยนแปลงเป็นชุด

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

ลองนึกภาพเหมือนการทาสีผนัง การทาสีหนา ๆ ครั้งเดียว ย่อมดีกว่าการแต้มเล็ก ๆ หลายครั้ง

ถอด แก้ไข แล้วใส่กลับ

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

เมธอด .detach() ของ jQuery เหมาะอย่างยิ่งสำหรับงานนี้ เมธอดนี้นำองค์ประกอบออก แต่ยังคงข้อมูลและตัวจัดการเหตุการณ์ทั้งหมดไว้ ต่างจาก .remove()

การใช้ detach

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

$(document).ready(function() {
  // Assume this HTML exists: <ul id="myList"><li>Item A</li><li>Item B</li></ul>
  const $list = $('#myList');
  const $firstItem = $list.find('li:first');

  // Detach the element
  const $tempItem = $firstItem.detach();

  // Make multiple changes while detached
  $tempItem.text('DETACHED & MODIFIED');
  $tempItem.css('background-color', 'yellow');

  // Re-attach it to the list
  $list.append($tempItem);
});

การแบ่งการอัปเดตเป็นส่วนย่อย

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

คุณทำได้โดยสร้างสตริง HTML หรือสร้างอาร์เรย์ของออบเจ็กต์ jQuery แล้วใช้การเรียก .append() เพียงครั้งเดียว

ตัวอย่างการเพิ่มเป็นชุด

ตัวอย่างนี้สาธิตวิธีสร้างรายการหลายรายการและเพิ่มทั้งหมดในการทำงานกับ DOM เพียงครั้งเดียว โดยใช้สตริง HTML

$(document).ready(function() {
  // Assume this HTML exists: <ul id="batchList"></ul>
  const $list = $('#batchList');
  let newItemsHtml = ''; // Build HTML string

  for (let i = 0; i < 5; i++) {
    newItemsHtml += `<li>New Item ${i + 1}</li>`;
  }

  // Append all new items at once
  $list.append(newItemsHtml);
});

หลีกเลี่ยง "การทำให้เค้าโครงปั่นป่วน"

โปรดระมัดระวังเมื่ออ่านคุณสมบัติเค้าโครง เช่น .width(), .height(), .offset() ทันทีหลังจากแก้ไข DOM เบราว์เซอร์อาจต้องจัดวางใหม่เพื่อส่งคืนค่าที่ถูกต้องและเป็นปัจจุบัน

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

เพิ่มประสิทธิภาพโค้ดของคุณ

เทคนิคใดต่อไปนี้มีประสิทธิภาพในการเพิ่มประสิทธิภาพการจัดการ DOM ด้วย jQuery

สรุป: DOM ที่เร็วขึ้น

ทำได้ดีมาก คุณได้เรียนรู้กลยุทธ์สำคัญในการเพิ่มประสิทธิภาพการจัดการ DOM แล้ว

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

การใช้เทคนิคเหล่านี้จะทำให้แอปพลิเคชัน jQuery ของคุณตอบสนองได้รวดเร็วยิ่งขึ้น

คำถามที่พบบ่อย

บทเรียน “การปรับปรุงประสิทธิภาพการดำเนินการกับ DOM” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การปรับปรุงประสิทธิภาพการดำเนินการกับ DOM” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การปรับปรุงประสิทธิภาพการดำเนินการกับ DOM”

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

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “การปรับปรุงประสิทธิภาพการดำเนินการกับ DOM” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

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

← กลับไปที่ jQuery Academy