الفرق بين الـ Real DOM والـ Virtual DOM

ما هو الفيرشوال دومما هو ال Virtual DOMما هو ال Real DOMالـ Virtual DOM في ريأكتالفرق بين Real DOM و Virtual DOMكيفية عمل ريأكت

جدول مرجعي سريع

وجه المقارنة	الـ Real DOM التقليدي	الـ Virtual DOM في ريأكت
طبيعة التواجد والخلية	شجرة حقيقية من كتل الواجهة داخل ذاكرة المتصفح النشطة	نسخة برمجية خفيفة الوزن على شكل كائن جافا سكريبت محايد
تكلفة الموارد والأداء	باهظ الثمن ويتسبب في بطء الرندرة وثقل استجابة المتصفح	سريع جداً وخفيف الاستهلاك لموارد الذاكرة والسيرفر
آلية تحديث الشاشة	يعيد بناء عناصر الواجهة بالكامل وتحديث أفرع الشجرة يدوياً	يقارن الاختلافات أولاً ويحدث فقط العنصر المتغير بدقة متناهية

الشرح

لكي تفهم سر السرعة الخارقة لمواقع ريأكت، يجب أن نغوص قليلاً خلف كواليس المتصفح (Browser). عندما يقرأ المتصفح ملف HTML عادي، فإنه يقوم بتحويله إلى شجرة هيكلية ضخمة يُطلق عليها هندسياً اسم Real DOM (مختصر Document Object Model). هذه الشجرة هي التي تسمح لجافا سكريبت بالوصول لعناصر الموقع وتعديلها. ولكن، مع تطور الويب، ظهرت مشكلة تقنية ضخمة تتعلق بالأداء؛ وهي السبب الأساسي الذي جعل مهندسي فيسبوك يخترعون Virtual DOM. دعنا نفهم الحكاية ببساطة.

1. الأزمة الهندسية في الـ Real DOM التقليدي

الـ Real DOM يشبه مبنى ضخماً من الخرسانة. إذا أردت تعديل نافذة واحدة فقط في الطابق العاشر باستخدام جافا سكريبت العادية، فإن المتصفح يضطر أحياناً إلى إعادة حساب مساحات وأماكن وتنسيقات كافة الطوابق والغرف الأخرى المحيطة بها (عملية تُسمى Reflow & Repaint). في المواقع التفاعلية الضخمة التي تحتوي على آلاف العناصر المتغيرة كشبكات التواصل الاجتماعي، تصبح هذه التحديثات المتكررة مباشرة على الـ Real DOM بمثابة كابوس يُبطئ المتصفح ويجعل الموقع ثقيلاً في الاستجابة.

2. الحل العبقري: الـ Virtual DOM (الدوم الافتراضي)

بدلاً من التعديل المباشر في الخرسانة الحقيقية، قامت ريأكت بابتكار Virtual DOM. وهو عبارة عن نسخة افتراضية خفيفة الوزن ومجردة تماماً من الـ Real DOM، محفوظة داخل الذاكرة ككائن جافا سكريبت بسيط (JavaScript Object). عندما يحدث أي تغيير في بيانات الموقع، لا تذهب ريأكت للمتصفح مباشرة، بل تطبق العملية ضمن آلية ذكية من 3 خطوات:

إنشاء شجرة جديدة: تقوم ريأكت بتوليد شجرة Virtual DOM كاملة تحتوي على التعديل الجديد.
عملية المقارنة (Diffing Algorithm): تقوم خوارزمية ريأكت الذكية بمقارنة شجرة الـ Virtual DOM الجديدة بالشجرة القديمة التي كانت قبل التعديل مباشرة لمعرفة السطر أو العنصر الذي تغير بدقة.
التحديث الذكي (Reconciliation): بعد معرفة العنصر المتغير فقط (وليكن زر واحد أو كلمة واحدة)، تذهب ريأكت إلى الـ Real DOM الحقيقي وتقوم بتحديث هذا العنصر المحدود بمفرده دون المساس ببقية أجزاء الصفحة، وهو ما يرفع الأداء لسرعات جنونية.

التطبيق والتمثيل البرمجي لآلية العمل

