我正在构建一个基于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>'

我个人认为不那么优雅 – 但是更好吗？我把这个问题搞了几分钟，发现了this article.基本上，它是通过使用字符串连接来提高性能 – 我的“第二种方式”。

这篇文章的主要问题是它已经在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);

看起来，使用字符串比使用jQuery对象和方法更快(在Firefox 7中约7次)。但是我可能错了，特别是如果这个“基准”代码中有任何错误或性能下降的错误。随意进行任何更改。

注意：由于前面提到的文章而不是实际的连接，我使用了Array join。

编辑：基于@hradac的建议，我在基准测试中使用了实际的字符串连接，实际上改进了时代。