غالباً ما يُعتقد أن Virtual DOM أسرع من Real DOM، لكن الأمر ليس بهذه البساطة. هذا المقال يشرح لماذا يستخدم مطورو الويب Virtual DOM وكيف يساهم في بناء تطبيقات ويب أسرع وأكثر سلاسة.
سمعت على الأرجح أن «رياكت (React) سريع لأنه يستخدم Virtual DOM». يبدو هذا منطقياً للوهلة الأولى، فمتصفح الإنترنت يرسم صفحات الويب باستخدام شيء اسمه 'Real DOM' أو 'نموذج كائن المستند الحقيقي'، والذي يوصف غالباً بأنه «مكلف» أو «بطيء» في التحديث. فهل هذا يعني أن Virtual DOM أسرع بطبيعته؟ في الحقيقة، الأمر أكثر تعقيداً من ذلك.
تخيل أنك تبني منزلاً. الـ Real DOM هو المخطط الهندسي الفعلي للمنزل الذي يستخدمه البناء (المتصفح) لبناء المنزل وعرضه. عندما تفتح صفحة ويب، يقوم المتصفح بتحويل كود HTML إلى هذا المخطط الشجري الذي يسمى Real DOM، وهو يمثل كل جزء في الصفحة (عنوان، زر، صورة). أي تغيير في صفحة الويب يتطلب تعديل هذا المخطط الحقيقي مباشرة. إذا كنت تعرف بالضبط أي حائط تريد تغييره، فإن تغييره مباشرة في المخطط الحقيقي يمكن أن يكون سريعاً جداً وفعالاً.
المشكلة تظهر عندما تحتاج إلى إجراء العديد من التغييرات الصغيرة والمتكررة في أماكن مختلفة من المنزل. تخيل أنك تقوم بتغيير ألوان كل غرفة، ثم أثاثها، ثم حجم كل نافذة. في كل مرة، سيضطر البناء لإعادة تقييم جزء كبير من المخطط، وقد يتطلب إعادة رسم أجزاء كبيرة من المنزل. هذا يمكن أن يكون بطيئاً جداً ومستهلكاً للموارد، خاصة في تطبيقات الويب الحديثة التي تتغير فيها واجهة المستخدم باستمرار.
هنا يأتي دور Virtual DOM: بدلاً من تعديل المخطط الهندسي الفعلي (Real DOM) مباشرة في كل مرة، تخيل أن لديك مسودة أو نسخة وهمية من هذا المخطط (Virtual DOM). عندما تريد إجراء تغييرات، فإنك لا تعدلها على المخطط الحقيقي. بدلاً من ذلك، تقوم بإجراء جميع التعديلات على هذه المسودة الوهمية أولاً. تقوم بتغيير الألوان والأثاث والنوافذ على المسودة.
بعد أن تنتهي من جميع التغييرات على المسودة الوهمية، يقوم نظام Virtual DOM بمقارنة هذه المسودة الجديدة مع المسودة القديمة، ويكتشف *فقط* الاختلافات الجوهرية. ثم يخبر البناء (المتصفح) بالتغييرات *الضرورية والحد الأدنى* التي يجب إجراؤها على المخطط الحقيقي (Real DOM). هذا يشبه إخبار البناء: 'غيّر لون الغرفة رقم 3 فقط، وأضف نافذة صغيرة هنا'. بدلًا من إعادة بناء أجزاء كبيرة، يقوم المتصفح بتحديث العناصر المطلوبة فقط.
Virtual DOM ليس أسرع بطبيعته لكل تغيير فردي. بل هو أداة تجعل عملية تحديث واجهة المستخدم *المعقدة والمتكررة* أكثر كفاءة وسلاسة. يقلل من عدد المرات التي يجب على المتصفح فيها إعادة رسم الصفحة بالكامل، مما يجعل تطبيقات الويب أكثر استجابة ويسهل على المطورين بناء واجهات مستخدم ديناميكية دون القلق بشأن مشاكل الأداء الناتجة عن التحديثات المتكررة للـ Real DOM. إنه يوفر تجربة أفضل للمستخدم والمطور على حد سواء.
تخيل أنك تبني منزلاً. الـ Real DOM هو المخطط الهندسي الفعلي للمنزل الذي يستخدمه البناء (المتصفح) لبناء المنزل وعرضه. عندما تفتح صفحة ويب، يقوم المتصفح بتحويل كود HTML إلى هذا المخطط الشجري الذي يسمى Real DOM، وهو يمثل كل جزء في الصفحة (عنوان، زر، صورة). أي تغيير في صفحة الويب يتطلب تعديل هذا المخطط الحقيقي مباشرة. إذا كنت تعرف بالضبط أي حائط تريد تغييره، فإن تغييره مباشرة في المخطط الحقيقي يمكن أن يكون سريعاً جداً وفعالاً.
المشكلة تظهر عندما تحتاج إلى إجراء العديد من التغييرات الصغيرة والمتكررة في أماكن مختلفة من المنزل. تخيل أنك تقوم بتغيير ألوان كل غرفة، ثم أثاثها، ثم حجم كل نافذة. في كل مرة، سيضطر البناء لإعادة تقييم جزء كبير من المخطط، وقد يتطلب إعادة رسم أجزاء كبيرة من المنزل. هذا يمكن أن يكون بطيئاً جداً ومستهلكاً للموارد، خاصة في تطبيقات الويب الحديثة التي تتغير فيها واجهة المستخدم باستمرار.
هنا يأتي دور Virtual DOM: بدلاً من تعديل المخطط الهندسي الفعلي (Real DOM) مباشرة في كل مرة، تخيل أن لديك مسودة أو نسخة وهمية من هذا المخطط (Virtual DOM). عندما تريد إجراء تغييرات، فإنك لا تعدلها على المخطط الحقيقي. بدلاً من ذلك، تقوم بإجراء جميع التعديلات على هذه المسودة الوهمية أولاً. تقوم بتغيير الألوان والأثاث والنوافذ على المسودة.
بعد أن تنتهي من جميع التغييرات على المسودة الوهمية، يقوم نظام Virtual DOM بمقارنة هذه المسودة الجديدة مع المسودة القديمة، ويكتشف *فقط* الاختلافات الجوهرية. ثم يخبر البناء (المتصفح) بالتغييرات *الضرورية والحد الأدنى* التي يجب إجراؤها على المخطط الحقيقي (Real DOM). هذا يشبه إخبار البناء: 'غيّر لون الغرفة رقم 3 فقط، وأضف نافذة صغيرة هنا'. بدلًا من إعادة بناء أجزاء كبيرة، يقوم المتصفح بتحديث العناصر المطلوبة فقط.
Virtual DOM ليس أسرع بطبيعته لكل تغيير فردي. بل هو أداة تجعل عملية تحديث واجهة المستخدم *المعقدة والمتكررة* أكثر كفاءة وسلاسة. يقلل من عدد المرات التي يجب على المتصفح فيها إعادة رسم الصفحة بالكامل، مما يجعل تطبيقات الويب أكثر استجابة ويسهل على المطورين بناء واجهات مستخدم ديناميكية دون القلق بشأن مشاكل الأداء الناتجة عن التحديثات المتكررة للـ Real DOM. إنه يوفر تجربة أفضل للمستخدم والمطور على حد سواء.
