DocumentFragment


السلام عليكم و رحمه الله تعالى و بركاته

ال documentFragment عباره عن حاويه خفيفه الوزن و غير مرئيه من مواصفات DOM 1 و موجوده فى جميع المتصفحات ، يمكنك انشائها من خلال document.createDocumentFragment و يمكنك حقن عناصر ال DOM بداخلها طبيعى عن طريق appendChild ، لكن المثير فى الموضوع انه عندما تقوم بحق ال documentFragment نفسها إلى الصفحه  فإن ال documentFragment تختفى و يتم حقن مابداخلها مباشرا إلى الصفحه و عمل reflow واحد فقط و ينتج عن ذلك زياده كفاءه التطبيق و سرعته ، كيف هذا ؟

بدون documentFragment

لنفرض انك تريد حقن 100 عنصر فى الصفحه ، فإنك ستقوم بإنشاء كل عنصر و حقنه فى الصفحه مباشرا ، هذا سيؤدى إلى عمل reflow للصفحه 100 مره و سيؤثر على كفائه التطبيق كما يوضح المثال البسيط التالى :

var body = document.body;
for(var i=0; i<100; i+=1){
    var div = document.createElement("div");
    var text = document.createTextNode("number " + i );
    div.appendChild(text);
    body.appendChild(div);
}

بإستخدام documentFragment

عند إستخدام documentFragment فإنك ستقوم بحقن جميع العناصر المراد حقنها فى الصفحه داخل ال documentFragment اولا ، ثم تحقن ال documentFragment نفسها إلى الصفحه ، حيث ستختفى ال documentFragment و سيحقن ما بداخلها إلى الصفحه دفعه واحده و بالتى سيحدث reflow واحد فقط بدلا من 100 reflow كما يوضح الكود التالى :

var body = document.body;
var fragment = document.createDocumentFragment();
for(var i=0; i<100; i+=1){
    var div = document.createElement("div");
    var text = document.createTextNode("number " + i );
    div.appendChild(text);
    fragment.appendChild(div);
}

body.appendChild(fragment);

إستخدم جون ريسج مطور jQuery هذه الميزه فى jQuery 1.3 لرفع كفائه العديد من الوظائف التى تضمن append .
للمزيد
:
DOM DocumentFragments
Opera efficient JS > repaint and reflow

خارج النص : يمكنك التصويت ل keepondev للفوز بمسابقه هديل للتودين من هنا .

الأوسمة: , , ,

2 تعليقان to “DocumentFragment”

  1. خالد Says:

    جميل جداً شرح بسيط وممتع.

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: