jquery - How can I further optimize javascript table row creationinsertion? - Stack Overflow

admin管理员组

文章数量:1391767

I'm using jQuery. I have website feature that does an ajax search and returns a JSON result. The ajax callback then populates the rows of a table with the results. Generally, there are 100 rows per search that get inserted. Each row has a fair amount of data.

The code looks something like this (very much abbreviated):

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;

}

The performance is slow. The browser tends to lock up when the html is appended to the table.

Any advice on how to optimize this? Would it be better for me to create the dom nodes rather than try to get jQuery to render the HTML?

I'm using jQuery. I have website feature that does an ajax search and returns a JSON result. The ajax callback then populates the rows of a table with the results. Generally, there are 100 rows per search that get inserted. Each row has a fair amount of data.

The code looks something like this (very much abbreviated):

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;

}

The performance is slow. The browser tends to lock up when the html is appended to the table.

Any advice on how to optimize this? Would it be better for me to create the dom nodes rather than try to get jQuery to render the HTML?

• javascript
• jquery
• optimization

Share Improve this question Follow asked Aug 26, 2009 at 21:22 jonstjohnjonstjohn 60.4k88 gold badges4747 silver badges5555 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

You can try to push to an array and then append using array.join.

Are you always appending to the table? If not you should wrap all the rows in a tbody and then replace the existing tbody node. This is faster as it is really only one append rather than x.

UPDATE

Perf tests here by Mr Padolsey

jQuery takes all those <tr>'s in your html string and creates them as DOM nodes (fast), appending them one by one (slow).

Try using a single <tbody> to hold your rows, then jQuery only has to append 1 element to the table:

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(''));

As you can see I also did a couple of other micro-optimizations: cache the .length property in the loop, and use an array as a string buffer. They don't gain you much but are worth knowing.

Set all the html at once instead of relying on DOM insertion.

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

There might be some pointers here:

jQuery and appending large amounts of HTML

Overall it seems that using Array.join vs string concatenation for a speed boost is a myth that has been dispelled - or I should say that in earlier versions of browsers, yes, Array.join was faster. But recent versions of browsers have greatly optimized String concatenation.

You can use setTimeout instead of a for loop. It will not lock up the browser when it is building the long HTML string. You also might want to try append it as a entire tbody instead of just rows.

You should also use faster version of 'for' loop like: var $table = $("#result_table"); var html = "";

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

  // etc...

}

A little off-topic, but I use and remend Javascript Rocks. This books contains a TON of awesome JS optimisation advice by the creator of Scriptaculous. Also es with a tool called DOM Monster which helps track down performance bottlenecks - it's an awesome pliment to Firebug as it actually tracks through the DOM looking for inefficiencies based on heuristics and DOM plexity.

本文标签： jqueryHow can I further optimize javascript table row creationinsertionStack Overflow