Virtual DOM چیست؟

1417 امتیاز (4.9/5)

Your page rank:

وبلاگ ایران اسکریپت، کدهای وضعیت HTTP یا status codes در واقع یک سیستم اطلاعاتی است که برای ارتباط بین مرورگر و سرور استفاده می‌شود. این کدها به مرورگر اطلاع می‌دهند که

مهلت استفاده از کد تخفیف 6% درصدی : 1706

{"timer_type":"evergreen","days":"2","hours":"3","minutes":"13","seconds":"7","show_labels":"yes","show_years":"","show_months":"","show_days":"yes","show_hours":"yes","show_minutes":"yes","show_seconds":"yes","label_days_plural":"\u0631\u0648\u0632","label_days_singular":"\u0631\u0648\u0632","label_hours_plural":"\u0633\u0627\u0639\u062a","label_hours_singular":"\u0633\u0627\u0639\u062a","label_minutes_plural":"\u062f\u0642\u06cc\u0642\u0647","label_minutes_singular":"\u062f\u0642\u06cc\u0642\u0647","label_seconds_plural":"\u062b\u0627\u0646\u06cc\u0647","label_seconds_singular":"\u062b\u0627\u0646\u06cc\u0647","block_style":"square","label_position":"inside","evergreen_timer_action":"reset","timer_layout":"\n\t\t\t\t\t{o<} \t\t<div class=\"pp-countdown-item\">\n\t\t\t<div class=\"pp-countdown-digit-wrapper\">\n\t\t\t\t<div class=\"pp-countdown-digit-content\">\n\t\t\t\t\t<div class=\"pp-countdown-digit\">\n\t\t\t\t\t\t{onn}\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"pp-countdown-label-wrapper\">\n\t\t\t\t\t<p class=\"pp-countdown-label\">\n\t\t\t\t\t\t{ol}\t\t\t\t\t<\/p>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t{o>}\t\t<\/div>\n\t\t\n\t\t\t\t\t{d<} \t\t<div class=\"pp-countdown-item\">\n\t\t\t<div class=\"pp-countdown-digit-wrapper\">\n\t\t\t\t<div class=\"pp-countdown-digit-content\">\n\t\t\t\t\t<div class=\"pp-countdown-digit\">\n\t\t\t\t\t\t{dnn}\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"pp-countdown-label-wrapper\">\n\t\t\t\t\t<p class=\"pp-countdown-label\">\n\t\t\t\t\t\t{dl}\t\t\t\t\t<\/p>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t{d>}\t\t<\/div>\n\t\t\n\t\t\t\t\t{h<} \t\t<div class=\"pp-countdown-item\">\n\t\t\t<div class=\"pp-countdown-digit-wrapper\">\n\t\t\t\t<div class=\"pp-countdown-digit-content\">\n\t\t\t\t\t<div class=\"pp-countdown-digit\">\n\t\t\t\t\t\t{hnn}\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"pp-countdown-label-wrapper\">\n\t\t\t\t\t<p class=\"pp-countdown-label\">\n\t\t\t\t\t\t{hl}\t\t\t\t\t<\/p>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t{h>}\t\t<\/div>\n\t\t\n\t\t\t\t\t{m<} \t\t<div class=\"pp-countdown-item\">\n\t\t\t<div class=\"pp-countdown-digit-wrapper\">\n\t\t\t\t<div class=\"pp-countdown-digit-content\">\n\t\t\t\t\t<div class=\"pp-countdown-digit\">\n\t\t\t\t\t\t{mnn}\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"pp-countdown-label-wrapper\">\n\t\t\t\t\t<p class=\"pp-countdown-label\">\n\t\t\t\t\t\t{ml}\t\t\t\t\t<\/p>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t{m>}\t\t<\/div>\n\t\t\n\t\t\t\t\t{s<} \t\t<div class=\"pp-countdown-item\">\n\t\t\t<div class=\"pp-countdown-digit-wrapper\">\n\t\t\t\t<div class=\"pp-countdown-digit-content\">\n\t\t\t\t\t<div class=\"pp-countdown-digit\">\n\t\t\t\t\t\t{snn}\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"pp-countdown-label-wrapper\">\n\t\t\t\t\t<p class=\"pp-countdown-label\">\n\t\t\t\t\t\t{sl}\t\t\t\t\t<\/p>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t\t{s>}\t\t<\/div>\n\t\t\n\t\t\t\t","timer_format":"DHMS","timer_labels":"Years,Months,,\u0631\u0648\u0632,\u0633\u0627\u0639\u062a,\u062f\u0642\u06cc\u0642\u0647,\u062b\u0627\u0646\u06cc\u0647","timer_labels_singular":"Year,Month,,\u0631\u0648\u0632,\u0633\u0627\u0639\u062a,\u062f\u0642\u06cc\u0642\u0647,\u062b\u0627\u0646\u06cc\u0647","time_zone":"-1","timer_exp_text":"","redirect_link":"","redirect_link_target":"","expire_message":""}

