Правильный способ динамической генерации HTML с помощью jQuery

Я нашел несколько разных и противоречивых ответов на эту тему.

Я создаю приложение, которое работает в основном с HTML, динамически генерируемым jQuery, на основе результатов, полученных из базового API в форме данных JSON.

Некоторые из моих коллег (лично) сказали мне, что лучше всего было бы сделать что-то вроде этого:

var ul = $("
").addClass("some-ul");
$.each(results, function(index) {
  ul.append($("
").html(this).attr("id", index));
});
$("body").append($("
").attr("id", "div-id").addClass("some-div").append(ul));

и т. Д. Причина, по которой мне это сказали, заключалась в том, что «обновляет DOM напрямую. вместо синтаксического анализа html для достижения этой цели ".

Однако я вижу много такого кода (тот же пример):

var toAppend = '
';
$.each(results, function(index) {
  toAppend += '
' + this + '
';
});
toAppend += '
'

Что я лично считаю не таким элегантным, но лучше ли? Я погуглил пару минут и нашел эту статью . По сути, речь идет о резком увеличении производительности за счет конкатенации строк - моего «второго пути».

Основная проблема этой статьи заключается в том, что она была выпущена в 2009 году и обсуждалась версия jQuery 1.3. Сегодня текущий выпуск - это версия 1.6.4, которая может вести себя совершенно иначе. И это проблема большинства статей на эту тему, которые я уже нашел, и я также как-то сомневаюсь в их достоверности.

Вот почему я решил разместить здесь вопрос и спросить - какой метод создания DOM на самом деле является правильным, в зависимости от производительности?

ВАЖНОЕ РЕДАКТИРОВАНИЕ:

Я написал небольшой тест, чтобы проверить, какой подход лучше с учетом производительности.

jsFiddle - версия конкатенации

jsFiddle - версия соединения массива

Код:

var text = "lorem ipsum";
var strings = $("#strings");
var objects = $("#objects");
var results = $("#results");

// string concatenation
var start = new Date().getTime();
var toAppend = ['
'];
for (var i = 1; i <= 20000; i++) {
    toAppend[i] = '
' + text + '
';
}
toAppend[i++] = '
';
results.append(toAppend.join(""));
strings.html(new Date().getTime() - start);

// jquery objects
var start = new Date().getTime();
var ul = $("
").attr("id", "ul-id2").addClass("ul-class");
for (var i = 0; i < 20000; i++) {
    ul.append($("
").attr("id", "li-id2-" + i).addClass("li-class"));
}
results.append($("
").attr("id", "div-id2").addClass("div-class").append(ul));
objects.html(new Date().getTime() - start);

Кажется, что работа со строками выполняется быстрее (в Firefox 7 примерно в 7 раз), чем при использовании объектов jQuery и методы. Но я могу ошибаться, особенно если в этом "тестовом" коде есть какие-либо ошибки или недочеты, снижающие производительность. Не стесняйтесь вносить любые изменения.

Примечание: я использовал Array join из-за упомянутой ранее статьи вместо фактического объединения.

РЕДАКТИРОВАТЬ: Основываясь на предложении @hradac, я использовал фактическую конкатенацию строк в тесте, и это действительно улучшило время.