如何進一步優化javascript表格行的創建/插入？

我正在使用jQuery。我有網站功能，做ajax搜索並返回一個JSON結果。 ajax回調然後用結果填充表格的行。通常，每個搜索插入100行。每行都有相當數量的數據。如何進一步優化javascript表格行的創建/插入？

的代碼看起來是這樣的（非常略）：

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，會更好嗎？

來源

2009-08-26 jonstjohn

您可以嘗試推入數組，然後使用array.join進行追加。

你是否總是追加到表格中？如果不是，你應該將所有的行包裝在一個tbody中，然後替換現有的tbody節點。這是更快的，因爲它實際上只有一個附加而不是x。

UPDATE

逆足由Padolsey先生測試here

來源

2009-08-26 21:33:16 redsquare

我確實多次追加到表格中，但如果可以提高性能，我可能會稍微修改這些行爲。 – jonstjohn 2009-08-26 23:09:06

雙緩衝FTW（再次）。 – seth 2009-08-26 23:45:06

不好意思，不要以爲我得到的參考 – jonstjohn 2009-08-27 13:09:25

可能有一些指針的位置：

jQuery and appending large amounts of HTML

總體看來，使用Array.join VS字符串連接的速度提升是一個已被驅散的神話 - 或者我應該說在早期版本的瀏覽器中，是的，Array.join速度更快。但最新版本的瀏覽器已經大大優化了字符串連接。

來源

2009-08-26 21:44:50

您可以使用setTimeout而不是for循環。它在構建長HTML字符串時不會鎖定瀏覽器。您也可以嘗試將它作爲整個tbody而不是僅僅行添加。

來源

2009-08-26 21:47:39 epascarello

一次設置所有的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); 
}

來源

2009-08-26 21:53:46

這將不會比提問者已經有更好的表現。另外，'append'不是一個全局函數。 – 2009-08-26 23:21:59

您還應該使用更快的版本的 '爲' 像循環：變量$表= $（「＃result_table」）; var html =「」;

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

    // etc... 

}

來源

2009-08-26 22:48:13 lukaszkorecki

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。他們獲得的東西並不多，但值得了解。

來源

2009-08-26 22:56:49

這是有前途的。我明天會試試看第一件事。我懷疑行插入是造成瓶頸的原因，因爲性能直接關係到行數。 – jonstjohn 2009-08-27 00:46:39

有點偏離主題，但我使用和推薦Javascript Rocks。這本書包含了由Scriptaculous的創建者提供的一系列令人敬畏的JS優化建議。還有一個名爲DOM Monster的工具，可以幫助追蹤性能瓶頸 - 這對於Firebug來說是一個非常棒的讚美，因爲它實際上是通過DOM追蹤基於啓發式和DOM複雜性的低效率追蹤。

來源

2009-08-26 22:59:24

如何進一步優化javascript表格行的創建/插入？

回答

相關問題