我发现这个话题上有一些不同且相互矛盾的答案。
我正在开发一个应用程序，它主要通过jQuery动态生成HTML，并基于从底层API获取的JSON数据进行操作。
我的一些同事（私下里）告诉我，最好的方法是像这样做：
我个人认为这种方法不够优雅，但它是否更好呢？我谷歌了几分钟，找到了这篇文章。基本上，它是关于通过使用字符串连接 - 我的“第二种方法”来显著提高性能的。
这篇文章的主要问题在于它发布于2009年，讨论的jQuery版本是1.3。今天，当前版本是1.6.4，可能会有很大的不同。这是我已经发现的大多数有关此主题的文章的问题，我对它们的可信度也有些怀疑。
这就是为什么我决定在这里发布问题并询问 - 基于性能，哪种生成DOM的方法才是正确的？
重要编辑：
我编写了一个小基准测试来测试哪种方法考虑性能更好。 jsFiddle - 连接版 jsFiddle - 数组连接版
代码：
似乎在Firefox 7中，操作字符串比使用jQuery对象和方法快（大约快7倍）。但是我可能是错误的，特别是如果这个“基准测试”的代码中有任何错误或性能降低的错误。请随意进行任何更改。
注意：我使用了Array join，因为之前提到的文章，而不是实际的连接。
编辑：根据@hradac的建议，在基准测试中使用了实际的字符串连接，事实上确实改善了时间。
我正在开发一个应用程序，它主要通过jQuery动态生成HTML，并基于从底层API获取的JSON数据进行操作。
我的一些同事（私下里）告诉我，最好的方法是像这样做：
var ul = $("<ul>").addClass("some-ul");
$.each(results, function(index) {
ul.append($("<li>").html(this).attr("id", index));
});
$("body").append($("<div>").attr("id", "div-id").addClass("some-div").append(ul));
等等。
我被告知的原因是“直接更新DOM而不是解析HTML来实现它”。
然而，我看到很多类似这样的代码（同一个例子）：
var toAppend = '<div class="some-div" id="div-id"><ul>';
$.each(results, function(index) {
toAppend += '<li id="' + index + '">' + this + '</li>';
});
toAppend += '</ul></div>'
我个人认为这种方法不够优雅，但它是否更好呢？我谷歌了几分钟，找到了这篇文章。基本上，它是关于通过使用字符串连接 - 我的“第二种方法”来显著提高性能的。
这篇文章的主要问题在于它发布于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 = ['<div class="div-class" id="div-id1"><ul class="ul-class" id="ul-id1">'];
for (var i = 1; i <= 20000; i++) {
toAppend[i] = '<li class="li-class" id="li-id1-' + i + '">' + text + '</li>';
}
toAppend[i++] = '</ul></div>';
results.append(toAppend.join(""));
strings.html(new Date().getTime() - start);
// jquery objects
var start = new Date().getTime();
var ul = $("<ul>").attr("id", "ul-id2").addClass("ul-class");
for (var i = 0; i < 20000; i++) {
ul.append($("<li>").attr("id", "li-id2-" + i).addClass("li-class"));
}
results.append($("<div>").attr("id", "div-id2").addClass("div-class").append(ul));
objects.html(new Date().getTime() - start);
似乎在Firefox 7中，操作字符串比使用jQuery对象和方法快（大约快7倍）。但是我可能是错误的，特别是如果这个“基准测试”的代码中有任何错误或性能降低的错误。请随意进行任何更改。
注意：我使用了Array join，因为之前提到的文章，而不是实际的连接。
编辑：根据@hradac的建议，在基准测试中使用了实际的字符串连接，事实上确实改善了时间。
.text(text)会使它显著变慢，但确实展示了jQuery可以关闭XSS向量的优势。 - Brian Nickel