یکبار برای همیشه virtual DOM رو بفهمیم!

تو این مقاله قراره درباره DOM یکسری چیزای جدید یاد بگیریم و درنهایت گذری به virtual DOM معروف داشته باشیم!

به عنوان یک توسعه دهنده فرانت احتمالا اینو شنیدین که دستکاری DOM یا DOM manipulation هزینه بره و در مواقعی به پرفورمنس اسیب میزنه!
اما بریم ببینم داستان دقیقا از چه قراره و چرا دستکاری DOM هزینه بره!

برای پاسخ دادن به این سوال ، بریم ببینیم browser ها چطور یک رابط کاربری رو به نمایش در میارن!!
وقتی یک url رو در مرورگر وارد میکنیم درواقع یک http request به سرور مربوطه میزنیم و معمولا یک سند HTML در رسپانس دریافت میکنیم!

1. مرورگر میاد سند html رو به یک DOM Tree تبدیل میکنه.
2. مرورگر کد های css رو هم تجزیه میکنه.
3. در این مرحله مرورگر با استفاده از نتایج مراحل قبل یک Render Tree ایجاد میکند ( render tree رو مشابه DOM tree درنظر بگیرین با این تفاوت که شامل استایل ها هم میشه ، همچنین عناصر غیرقابل مشاهده مثل head رو شامل نمیشه! )
4. درنهایت با ایجاد Render tree مرورگر میتونه اونو روی screen نمایش بده و بقول معروف paint کنه ( اینکه دقیقا این عملیات چطور انجام میشه رو میتونیم بیخیال شیم ولی باید با flow و paint آشنا شیم!! )

paint & flow چیه؟

• flow = مراحلی که مرورگر برای رندر کردن و آماده‌سازی DOM طی می‌کند.
  paint = فرایندی که طی آن مرورگر المان‌های UI را روی صفحه رندر می‌کند.

خب حالا اینا یعنی چی؟ بزار یک مثال ساده بزنم تا لپ مطلب ادا شه :)

فرض کنیم میخوایم یک دکمه روی DOM ایجاد کنیم ، در مرحله اول نیازه که یکسری محاسبات انجام بشه!
مثلا استایل های دکمه محاسبه بشن ( بک گراند آبی )

یا اندازه و پوزیشن دکمه محاسبه بشه ( مثلا 50px در 50px در موقعیت x,y )
محاسباتی مرتبط با اینکه این دکمه روی سایر المان ها تو DOM چه تاثیری میزاره و چیزایی از این قبیل
این محاسبات درواقع میشن همون flow

در مرحله بعدی پیکسل های لازم برای نمایش دکمه رندر میشن، تکست دکمه نوشته میشه و در نهایت دکمه روی صفحه نمایش داده میشه
این مرحله هم میشه paint

حالا بریم سراغ اصل مطلب
سوال اصلی این بود که چرا دستکاری دام یا DOM manipulation هزینه بره و ممکنه به پرفورمنس آسیب بزنه!!

یکی از دلایلش همین بحث repaint و reflow هست
به طوری که با هر تغییر روی دام ممکنه repaint یا reflow یا حتی هردو اینها رخ بدن!
یعنی دام مجبور میشه بخاطر تغییر ایجاد شده مجدد محاسبات خودش رو انجام بده و اگه مشخصه های ظاهری تغییر کرده باشند ( مثلا رنگ بک گراند عوض شده باشه ) باید مجدد رندر کنه و اصطلاحا repaint انجام میشه!
انجام این مراحل بار سنگینی روی CPU و GPU دارد و FPS را کاهش میدن!

virtual DOM چیه؟

حالا این وسط react میاد از دام مجازی ( virtual DOM ) استفاده میکنه تا عملکرد بهتری داشته باشیم! چطور؟

میاد یک نمونه از DOM رو در حافظه ذخیره میکنه ( virtual DOM ) ، وقتی تغییری روی DOM انجام میشه، دام با اون نسخه ای که تو حافظه ذخیره کردیم مقایسه میشه و ری اکت متوجه میشه دقیقا کدوم قسمت ها تغییر کردن! ( این مقایسه به کمک الگوریتمی تحت عنوان Diffing Algorithm انجام میشه )

در نهایت این تغییرات دسته بندی میشن و بصورت یکجا تو دام اعمال میشن!

این کار باعث میشه repaint و reflow به حداقل برسه

بیاین با یک مثال بهتر متوجه ماجرا بشیم
فرض کنیم در یک لیست 100 تا آیتم داریم و قراره یک آیتم به اون اضافه بشه
اگه اینکارو با جاوااسکریپت روی دام واقعی اعمال کنین احتمالا تمام 101 ایتم مجدد رندر میشن اما اگه دام مجازی رو بیاریم وسط ، با الگوریتم های مقایسه ای که انجام میده متوجه میشه که فقط آیتم 101 باید رندر بشه و 100 ایتم دیگه نیازی به رندر شدن مجدد ندارن!
و خب باعث کاهش reflow و repaint میشه!!

سخن پایانی

امیدوارم این مقاله براتون مفید واقع شده باشه و تونسته باشم به زبون ساده مباحثی که میخواستم رو منتقل کنم!
من محمدم و تصمیم دارم هر از گاهی درباره بعضی مفاهیم تخصصی به زبون ساده مقاله بنویسم!!

منابع

https://www.phpied.com/rendering-repaint-reflowrelayout-restyle/