Virtual DOM คืออะไร ? แล้วมันดีอย่างไร ?

DOM คืออะไร ?

DOM (Document Object Model) มันคือ การเก็บ Document ในรูปแบบของ Object ที่เป็นโครงสร้างต้นไม้ (Tree) มาถึงตอนนี้ หลายคนคง อ๋ออ เพราะ คงเจอกันในวิชา Data Structure and Algorithm กันมาบ้างแล้ว ซึ่งในการเก็บ Document พวก HTML,XML มันก็จะใช้วิธีการเก็บนี้ ซึ่งเวลาเราจะไปจัดการ HTML ในแต่ละจุด เช่น Insert,Update,Delete ก็ต้องใช้ Javascript เข้าไปทำงานแทนซึ่ง DOM มันจะมี API ให้เข้าไปจัดการแต่ละโหนด (Nodes) ได้ ตัวอย่างเช่นการใช้คำสั่ง getElementById ของ JavaScript ตัวอย่างโค้ดง่ายๆ เพื่อค้นหาและลบโหนด

ปัญหาของ DOM

เมื่อมันคือ DOM มันก็คือ Tree-Structure เวลาเราไล่โค้ดค้นหา Tag มันก็มองหาอันที่เราต้องการถูกไหม? หาจาก parent ไปหา child หรืออะไรก็ตามแต่ สมมุติว่าเรา div อยู่ 500 อันในเว็บ ปัญหาคืออะไร ?

  1. ถ้าเราต้องไล่โค้ดเพื่อแก้ไขละ 500 div แย่แน่ๆ!

Virtual DOM

มันคือการสร้าง Tree-Object ซึ่งมันคือตัวแทนของ Real DOM ก็หมายความว่า แทนที่เราจะสร้าง div จริงๆไว้ใน Browser เราก็สร้างมันไปเก็บไว้ใน Memory แทนไง แทนที่มันจะไปจัดการกับ Real DOM ด้วยการใช้ DOM API แบบเก่า ๆ มันก็ใช้วิธีการ patch จากนั้นก็ Render UI ส่วนที่ถูกกระทำใหม่ และแทนที่จะต้องไปไล่ DOM ว่ามันอยู่ส่วนไหน มันก็ใช้การ ref มาทำแทน โดย Virtual DOM ของ Vue.JS 2.0 จะใช้ของ Snabbdom โดยมีการการันตรีมาแล้วว่า เร็วขึ้นและลดการใช้หน่วยความจำลง 2–4 เท่าตัว

คงจะรู้แล้วว่า Vitual DOM มันดีอย่างไร เรามาเริ่มดูตัวอย่างกันดีกว่า

เมื่อพวกเราใช้ภาษา Javascript ในการที่จะเปลี่ยนไปยังหน้าเว็บไซต์ของเรา เบราเซอร์จะทำงานบางอย่างเพื่อหาโหนด DOM ที่จำเป็นและเพื่อเปลี่ยนแปลง เช่น

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

ขนาด — สำหรับเวอร์ชั่นนี้ ได้เพิ่มฟังก์ชั่นในการทำงานเข้ามามากขึ้น นั่นหมายถึง จำนวนของแพ็คเกจที่เพิ่มขึ้นมาอีกด้วยแต่โชคดีที่ Vue.js 2.0 นั่นยังคงมีขนาดเล็กมาก

เป็นไปได้ แต่มันจะทำให้งานของคุณช้ามาก

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

เรื่องของประสิทธิ์ภาพ

การที่ใช้ Virtual DOM มันไม่ได้แค่ทำให้ประสิทธิ์ภาพการทำงานดีขึ้นเพียงอย่างเดียว แต่มันยังหมายถึงการทำงานที่เพิ่มขึ้นอีกด้วย

IT@KMUTNB

ภาควิชาเทคโนโลยีสารสนเทศ ม.เทคโนโลยีพระจอมเกล้าพระนครเหนือ

Siwakorn Piengpenjan

Written by

Everything can possible.

IT@KMUTNB

IT@KMUTNB

ภาควิชาเทคโนโลยีสารสนเทศ ม.เทคโนโลยีพระจอมเกล้าพระนครเหนือ