Aesthetic study notes about Virtual DOM concept on an iPad screen

1. 🎯 ตอนที่ 10: เจาะลึก Virtual DOM อาวุธลับที่ทำให้ Framework ยุคใหม่เร็วทะลุนรก

2. 📖 เปิดฉาก (The Hook)

น้องๆ เคยสงสัยไหมครับว่า ทำไม Framework ยุคใหม่อย่าง React หรือ Vue ถึงได้รับการยกย่องว่า “ทำงานได้เร็วและลื่นไหลมาก” เมื่อเทียบกับการที่เราเขียน JavaScript (หรือ jQuery) เพื่อเข้าไปสั่งการหน้าเว็บแบบตรงๆ ในยุคก่อน?

ในอดีต เวลาที่เราต้องการเปลี่ยนข้อความ หรืออัปเดตข้อมูลบนหน้าจอ เราต้องสั่งให้เบราว์เซอร์ไปค้นหาชิ้นส่วนนั้นบนหน้าเว็บ (Real DOM) แล้วทำการวาดใหม่ทั้งหมด ถ้าหน้าเว็บมีขนาดเล็กก็คงไม่เป็นไรครับ แต่ลองจินตนาการถึงเว็บแอปพลิเคชันสเกลยักษ์ที่มีชิ้นส่วนนับพันชิ้น การไปแตะต้อง DOM บ่อยๆ มันเปรียบเสมือนการ “ทุบตึกทั้งชั้นเพื่อเปลี่ยนแค่เฟอร์นิเจอร์ชิ้นเดียว” ซึ่งกินทรัพยากรเครื่องอย่างมหาศาล

จนกระทั่งวันหนึ่ง โลกของ Frontend ก็ได้รู้จักกับสิ่งที่เรียกว่า “Virtual DOM” ซึ่งเป็นแนวคิดที่ React บุกเบิกขึ้นมา และ Vue ก็นำมาปรับใช้และพัฒนาต่อยอดได้อย่างยอดเยี่ยม วันนี้พี่จะพามาจิบกาแฟ แงะดูใต้กระโปรงรถสปอร์ตคันนี้กันครับว่า เจ้า Virtual DOM มันทำงานอย่างไร และทำไมมันถึงกลายเป็น “มาตรฐานทองคำ” ของ Web Development ยุคปัจจุบัน

3. 🧠 แก่นวิชา (Core Concepts)

🧱 Real DOM คืออะไร?

ก่อนอื่นเราต้องรู้จัก DOM (Document Object Model) กันก่อนครับ เมื่อเบราว์เซอร์โหลดหน้าเว็บ HTML มันจะแปลงโค้ด HTML ของเราให้กลายเป็น “โครงสร้างต้นไม้ (Tree structure)” ที่เต็มไปด้วย Node (เช่น

,

, ) ซึ่งเราเรียกว่า Real DOM ปัญหาคือ การเข้าไปจัดการ (Manipulate) Real DOM นั้นเป็นคอขวดด้านประสิทธิภาพที่ใหญ่ที่สุด (Performance bottleneck) เพราะทุกครั้งที่เราสั่งแก้ DOM เบราว์เซอร์อาจจะต้องคำนวณ Layout เลย์เอาต์และวาดสี (Repaint) หน้าจอใหม่ทั้งหมด

👻 Virtual DOM: พิมพ์เขียวจำลอง

Virtual DOM (VDOM) คือแนวคิดในการสร้าง “ตัวแทนจำลอง” ของ UI หน้าเว็บเอาไว้ในหน่วยความจำ (Memory) โดยจะอยู่ในรูปแบบของ Plain JavaScript Object (อ็อบเจกต์ธรรมดาๆ ของ JS) ที่เราเรียกว่า VNode การสร้างหรืออัปเดต VNode ด้วย JavaScript นั้นกินทรัพยากรน้อยมากและทำได้รวดเร็วสุดๆ

🏗️ อุปมาอุปไมย: “พิมพ์เขียวตึก 29 ชั้น”

เพื่อให้เห็นภาพชัดเจนที่สุด (อ้างอิงจากบทเรียนของ Evan You ผู้สร้าง Vue) ลองจินตนาการว่าคุณมีตึก 29 ชั้น:

  • วันหนึ่งคุณต้องการเปลี่ยนตู้และชุดครัวที่ชั้น 29
  • แบบดั้งเดิม (Real DOM): ทุบตึกทิ้งทั้งหมดแล้วสร้างตึกใหม่ตั้งแต่ชั้น 1 ถึง 29 เพื่อให้ได้ครัวใหม่! (ซึ่งช้าและเปลืองมาก)
  • แบบ Virtual DOM: คุณเอา “พิมพ์เขียวเก่า” มาเทียบกับ “พิมพ์เขียวใหม่ (Virtual DOM)” ว่ามีจุดไหนต่างกันบ้าง เมื่อพบว่าต่างกันแค่ชุดครัวที่ชั้น 29 ผู้รับเหมาก็เดินขึ้นไปเปลี่ยนแค่ตู้ตรงจุดนั้นจุดเดียว!

🔄 กระบวนการทำงาน (The Render Pipeline)

  1. Mount (สร้างครั้งแรก): Framework จะรันฟังก์ชัน Render เพื่อสร้าง Virtual DOM Tree ขึ้นมา และนำไปสร้างเป็น Real DOM บนหน้าจอ
  2. Patch / Diffing (การเปรียบเทียบ): เมื่อข้อมูล (State) เปลี่ยนแปลง Vue หรือ React จะสร้าง Virtual DOM Tree ตัวใหม่ขึ้นมา แล้วนำไป “เดินเปรียบเทียบ” (Walk and Compare) กับ Tree ตัวเก่า เพื่อหาข้อแตกต่าง
  3. Reconciliation (การอัปเดตจุดที่ต่าง): เมื่อรู้แล้วว่ามีอะไรเปลี่ยนบ้าง ระบบก็จะส่งคำสั่งไปอัปเดตแค่ จุดที่เปลี่ยนแปลงจริงๆ บน Real DOM เท่านั้น!
Diagram showing the comparison between Real DOM and Virtual DOM Diffing process

4. 💻 ร่ายมนต์โค้ด (Show me the Code)

ถ้าอยากรู้ว่าหน้าตาของ Virtual DOM (VNode) เป็นอย่างไร ลองดูตัวอย่างนี้ครับ สมมติเรามีโค้ด HTML ธรรมดาๆ:

<!-- สิ่งที่เราต้องการให้เป็น (Real DOM) -->
<div id="hello">
  <p>สวัสดี Virtual DOM</p>
</div>

ในโลกของ Framework เบื้องหลังแล้วมันจะถูกแปลงร่างเป็น JavaScript Object (VNode) หน้าตาแบบนี้ครับ:

// สิ่งที่ Framework เห็นใน Memory (Virtual DOM)
const vnode = {
  type: 'div', // ชนิดของ Element
  props: {
    id: 'hello' // Attributes ต่างๆ
  },
  children: [ // ลูกๆ ที่อยู่ข้างใน
    {
      type: 'p',
      props: null,
      children: 'สวัสดี Virtual DOM' // ข้อความก็คือส่วนหนึ่งของ Children
    }
  ]
}

ทำไมต้องแปลงเป็น Object? เพราะการเอา JavaScript Object สองตัวมาเปรียบเทียบกัน (Diffing) ในคอมพิวเตอร์นั้น ใช้เวลาเพียงเสี้ยวของเสี้ยววินาทีครับ เมื่อ Framework พบความต่าง (เช่น ข้อความเปลี่ยนจาก ‘สวัสดี’ เป็น ‘ลาก่อน’) มันก็จะหยิบแค่คำว่า ‘ลาก่อน’ ไปสั่งอัปเดต DOM จริง ทำให้หน้าเว็บไม่กระตุกเลย

5. 🛡️ เคล็ดลับจากคัมภีร์ลับ (Under the Hood / Pro-Tips)

