appendではなく文字列による結合のパフォーマンス改善

append多用から文字列の結合に変更したらパフォーマンスが改善したのでメモ。

appendしまくりのソース。

for (var i = 0;i < array.length;i++) {
  var html = $("<tr></tr>").append(
    $("<td></td>").html(array[i].data0)
  ).append(
    $("<td></td>").html(array[i].data1)
  ).append(
    $("<td></td>").html(array[i].data2)
  ).append(
    $("<td></td>").html(array[i].data3)
  );
  $("#table tbody").append(html);
}

文字列の結合にしたソース。

var html;
for (var i = 0;i < array.length;i++) {
  html += "<tr>";
  html += "<td>" + array[i].data0 + "</td>";
  html += "<td>" + array[i].data1 + "</td>";
  html += "<td>" + array[i].data2 + "</td>";
  html += "<td>" + array[i].data3 + "</td>";
  html += "</tr>";
}
$("#table tbody").append(html);


50%くらいパフォーマンスが改善しました。

参考:
http://www.tinybeans.net/blog/2010/11/14-000851.html