JS: טריק לא מוכר לשיפור זמן התגובה של DOM: createDocumentFragment

נדמיין לעצמנו את הלולאה הבאה:

var arr=[……];
  
for(var i=0;i<arr.length;i++)
{
var d=document.createElement("div");

d.innerHTML=arr[i].html;
document.getElementById("divonpage").appendChild(d);

}

מי מאיתנו לא כתב לולאה כזו או דומה לה בחייו. עכשיו נדמיין מה קורה בפנים:

בכל איטרציה של הלולאה, מחושב מחדש arr.length, אחר כך נוצר div חדש, מתווסף לו תוכן והוא נוסף לדף, מה שמרענן מחדש את התצוגה ואת הטבלאות הפנימיות של הדפדפן.

אני מציע את השינוי הבא, והסברים בהערות:

var arr=[……],len=arr.length; // שמירה של כמות המשתנים במערך
var frag = document.createDocumentFragment(); // עיין בקישור


for(var i=0;i<len;i++)
{
var d=document.createElement("div")

d.innerHTML=arr[i].html
frag.appendChild(d) // שמירה "בצד" של מערך מוכן לשימוש

}
// ועכשיו נעדכן את התצוגה של הדפדפן רק פעם אחת
document.getElementById("divonpage").appendChild(frag);

זה נכון שבדפדפנים החדשים יותר יש אופטימיזציות לפתרון בעיות מהסוג הזה, מצד שני, לרוב המוחלט של הגולשים (לפחות בישראל) יש IE6/7 שלא מסתכלים אפילו לכיוון הזה, אז עדיין שווה לעבוד. עובד על כל הדפדפנים מ-IE6 ומעלה (לא בדקתי IE5 וכנופייתו).