دعنا نرى كيف تترجم ريأكت عناصر واجهة المستخدم إلى كائن جافا سكريبت خفيف خلف الكواليس لتتمكن من مقارنته بسرعة:

شكل الكود الذي تكتبه (JSX):

1	<div className="box">
2	<h1>مرحباً بك في نوفيل</h1>
3	</div>

كيف تراه ريأكت في الذاكرة كـ Virtual DOM (كائن مبسط):

1	// هذا كائن خفيف جداً يسهل على الخوارزمية فصحه ومقارنته في أجزاء من المليون من الثانية
2	{
3	type: 'div',
4	props: { className: 'box' },
5	children: [
6	{ type: 'h1', props: null, children: 'مرحباً بك في نوفيل' }
7	]
8	}

نصائح احترافية

—تركاية هذا الدرس التي تميز المطور العادي عن المحترف في المقابلات الوظيفية (Interviews): يتوهم الكثيرون أن الـ Virtual DOM يقوم بتسريع المتصفح لأنه أسرع من جافا سكريبت العادية. الحقيقة العلمية هي أن التعديل المباشر الذكي على الـ Real DOM هو الأسرع دائماً، ولكن قوة وعبقرية الـ Virtual DOM تكمن في أنه يوفر عليك كمطور عناء التفكير في كيفية تحديث الواجهة بأقل تكلفة؛ فهو يقوم بحساب التعديل الأقل والأكفأ نيابة عنك تلقائياً وبشكل ميكانيكي، مما يضمن ثبات أداء تطبيقك مهما كبر حجم الأكواد وتفرعت الصفحات.

الدرس السابق

ما هي React ولماذا نستخدمها؟

الدرس التالي

تهيئة بيئة العمل المحلية باستخدام Node.js و npm

وجه المقارنة

الـ Real DOM التقليدي

الـ Virtual DOM في ريأكت

طبيعة التواجد والخلية

شجرة حقيقية من كتل الواجهة داخل ذاكرة المتصفح النشطة

نسخة برمجية خفيفة الوزن على شكل كائن جافا سكريبت محايد

تكلفة الموارد والأداء

باهظ الثمن ويتسبب في بطء الرندرة وثقل استجابة المتصفح

سريع جداً وخفيف الاستهلاك لموارد الذاكرة والسيرفر

آلية تحديث الشاشة

يعيد بناء عناصر الواجهة بالكامل وتحديث أفرع الشجرة يدوياً

يقارن الاختلافات أولاً ويحدث فقط العنصر المتغير بدقة متناهية

1. الأزمة الهندسية في الـ Real DOM التقليدي

2. الحل العبقري: الـ Virtual DOM (الدوم الافتراضي)

إنشاء شجرة جديدة: تقوم ريأكت بتوليد شجرة Virtual DOM كاملة تحتوي على التعديل الجديد.

عملية المقارنة (Diffing Algorithm): تقوم خوارزمية ريأكت الذكية بمقارنة شجرة الـ Virtual DOM الجديدة بالشجرة القديمة التي كانت قبل التعديل مباشرة لمعرفة السطر أو العنصر الذي تغير بدقة.

التحديث الذكي (Reconciliation): بعد معرفة العنصر المتغير فقط (وليكن زر واحد أو كلمة واحدة)، تذهب ريأكت إلى الـ Real DOM الحقيقي وتقوم بتحديث هذا العنصر المحدود بمفرده دون المساس ببقية أجزاء الصفحة، وهو ما يرفع الأداء لسرعات جنونية.

التطبيق والتمثيل البرمجي لآلية العمل

دعنا نرى كيف تترجم ريأكت عناصر واجهة المستخدم إلى كائن جافا سكريبت خفيف خلف الكواليس لتتمكن من مقارنته بسرعة:

شكل الكود الذي تكتبه (JSX):

1	<div className="box">
2	<h1>مرحباً بك في نوفيل</h1>
3	</div>

كيف تراه ريأكت في الذاكرة كـ Virtual DOM (كائن مبسط):

1	// هذا كائن خفيف جداً يسهل على الخوارزمية فصحه ومقارنته في أجزاء من المليون من الثانية
2	{
3	type: 'div',
4	props: { className: 'box' },
5	children: [
6	{ type: 'h1', props: null, children: 'مرحباً بك في نوفيل' }
7	]
8	}