خانه / دسته‌بندی نشده / Virtual DOM vs DOM

Virtual DOM vs DOM

تفاوت میان DOM و Virtual Dom

DOM

DOM در واقع سر واژه عبارت Document Object Model هست و در واقع مدلی انتزاعی جهت نمایش ساختار داده هست. که به عنوان مثال برای توسعه دهنده های وب این مدل شامل HTML هست و به همچین DOM به اصطلاح HTM DOM می گویند. خوب در این تعریف عناصر HTM در ساختار DOM به عنوان node شناخته می شوند.

پس می توان به این صورت گفت که درحالیکه HTML یک text هست؛ DOM شامل نمایش in-memory این text هست.

در مقایسه با فرآیند داشتن چند instance مختلف از یک برنامه مشابه, می تواند چندین DOM مختلف از یک html مشابه داشت.

باید گفت که HTML DOM وظیفش مهیا کردن یک interface جهت پیمایش و تغییر این node هاست. بهمین دلیل HTML DOM شامل متدهایی شبیه getElementById  یا  removeChild هست. معمولا از JavaScript هم جهت کار با DOM ها استفاده میشه.

پس بهنگامی که قصد تغییر محتوای صفحه بصورت dynamic داریم؛ بواقع DOM ها رو تغییر می دیم. مثلا بصورت زیر:


var item = document.getElementById("myLI");

item.parentNode.removeChild(item);

در اینجا document  اشاره به root node در HTML DOM Structure داره؛ و getElementById ؛ parentNode  و removeChild  هم متدهایی است که توسط HTML DOM API مهیا شدند.

مشکلاتی که ممکن است با آن مواجه شویم

همانطور که می دانیم HTML DOM همیشه دارای ساختاری درختی-tree-structured- هست. خوب طبیعتا این ساختار بسیار خوب و راحت هست در وهله ی اول. چون می توان براحتی در ساختار این درخت پیش رفت و به عناصر مورد نظر دسترسی پیدا نمود. اما نکته ی مهمتر این حقیقت است که سادگی به معنای سریعتر بودن نیست.

DOM tree رفته رفته و کم کم بسیار بزرگ و بزرگتر میشه. چون توسعه دهنده ی وب کم کم عناصرهای بیشتر و بیشتری رو به صفحه اصافه می کنه و نتیجتا اینکه این ساختار درختی کم کم به یک huge tree تبدیل میشه. و ما در برنامه های تحت وب و همچنین SAP نیاز داریم که بطور پیوسته و زیاد DOM tree رو تغییر بدیم.

فرض نمایئد که DOMی شامل صدها div هست. برنامه ی ما شامل تعداد زیادی handle methodها مثل Click؛ submit و غیره هست. Event handlerهایی که مثلا از jQuery استفاده می کنند باید:

  1. تمام نودهایی که به event مرتبط هست را بیابند.
  2. در صورت نیاز این نودها را update کنند.

که این مورد می تواند دو مشکل رو بوجود بیاره:

  1. مدیریت این ساختار رو سخت تر می کنه.
  2. کار های غیر ضروری انجام دادن.

Virtual DOM

Virtual DOM یک انتزاعی است از HTML DOM. این ساختار یک ساختار lightweight هست و از جزئیات پیاده سازی browser هم بری است.

Virtual DOM در واقع کپی(هایی) از HTML DOM اصلی است. و در واقع هنگام اعمال تغییرات مورد نیاز بر روی DOM ما با این DOM سروکار داریم و با DOM اصلی که کندتر است و browser-specific هست بصورت مستفیم کاری نخواهیم داشت.

Virtual DOM جهت حل دو مسئله و مشکل توسط Matt Esch معرفی شد.

  1. چه موقع باید re-render انجام بشه؟ پاسخ: وقتی که مشاهده شد که data به حالت dirty رفته.
  2. به چه صورت فرآیند re-rendering رو بصورت موثرتری انجام داد؟ پاسخ: با استفاده از مفهوم Virtual DOM جهت ایجاد DOM path های واقعی!!

توی فریمورکی شبیه React هر کدام از کامپوننت ها دارای state هستند. و این state شبیه به مفهوم observable که در فریمورک هایی شبیه knoukout یا سایر MVVM frameworkها مشاهده میشه. در واقع React از اونجایی که می تونه مشاهده کنه و بفهمه که چه موقع این دیتاها و state ها تغییر کرده؛ می تونه براحتی بفهمه که چه موقع نیاز به re-render کردن وجود داره. فرآیند Dirty checking به نسبت به observable ها کندتر هست؛ اون هم به این دلیل که نیاز هست که در interval های منظم دیتا رو pool کنیم و تمام مقادیر اون رو توی ساختار درختی بصورت recursively بررسی و چک کنیم. در مقایسه با روش Virtual DOM یک Set کردن مقادیر توی state به listener مربوطه یک signal رو می فرسته که برخی از دیتاها تغییر کرده اند؛ بهمین دلیل React بسادگی می تونه به Change eventها مورد نظر روی state؛ listen کرده و re-rendering رو queue کنه.

همچنین Virtual DOM برای re-rendering موثرتر و کارآمد تر نیز بکار می رود. که این مورد دیگه به فرآیند dirty checking ربطی نخواهد داشت. و می توان که re-rendering رو توی Virtual DOM با و بدون dirty checking انجام داد. البته این حقیقت وجود داره که یکسری overhead به هنگام computing میان دو virtual tree وجود داره؛ اما بایستی توجه داشت که Virtual DOM diff درباره ی این موضوع است که چه چیزی باید در DOM بروزرسانی بشه؛ و نه تغییرات دیتا. در حقیقت خود diff algorithm بخودی خود یک dirty checker هست اما برای بررسی اینکه آیا DOM؛ dirty شده است یا نه استفاده میشه.

کمکی که توسط آقای Matt Esch با ارائه virtual DOM شد این هست که کمک می کنه که فقط به هنگامی که state تغییر کرد virtual tree رو re-render می کنه. پس استفاده از یک observable جهت بررسی اینکه آیا stateی تغییر کرده است یا خیر می تواند یک راه حل موثر جهت جلوگیری از re-render کردن های غیر ضروری باشه؛ که البته باعث یکسری زیاد از tree diffهای غیر ضروری میشه که در صورتی که هیچ چیزی تغییر نکنه؛ هم البته الگوریتم ارئه شده ی آقای Matt Esch هیچ کاری نمی کنه!!!

کوتاه سخن اینکه:

دستکاری نمودن دستی DOM فرآیندی خسته کننده هست و به نوشتن کدهای دستی زیادی نیاز هست. و همچنین مقایسه DOM با state قبلی نیز طبیعتا بسیار مشکل است. یک راه حل ساده و اولیه این است که به محضی که DOM تغییر کرد کدی بنویسیم که کل DOM رو مجدد ایجاد کنه. در کنار سادگی بیش از حد این روش بدیهی است که در صورتی که این عمل یعنی جایگزینی کل DOM مکررا؛ باعث میشه که App بسیار کند بشه.

virtual-dom در واقع شامل مجموعه ای است از ماژول هایی جهت فراهم نمودن روشی جهت تعریف موثر و راحت تر DOM برای app. در اینصورت بجای ویرایش نمودن DOM هنگامی که state مربوط به برنامه تغییر کرد؛ شما مجدد می توانید یک Virtual tree یا VTree دیگه ایجاد کنید. که شبیه DOM state هست نیاز دارید. کامپوننت virtual-dom سپس وظیفه داره که بصورت موثری DOM رو جوری بسازه و تغییر بده در حقیقت که تغییر مورد نیاز رو نیز منعکس کنه؛ البته بدون recreating نمودن کل DOM node ها.

virtual-dom به شما این اجازه رو میده که بمحض اینکه state تغییر کرد؛ یک view رو با ایجاد یک VTree کامل از view مورد نظر update کنید و سپس اون رو بصورت موثری به DM اصلی path کنید.

در اینجا مثالی از نحوه ی تعریف یک VTree و نحوه ی update کردن اون اورده شده:

در پایان باید گفت بهترین روش جهت فهم و یادگیری منطق الگوریتم های ارائه شده توسط virtual DOM مشاهده و بررسی Repository این پروژه توی github هست.

https://github.com/Matt-Esch/virtual-dom

 

درباره ی masoud@admin

همچنین ببینید

بررسی Promiseها در AngularJs بر اساس کارتون

بررسی Promiseها  در Angular Js بر اساس کارتون متن زیر بر گرفته از مقاله ای …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

در تلگرام هم همراه شما هستم

اگر علاقمند به معماری نرم افزار و مبحث محبوب مایکروسرویس هستید؛ در کانال با ما همراه باشید. اطلاعات مفید زیادی در این کانال انتظار شما را می کشند. فقط کافیست دکمه ی پیوستن را بفشارید.

پیوستن بستن