Question

我正在使用jQuery。我有网站功能，它执行ajax搜索并返回JSON结果。然后，ajax回调使用结果填充表的行。通常，每次搜索都会插入100行。每行都有相当数量的数据。

代码看起来像这样（非常简略）：

function search() {

  $.post("/search.php", { params: search_params }, searchDone, "json");

}

function searchDone(json) {

    var $table = $("#result_table");
    var html = "";
    for(i=0; i < json.results.length; i++) {

       html += rowHtml(results[i]);

    }

    $table.append(html);

}

function rowHtml(result) { /* much simplified version */

  var html = "<tr><td>";
  html += result.field1;
  html += "</td><td>";
  html += result.field2;
  html += "</td></tr>";
  return html;

}

表现缓慢。当html附加到表格时，浏览器会锁定。

有关如何优化此建议的任何建议？我是否更好地创建dom节点而不是尝试让jQuery呈现HTML？

Answer 1

您可以尝试推送到数组，然后使用array.join追加。

你总是附在桌子上吗？如果不是，则应将所有行包装在tbody中，然后替换现有的tbody节点。这更快，因为它实际上只有一个附加而不是x。

更新

Padolsey先生的Perf测试here

Answer 2

jQuery在你的html字符串中获取所有<tr>并将它们创建为DOM节点（快速），逐个追加它们（慢）。

尝试使用单个<tbody>来保存行，然后jQuery只需要向表中附加1个元素：

var html = ["<tbody>"];
for(i=0, len=json.results.length; i < len; i++) {

   html.push(rowHtml(json.results[i]));

}
html.push("</tbody>");
$table.append(html.join(''));

正如您所看到的，我还做了一些其他微优化：在循环中缓存.length属性，以及use an array as a string buffer。他们没有多少收获，但值得了解。

Answer 3

立即设置所有html，而不是依赖DOM插入。

function searchDone(json) {
    var $table = $("#result_table");
    var html = $table.html();
    for(i=0; i < json.results.length; i++) {
       html += rowHtml(results[i]);
    }
    $table.html($table.html() + html);
}

Answer 4

这里可能有一些指示：

jQuery and appending large amounts of HTML

总的来说，似乎使用Array.join vs字符串连接来提高速度是一个被驱散的神话 - 或者我应该说在早期版本的浏览器中，是的，Array.join更快。但最近版本的浏览器极大地优化了字符串连接。

Answer 5

您可以使用setTimeout而不是for循环。它在构建长HTML字符串时不会锁定浏览器。您也可以尝试将其作为整个tbody而不仅仅是行附加。

Answer 6

您还应该使用更快版本的'for'循环： var $ table = $（“＃result_table”）; var html =“”;

for(var i=0, var len= json.results.length; i < ; i++) {

  // etc...

}

Answer 7

有点偏离主题，但我使用并推荐Javascript Rocks。本书包含了Scriptaculous创建者提供的一系列令人敬畏的JS优化建议。还附带了一个名为DOM Monster的工具，它可以帮助追踪性能瓶颈 - 这是对Firebug的一个很棒的称赞，因为它实际上通过DOM来追踪基于启发式和DOM复杂性的低效率。

如何进一步优化javascript表格行创建/插入？

7 个答案: