Лучший способ вставить шаблон строки html

Question

У меня есть большое количество datarows в json-файле, который я загружаю через ajax.

Затем я создаю довольно некоторый код html, содержащий некоторые данные для каждой строки, подобной этой.

var gl = $("#gameslist"); 
$.each(DATA.games, function(index, value) { 
    gl.append('<div>... lots of html code here ... '+value.somedata+'</div>'); 
} 

Это кажется довольно медленным, особенно в браузере для мобильных сафари. есть ли какие-либо трюки или плагины jquery, чтобы ускорить это?

редактировать: в соответствии с просьбой, вот Аякс вызов:

$.ajax({ 
    dataType: "json", 
    url: "../games.json" 
}) 
.done(function(gamesjson){ 
    DATA = gamesjson; 
    buildPage(); // this one is calling the above code 
    }) 
.fail(function(){ 
    console.log("games.json error"); 
    }) 
; 

Answer 1

Это медленно причина DATA.games может быть огромной, и вы вызываете (ки, Кэшируемые) $("#gameslist")
но вы используете append() для каждой итерации цикла.

Чтобы ускорить работу, создайте переменную, которая будет содержать строковое представление вашего HTML (содержащего DIV и данные), чем внутри цикла for, присоединяется к строке с использованием +=, чем когда цикл завершен, добавляется только один раз к вашему $("#gameslist")

Здесь я создал live demo, чтобы показать вам резкое различие:

для всего итераций и HTML компл exity только из элементов/итерации
Использование .append() внутри петли                   = ~ 100мс
Использование .append() только один раз (после цикла) = ~ 30ms

Оба теста в for loop ... Это было всего лишь абу t используя .append() в правильном направлении/место.

Теперь назад о различий в скорости между $.each и старым добрым for, я нашел интересный JSPerf:

http://jsperf.com/browser-diet-jquery-each-vs-for-loop _{(Примечание: выше, тем лучше)}

---

^{Напоминание: Тестовый фрагмент:}

var initialTime = new Date().getTime(); 

for(var i=0; i<10000; i++){ 
    // your code 
} 

console.log(new Date.getTime() - initialTime); // ms 

Answer 2

Вы модификации DOM на каждой итерации, если вы только изменить DOM раз вместо этого он будет скорость его значительно.Используйте фрагмент для хранения элементов в то время как перебор, а затем добавить их все сразу в конце:

var gl = document.createDocumentFragment(); 

$.each(DATA.games, function(index, value) { 
    var div = document.createElement('div'), 
     text = document.createTextNode('... lots of html code here ... '+value.somedata); 

    gl.appendChild(div.appendChild(text)); 
} 

$("#gameslist").append(gl);