شرح صفوف ومحتوى الفقرة
يؤدي إلحاق مئات العناصر واحداً تلو الآخر داخل قائمة حية إلى استنزاف المعالج بإعادة حساب التخطيط البصري مع كل عنصر. تحل الدالة document.createDocumentFragment() هذه المشكلة بإنشاء حاوية خفيفة بلا وسم خارجي (nodeType === 11) تجمع العناصر في الذاكرة.
وعند استدعاء list.appendChild(frag) تنتقل العناصر الأبناء فقط دفعةً واحدة إلى القائمة برسمة متصفح واحدة، وتفرغ الحاوية المؤقتة تلقائياً كما يوضح الجدول المقارن:
| دالة الإنشاء | قيمة nodeType | هل تترك غلافاً بالشجرة؟ | الاستخدام العملي الأنسب |
|---|---|---|---|
document.createElement(tag) | 1 | نعم (وسم فعلي) | بناء عناصر الواجهة القياسية |
document.createTextNode(str) | 3 | لا (عقدة نصية) | إدراج نصوص آمنة بجوار الأيقونات |
document.createComment(str) | 8 | لا (تعليق HTML) | علامات إرشادية غير مرئية بالقوالب |
document.createDocumentFragment() | 11 | لا (تفرغ فور الإلحاق) | تجميع عشرات العناصر وإدراجها برسمة واحدة |
JavaScript
const frag = document.createDocumentFragment();
const items = ['DOM Tree', 'Fragment', 'Single Paint'];
for (const label of items) {
const li = document.createElement('li');
li.textContent = label;
frag.appendChild(li);
}
document.getElementById('list').appendChild(frag);