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

Image for post
Image for post

วันนี้เรานำข้อมูลที่เป็นส่วนหนึ่งของ “Vue.js 2.0” ที่บางคนอาจจะรู้จักอยู่แล้ว นั่นก็คือ “Virtual DOM”

มาให้เข้าใจกันว่า จริงๆแล้ว Virtual DOM มันดีจริงไหม ? แล้วเราควรจะใช้หรือเปล่า ?

โดยข้อมูลนี้ได้ถูกเรียบเรียงและแปลมาจาก What’s New in Vue.js 2.0 — Virtual DOM

เชื่อว่า หลายๆคนที่เคยเขียนภาษา Javascript มาก่อน คงเคยได้ยินหรือรู้จักเป็นอย่างดีว่า Virtual DOM คืออะไร

โดยก่อน ที่เราจะมาทำความรู้จักกับ 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. ถ้าเราต้องจัด Event บนหน้าเว็บปัญหาคือ เราต้องค้นหาในทุกๆ อัน หรือบางอันก็แล้วแต่ เพื่อเข้าไปจัดการกับ Event เสียเวลาแถมยังมีบักมาอีกต่างหาก และช้าด้วย
  2. ถ้าเราต้องไล่โค้ดเพื่อแก้ไขละ 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 เท่าตัว

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

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

เราสามารถแสดงโหนด Virtual DOM ด้วย Javascript ได้ดังนี้

เมื่อต้องการแสดงข้อมูล โหนด DOM ด้วย HTML จะเขียนได้ดังนี้

และเราสามารถแสดงข้อมูล โหนด DOM ด้วย Javascript จะเขียนได้ดังนี้

นั่นก็คือ Virtual DOM ของเรา

และมันก็ไม่ยากเลยในการอัพเดทข้อมูลใน DOM

ถ้าพวกเราใช้ Virtual DOM มากกว่าการเขียนโค้ดเรียกแบบโดยตรงของ DOM API ด้วยคำสั่งเช่น .getElementById เพื่อที่จะทำการอัพเดทข้อมูล มันคงทำให้จะทำให้ง่ายขึ้นเยอะในการอัพเดทข้อมูลจากนั้นเมื่อถึงเวลาที่เราต้องทำการจะรับ Real DOM ทำได้ด้วยการซิงค์กับข้อมูลที่เราได้เปลี่ยนแปลงไป

โดยฟังก์ชั่นที่เราจะใช้ในการอัพเดท :

Vue.js ได้เพิ่ม Virtual DOM ลงใน Version 2 แล้ว มันดีมากเลย..ใช่ไหมละ?

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

หน่วยความจำ — นอกจากนี้ Virtual DOM ยังต้องการหน่วยความจำสำรองเพื่อใช้ในการเก็บข้อมูลของ DOM เพื่อที่จะรักษาข้อมูลไว้ และใช้ในการแลกเปลี่ยนข้อมูลระหว่าง ความเร็วในการอัพเดท DOM และ ความจำที่ใช้

ไม่ได้ดีไปทุกกรณี— Virtual DOM นั้นเป็นการนำชุดข้อมูลจำนวนมาก มาใช้ในการอัพเดทข้อมูลเพียงครั้งเดียวอัพเดทครั้งเดียว แต่ไม่บ่อย ? Virtual DOM นั้นจะเพิ่มช่องข้อมูลว่างๆไว้ก่อน เพื่อคำนวณข้อมูลที่ใช้ในการอัพเดทลงใน DOM

ดังนั้นถ้าคุณมีโครงการหรืองานที่มีจำนวนโหนดค่อนข้างเล็ก เป็นไปได้ไหมถ้าจะใช้ Virtual DOM ในการทำเพื่อให้มันเร็วขึ้น?

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

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

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

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

ตัวอย่างเช่น คุณสามารถติดต่อโดยตรงผ่าน Virtual DOM เพื่อที่จะสร้างโหนดใหม่ด้วยคำสั่ง render()

ด้วยวิธี

การแสดงผล :

คุณคงสงสัยว่า ทำไมถึงเขียนเช่นนี้ละ ? นั่นเพราะว่า Vue.js 2.0 นี้ทำให้คุณมีอำนาจเต็มที่ในการเขียนโปรแกรม Javascript ซึ่งคุณสามารถที่จะสร้างรูปแบบฟังก์ชั่นที่เป็นแบบเฉพาะของตนเองเพื่อที่จะสร้าง Virtual DOM ของคุณเอง ด้วย Javascript’s array method etc. ซึ่งเป็นเรื่องยากมากที่จะใช้ไวยากรณ์ต้นแบบที่เขากำหนดมาให้

หวังว่าบทความนี้ คงจะทำให้ใครหลายคนเข้าใจว่า Virtual DOM มันคืออะไร แล้วมันมีประโยชน์อย่างไร และมันเหมาะกับงานที่คุณกำลังทำอยู่หรือไม่ หวังว่าจะได้ความรู้ไม่มากก็น้อยนะครับ :)

IT@KMUTNB

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

Siwakorn Piengpenjan

Written by

Everything can possible.

IT@KMUTNB

IT@KMUTNB

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

Siwakorn Piengpenjan

Written by

Everything can possible.

IT@KMUTNB

IT@KMUTNB

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store