✨ จุดตัดที่ทำให้ Vue 3 เหนือกว่า (Compiler-Informed Virtual DOM) แม้ว่า React จะเป็นผู้บุกเบิก Virtual DOM แต่วิธีการเปรียบเทียบ (Reconciliation) ของ React ยังเป็นแบบที่ต้องพึ่งพารันไทม์ (Runtime) ล้วนๆ หมายความว่ามันต้อง “ไล่ตรวจทุกๆ โหนด (Traverse tree)” เพื่อหาความต่าง ซึ่งเปลืองแรงโดยใช่เหตุ

แต่ Vue 3 ได้อัปเกรดกระบวนการนี้ขึ้นไปอีกขั้นด้วยเทคนิค Compiler-Informed Virtual DOM! ในขั้นตอนที่ Vue แปลงโค้ด <template> ไปเป็น JavaScript ระบบ Compiler ของ Vue ฉลาดพอที่จะ “วิเคราะห์ล่วงหน้า” ว่าส่วนไหนของหน้าเว็บคือ “ส่วนที่อยู่นิ่งๆ (Static)” และส่วนไหนคือ “ส่วนที่เคลื่อนไหวได้ตามตัวแปร (Dynamic)”

  1. Cache Static (การแคชส่วนที่อยู่นิ่ง): ถ้ามี
    ไหนที่เป็นข้อความธรรมดา ไม่ได้ผูกกับตัวแปร Vue จะไม่สร้าง VNode ใหม่ทุกรอบ แต่จะใช้ตัวเดิมตลอดกาล (ข้ามการ Diff ไปเลย)
  2. Patch Flags (ป้ายแปะบอกทาง): Vue จะแปะ “ธง” ไว้ที่ Element ที่มีการใช้ข้อมูลแบบ Dynamic ทำให้ตอนที่ State เปลี่ยน ตัว Diffing Algorithm สามารถ “กระโดดข้าม” ไปเช็คเฉพาะจุดที่มีธงแปะอยู่ได้เลย (Tree Flattening) ไม่ต้องมุดหาให้เหนื่อย!

ด้วยการผสานเอาพลังของ ระบบ Reactivity ที่คอยติดตามข้อมูล เข้ากับ Virtual DOM ที่ฉลาดขึ้น ทำให้ Vue 3 มีประสิทธิภาพที่สูงกว่าโดยที่เราแทบไม่ต้องเขียนโค้ด Optimize (เช่น การใช้ useMemo แบบฝั่ง React) ด้วยตัวเองเลยครับ!

6. 🏁 บทสรุป (To be continued…)

Virtual DOM ไม่ใช่เวทมนตร์ดำ แต่มันคือวิศวกรรมซอฟต์แวร์ที่ชาญฉลาดในการนำ JavaScript Object มาเป็น “ตัวกลาง (Blueprint)” เพื่อลดภาระการทำงานที่หนักหน่วงของเบราว์เซอร์

การเข้าใจว่า Virtual DOM ทำงานอย่างไร จะช่วยให้เราออกแบบ Component ได้ดีขึ้น (เช่น การใส่ :key ใน v-for เพื่อช่วยให้ Algorithm การ Diff ของ Vue ทำงานได้แม่นยำขึ้นโดยไม่ต้องทำลายทิ้งแล้วสร้างใหม่) ในบทถัดไป เราจะเจาะลึกเข้าไปดูว่า การแยกหน้าจอออกเป็นชิ้นๆ หรือที่เรียกว่า Component Architecture นั้น จะช่วยให้เราสร้างแอปพลิเคชันสเกลใหญ่ได้อย่างไร ติดตามกันต่อได้เลยครับ!

ต้องการที่ปรึกษาและพัฒนาระบบ Web Application หรือ Frontend Architecture ให้กับธุรกิจของคุณ? ทีมงาน WP Solution พร้อมให้บริการออกแบบและพัฒนาซอฟต์แวร์แบบครบวงจร ดูรายละเอียดบริการของเราได้ที่: www.wpsolution2017.com หรือพูดคุยปรึกษาเบื้องต้นได้ที่ Line: wisit.p