2 دهه تجربه

آموزش و توسعه علوم سرمایه گذاری

رشته های منعطف

پوشش بیش از 130 رشته تخصصی

رتبه 1 آموزش حرفه ای

کسب رتبه برتر آموزش از PPQ

آموزش آکادمیک

برگزاری دوره های آکادمیک و ترمیک

مرکز توسعه زیرساخت های انفورماتیکی ایران اسکریپت

IRANSCRIPT College

خدمات سطح بالا حوزه فناوری اطلاعات ایران اسکریپت

Virtual DOM چیست؟

پایگاه دانش ایران اسکریپت، Virtual DOM به عنوان یک تکنیک در توسعه وب شناخته می‌شود که به طور گسترده در فریمورک‌ها و کتابخانه‌های جاوااسکریپت مدرن مورد استفاده قرار می‌گیرد. این تکنیک در پشت صحنه بهینه‌سازی‌هایی را برای به روز رسانی صفحه وب انجام می‌دهد و عملکرد واقعی DOM را بهبود می‌بخشد.

Virtual DOM

DOM (Document Object Model) نماینده ساختار درختی صفحه وب است و با استفاده از آن می‌توانیم به طور دینامیک به عناصر و محتوای صفحه وب دسترسی پیدا کنیم و آن‌ها را تغییر دهیم. اما عملیات تغییر و به روز رسانی مستقیم DOM هزینه‌بر است و ممکن است به کاهش عملکرد صفحه وب منجر شود. بنابراین، برای بهبود عملکرد واقعی DOM، Virtual DOM به وجود آمد.

Virtual DOM در واقع یک نسخه سبک و فرضی از DOM است که در حافظه نگهداری می‌شود. این نسخه شبیه به DOM اصلی است ولی مستقیماً به صفحه وب اعمال نمی‌شود. به جای آن، تغییرات در Virtual DOM انجام می‌شوند و سپس تغییرات به صورت یکجا در DOM اصلی اعمال می‌شوند. این روش بهینه‌سازی‌هایی مانند ری‌رندرینگ (re-rendering) دوباره صفحه را به حداقل می‌رساند و عملکرد صفحه را بهبود می‌بخشد.

عملکرد Virtual DOM به این شکل است که هر بار که تغییری در وضعیت صفحه اتفاق می‌افتد، Virtual DOM به صورت کامل بازسازی می‌شود. سپس تفاوت‌های میان Virtual DOM جدید و قبلی محاسبه می‌شود. سپس تغییرات به صورت یکجا در DOM اصلی اعمال می‌شوند. این رویکرد کارآمد است زیرا فقط تغییرات لازم در DOM اصلی اعمال می‌شوند، در حالی که بقیه تغییرات در Virtual DOM باقی می‌مانند.

Virtual DOM برنامه نویسان را قادر می‌سازد تا بدون نگرانی از به روز رسانی‌های مکرر DOM، تغییرات را انجام دهند و بهبود عملکرد صفحه وب را تجربه کنند. همچنین، این تکنیک به برنامه نویسان این امکان را می‌دهد تا کدهای ساده‌تر و خواناتری بنویسند و سرعت توسعه را افزایش دهند.

سخن آخر

به طور کلی، Virtual DOM یک تکنیک پیشرفته در توسعه وب است که با بهینه‌سازی عملکرد صفحه وب و افزایش سرعت توسعه، تجربه کاربر را بهبود می‌بخشد. با استفاده از Virtual DOM، برنامه نویسان قادر خواهند بود به راحتی تغییرات را اعمال کرده و برنامه‌های تعاملی و پویا را ایجاد کنند.