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 للفوز بمسابقه هديل للتودين من هنا .

الأوسمة: dom, javascript, jquery, performance