تعرف علي مصطلح Virtual DOM ؟

raheel · 01-04-2019, 07:10 PM

كثر الحديث في العامين الماضيين، بالتحديد منذ ظهور مكتبة React.js، عن Virtual DOM وعن دوره الكبير والفعال في جعل التحديثات والتغييرات التي تتم على تطبيقات الويب أحادية الصفحة Single Page Applications أكثر سرعة وانسيابية.
الإشكالية

في تطبيقات الويب الحديثة أصبحنا نتكلم كثيرا عن معالجة DOM لتحديث صفحات التطبيق وبعث الروح فيها. الإشكال هنا أن معالجة DOM بطيئة مقارنة مع عمليات الجافاسكريبت الأخرى.
تخيل أنه لدينا لائحة <ul> تضم 10 عناصر، إذا قمنا بتغيير أو حذف عنصر واحد فقط فإن معظم إطارات عمل الجافاسكريبت التي لا تعتمد على ال Virtual DOM تقوم بإعادة بناء اللائحة كاملة وإظهارها للمستخدم بعد تغيير عنصر واحد فقط، أي أن 9 عناصر بقيت كما هي ولم يكن من داع أبدا لمعالجتها مادام التغير يشمل عنصر واحد فقط.
لن تلاحظ انخفاظا في أداء التطبيق إذا كان يحتوى على عدد محدود فقط من العقد Nodes، ولكن في التطبيقات الكبيرة والمعقدة، التي تحتوي على الآف العناصر، قد يكلفها كل هذا الجهد، المبدول في معالجة عقد لم يتم إجراء أي تحديث عليها من طرف المستخدم، ثمنا غاليا يظهر جليا في انخفاض الأداء والسرعة وكذا في سلالستها.
Virtual DOM

في DOM الحقيقي أو الأصلي، يتم تقديم عنصر أو عقدة معينة على هذا النحو :
<ul id='my-list'> <li>Item 1</li> <li>Item 2</li> <ul>
1
2
3
4

<ul id='my-list'>
<li>Item 1</li>
<li>Item 2</li>
<ul>

وفي كل مرة يتم إضافة عنصر <li> مثلا لهذه القائمة، يتم البحث عن العنصر <ul> ويتم إضافة العنصر الجديد <li> إليه :
document.getElementById('my-list').appendChild(myNewNode);
1

document.getElementById('my-list').appendChild(myNewNode);

