代码之家 › 专栏 › 技术社区 › jonstjohn

如何进一步优化javascript表行的创建/插入?

optimization jquery javascript

jonstjohn · 技术社区 · 15 年前

我正在使用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附加到表中时,浏览器会锁定。

7 回复 | 直到 15 年前

redsquare 15 年前

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

更新

性能测试 here

Crescent Fresh 15 年前

jQuery接受所有这些 <tr> ,并将它们创建为DOM节点(快速),逐个追加(慢速)。

试着用一个 <tbody>

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 . 它们不会给你带来很多好处,但值得你去了解。

Duncan Beevers 15 年前

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);
}

Community CDub 7 年前

这里可能有一些提示:

jQuery and appending large amounts of HTML

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

epascarello 15 年前

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

lukaszkorecki 15 年前

var html=“”;

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

  // etc...

}

Toby Hede 15 年前

有点离题,但我使用并推荐 Javascript Rocks . 这本书包含了Scriptaculous的创建者提出的大量令人敬畏的JS优化建议。还附带了一个名为DOM Monster的工具,它可以帮助跟踪性能瓶颈——这是对Firebug的一个极好的补充,因为Firebug实际上是通过DOM跟踪基于启发式和DOM复杂性的低效率。