Virtual DOM یا (VDOM) یک نمایش سبک از DOM واقعی در حافظه است. Virtual DOM عمدتاً برای بهینهسازی فرایند بهروزرسانی DOM واقعی در برنامههای وب استفاده میشود. در ادامه مقاله Virtual DOM چیست؟ آشنایی کامل با DOM مجازی با ما همراه باشید.
در توسعه وب، دستکاری DOM میتواند کند باشد، به ویژه هنگام انجام بهروزرسانیهای متعدد در رابط کاربری. Virtual DOM روشی را برای به حداقل رساندن تعداد دستکاریهای مستقیم DOM با ایجاد یک نسخه مجازی از DOM در حافظه فراهم میکند. تغییرات ابتدا به Virtual DOM اعمال میشوند و سپس یک الگوریتم تفاوت، مجموعهای از تغییرات حداقلی را که باید به DOM واقعی اعمال شود، تعیین میکند. این منجر به عملکرد بهتر و تجربه کاربری روانتر میشود.
نحوه کار Virtual DOM
در اینجا نحوه کار Virtual DOM مجازی آمده است:
نمایش در حافظه:
- Virtual DOM یک درخت از اشیاء جاوا اسکریپت است که ساختار DOM واقعی را منعکس میکند. هر شیء در این درخت نمایانگر یک گره DOM (مانند <div>، <p>، یا <button>) است.
- هر گره Virtual DOM شامل ویژگیها، خاصیتها، و دستههای رویداد برای آن گره است، همراه با ارجاعات به گرههای فرزند آن.
رندر اولیه:
- هنگامی که برنامه برای اولین بار بارگذاری میشود، چارچوب (مانند React) یک درخت Virtual DOM بر اساس حالت فعلی برنامه ایجاد میکند.
- این درخت سپس در DOM واقعی رندر میشود.
بهروزرسانیها:
- هنگامی که یک تغییر حالت یا دادهها رخ میدهد (برای مثال، زمانی که یک کاربر با برنامه تعامل دارد)، چارچوب ابتدا Virtual DOM را بهروزرسانی میکند، نه DOM واقعی.
- چارچوب اجزاء تحت تأثیر را در Virtual DOM مجدداً رندر میکند.
- درخت جدید Virtual DOM با درخت قبلی با استفاده از فرآیندی به نام تطبیق یا تفاوت مقایسه میشود.
تفاوت:
- چارچوب یک الگوریتم تفاوت را اجرا میکند تا بفهمد کدام قسمتهای Virtual DOM نسبت به رندر قبلی تغییر کردهاند.
- این الگوریتم انواع گرهها، ویژگیها و عناصر فرزند را بررسی میکند تا تغییرات حداقلی را شناسایی کند.
تطبیق:
- پس از شناسایی تفاوتها، چارچوب کمترین تعداد بهروزرسانیهای لازم را برای همگامسازی Virtual DOM با DOM واقعی محاسبه میکند.
- سپس چارچوب تنها قسمتهایی از DOM واقعی را که تغییر کردهاند بهروزرسانی میکند، به جای اینکه کل DOM را دوباره رندر کند، که کندتر خواهد بود.
فواید استفاده از Virtual DOM چیست؟
DOM مجازی به روشهای مختلف عملکرد را بهبود میبخشد:
کاهش جریانها و نقاشیهای مجدد:
- دستکاری مستقیم DOM میتواند منجر به جریانها و نقاشیهای مجدد (بازنگری طرح و بازکشیدن عناصر توسط مرورگر) شود، که عملیات پرهزینهای از نظر عملکردی هستند.
- با Virtual DOM، تغییرات ابتدا در حافظه انجام میشود و تنها بهروزرسانیهای لازم به DOM واقعی اعمال میشود. این تعداد جریانها/نقاشیهای مجدد را کاهش میدهد.
بهروزرسانیهای دستهای:
- به جای بهروزرسانی فوری DOM واقعی پس از هر تغییر حالت، چارچوب بهروزرسانیها را دستهبندی میکند و پس از فرآیند تفاوت، همه آنها را یکباره انجام میدهد. این هزینهی مدیریت بهروزرسانیهای متعدد در زمان کوتاه را کاهش میدهد.
استراتژی بهروزرسانی کارآمد:
- الگوریتم تفاوت بهطور کارآمد کمترین مجموعه تغییرات لازم را برای همگامسازی Virtual DOM با DOM واقعی محاسبه میکند. این تضمین میکند که فقط تغییرات لازم در DOM واقعی منعکس میشود، که بهروزرسانیها را سریعتر میکند.
رندر غیرهمزمان:
- برخی چارچوبها به روزرسانیهای غیرهمزمان را اجازه میدهند، به این معنی که رندر و بهروزرسانی DOM میتواند در پسزمینه بدون مسدود کردن رشته اصلی اتفاق بیفتد. این باعث میشود برنامهها سریعتر و پاسخگوتر احساس شوند.
چارچوبهایی که از DOM مجازی استفاده میکنند
DOM مجازی به طور گستردهای در بسیاری از چارچوبها و کتابخانههای جاوا اسکریپت مدرن استفاده میشود. برخی از معروفترینها عبارتند از:
- React: React معروفترین و پراستفادهترین چارچوب است که از DOM مجازی استفاده میکند. این از ابتدا با DOM مجازی طراحی شده است و به یک الگوریتم تفاوت برای بهروزرسانی کارآمد DOM واقعی متکی است.
- Vue.js: Vue.js همچنین از یک DOM مجازی برای بهینهسازی بهروزرسانیها استفاده میکند. این به روشی مشابه React کار میکند، با رندر مجدد اجزاء در DOM مجازی ابتدا و اعمال تغییرات حداقلی به DOM واقعی.
- Preact: Preact یک جایگزین سبک وزن برای React است. این ساختاری بسیار مشابه با React دارد اما کوچکتر در اندازه است. از یک DOM مجازی مانند React استفاده میکند، با یک سیستم تفاوت و پچینگ کارآمد.
- Inferno: Inferno یک کتابخانه سریع و سبک دیگر است که بر عملکرد تمرکز دارد. این از یک DOM مجازی استفاده میکند و برای برنامههای با عملکرد بالا بهینهسازی شده است، به ویژه برای برنامههای بزرگ مقیاس با بهروزرسانیهای مکرر.
حال که دریافتید Virtual DOM چیست و فهمیدید که DOM مجازی چگونه کار می کند. می توانید از دیگر مقالات سایت Evolearn | ایوولرن دیدن کنید.