عملية البحث المتكررة هذه تسبب مشاكل في الأداء للتطبيق كلما زاد حجمه وتضاعف عدد عناصر HTML فيه.
لهذا جاء ال DOM الوهمي على شكل واجهة موازية ل DOM الأصلي Real DOM ولكن على شكل كائنات جافاسكريبت، وهذا مثال لما يمكن أن يكون عليه ال Virtual DOM :
Let domNode = { tag: 'ul' attributes: { id: 'my-list' } children: [ // هنا عناصر <li> ] };
1
2
3
4
5
6
7

Let domNode = {
tag: 'ul'
attributes: { id: 'my-list' }
children: [
// هنا عناصر <li>
]
};

هذا شكل القائمة السابقة في ال Virtual DOM، ولو أردنا القيام بإضافة عنصر جديد إليها فسيتم ذلك بهذه الطريقة :
domNode.children.push('<li>Item 3</li>');
1

domNode.children.push('<li>Item 3</li>');

هنا القائمة <ul> تم تقديمها على شكل كائن جافاسكريبت سميناه domNode، والوصول إلى هذا الكائن وتحديثه في الجافاسكريبت أسرع بكثير من عملية البحث عن القائمة <ul> بواسطة document.getElementById. هناك فرق كبير في السرعة والأداء!
الجميل مع ال Virtual DOM كذلك أنه لا يتم إجراء أي تغييرات على واجهة المستخدم إلا إذا طلب منه ذلك، عن طريق الدالة render مثلا في React.js، أي أن العمليات كلها تتم في الذاكرة العشوائية وعندما يحين وقت تحديث الصفحة يقوم ال Virtual DOM بمقارنة نفسه مع حالته التي كان عليها قبل إجراء التغييرات فيعرف بذلك التحديثات التي سيقوم بها على مستوى ال DOM الأصلي، أي أنه يقوم فقط بتحديث العناصر التي يجب عليها أن تحدث تسمى هذه العملية Diffing.

وهذا ملخص للعملية برمتها :

المستخدم يقوم بإضافة عنصر جديد للقائمة <ul>.
يتم إضافة هذا العنصر <li> للكائن الذي يمثل القائمة في ال Virtual DOM.
ال Virtual DOM يقوم بمقارنة نفسه مع حالته البدئية قبل إضافة العنصر <li>.
ال Virtual DOM يجد بأن التغيير الوحيد حصل على مستوى العنصر <li> الجديد المضاف.
يتم دمج هذا التغيير، وفقط هذا التغيير، في ال DOM الأصلي.
يظهر التغيير على الشاشة للمستخدم.

تظهر فائدة ال Virtual DOM بشكل واضح في المشاريع الكبيرة والمعقدة، إنه إحدى نقاط القوة الرئيسية في إطار العمل React.js الذي طورت به الواجهات الأمامية لموقع فيسبوك والمواقع الأخرى التابعة له، وهذا ما حدى بعدد من المنافسين الآخرين (Vue.js, Ember.js) لتبني هذه الفكرة والإستفادة من قوتها.

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress

01-04-2019, 07:10 PM	#1
raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10	raheel تاريخ التسجيل: Feb 2019 العمر: 38 المشاركات: 1,149 التقييم: 10 تعرف علي مصطلح Virtual DOM ؟ تعرف علي مصطلح Virtual DOM ؟ كثر الحديث في العامين الماضيين، بالتحديد منذ ظهور مكتبة React.js، عن Virtual DOM وعن دوره الكبير والفعال في جعل التحديثات والتغييرات التي تتم على تطبيقات الويب أحادية الصفحة Single Page Applications أكثر سرعة وانسيابية. الإشكالية في تطبيقات الويب الحديثة أصبحنا نتكلم كثيرا عن معالجة DOM لتحديث صفحات التطبيق وبعث الروح فيها. الإشكال هنا أن معالجة DOM بطيئة مقارنة مع عمليات الجافاسكريبت الأخرى. تخيل أنه لدينا لائحة <ul> تضم 10 عناصر، إذا قمنا بتغيير أو حذف عنصر واحد فقط فإن معظم إطارات عمل الجافاسكريبت التي لا تعتمد على ال Virtual DOM تقوم بإعادة بناء اللائحة كاملة وإظهارها للمستخدم بعد تغيير عنصر واحد فقط، أي أن 9 عناصر بقيت كما هي ولم يكن من داع أبدا لمعالجتها مادام التغير يشمل عنصر واحد فقط. لن تلاحظ انخفاظا في أداء التطبيق إذا كان يحتوى على عدد محدود فقط من العقد Nodes، ولكن في التطبيقات الكبيرة والمعقدة، التي تحتوي على الآف العناصر، قد يكلفها كل هذا الجهد، المبدول في معالجة عقد لم يتم إجراء أي تحديث عليها من طرف المستخدم، ثمنا غاليا يظهر جليا في انخفاض الأداء والسرعة وكذا في سلالستها. Virtual DOM في DOM الحقيقي أو الأصلي، يتم تقديم عنصر أو عقدة معينة على هذا النحو : <ul id='my-list'> <li>Item 1</li> <li>Item 2</li> <ul> 1 2 3 4 <ul id='my-list'> <li>Item 1</li> <li>Item 2</li> <ul> وفي كل مرة يتم إضافة عنصر <li> مثلا لهذه القائمة، يتم البحث عن العنصر <ul> ويتم إضافة العنصر الجديد <li> إليه : document.getElementById('my-list').appendChild(myNewNode); 1 document.getElementById('my-list').appendChild(myNewNode); عملية البحث المتكررة هذه تسبب مشاكل في الأداء للتطبيق كلما زاد حجمه وتضاعف عدد عناصر HTML فيه. لهذا جاء ال DOM الوهمي على شكل واجهة موازية ل DOM الأصلي Real DOM ولكن على شكل كائنات جافاسكريبت، وهذا مثال لما يمكن أن يكون عليه ال Virtual DOM : Let domNode = { tag: 'ul' attributes: { id: 'my-list' } children: [ // هنا عناصر <li> ] }; 1 2 3 4 5 6 7 Let domNode = { tag: 'ul' attributes: { id: 'my-list' } children: [ // هنا عناصر <li> ] }; هذا شكل القائمة السابقة في ال Virtual DOM، ولو أردنا القيام بإضافة عنصر جديد إليها فسيتم ذلك بهذه الطريقة : domNode.children.push('<li>Item 3</li>'); 1 domNode.children.push('<li>Item 3</li>'); هنا القائمة <ul> تم تقديمها على شكل كائن جافاسكريبت سميناه domNode، والوصول إلى هذا الكائن وتحديثه في الجافاسكريبت أسرع بكثير من عملية البحث عن القائمة <ul> بواسطة document.getElementById. هناك فرق كبير في السرعة والأداء! الجميل مع ال Virtual DOM كذلك أنه لا يتم إجراء أي تغييرات على واجهة المستخدم إلا إذا طلب منه ذلك، عن طريق الدالة render مثلا في React.js، أي أن العمليات كلها تتم في الذاكرة العشوائية وعندما يحين وقت تحديث الصفحة يقوم ال Virtual DOM بمقارنة نفسه مع حالته التي كان عليها قبل إجراء التغييرات فيعرف بذلك التحديثات التي سيقوم بها على مستوى ال DOM الأصلي، أي أنه يقوم فقط بتحديث العناصر التي يجب عليها أن تحدث تسمى هذه العملية Diffing. وهذا ملخص للعملية برمتها : المستخدم يقوم بإضافة عنصر جديد للقائمة <ul>. يتم إضافة هذا العنصر <li> للكائن الذي يمثل القائمة في ال Virtual DOM. ال Virtual DOM يقوم بمقارنة نفسه مع حالته البدئية قبل إضافة العنصر <li>. ال Virtual DOM يجد بأن التغيير الوحيد حصل على مستوى العنصر <li> الجديد المضاف. يتم دمج هذا التغيير، وفقط هذا التغيير، في ال DOM الأصلي. يظهر التغيير على الشاشة للمستخدم. تظهر فائدة ال Virtual DOM بشكل واضح في المشاريع الكبيرة والمعقدة، إنه إحدى نقاط القوة الرئيسية في إطار العمل React.js الذي طورت به الواجهات الأمامية لموقع فيسبوك والمواقع الأخرى التابعة له، وهذا ما حدى بعدد من المنافسين الآخرين (Vue.js, Ember.js) لتبني هذه الفكرة والإستفادة من قوتها. المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress
	اقتباس

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
جناية الفرق الكلاميّة على مصطلح التأويل	سالجان	قسم القرآن الكريم	1	18-07-2019 12:01 AM
تعريف مصطلح on topic links و مصطلح off topic links	raheel	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	14-03-2019 03:10 PM
إنشاء مدونة بلوغر – تعرف على الطريقة الصحيحة لإنشاء مدونتك الخاصة مجانا	القيصر	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	11-03-2019 06:43 AM
كتابة المقالات – تعرف على الطريقة الصحيحة لكتابة المقالات ضمن شروط السيو	القيصر	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	11-03-2019 06:32 AM
البرمجة للمبتدئين – تعرف على أهم الأمور اللازمة للبدأ في هذا المجال	القيصر	قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress	0	11-03-2019 06:22 AM

اسم العضو		حفظ البيانات؟
كلمة المرور

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)