Jak lze dále optimalizovat javascript tabulka vytvoření row / vložení?

hlasů
1

Já používám jQuery. Mám funkci webové stránky, které dělá hledání Ajax a vrátí výsledek JSON. Ajax callback pak vyplní řádky tabulky s výsledky. Obecně platí, že existují 100 řádků na vyhledávání, které se dostanou vloženy. Každý řádek má značné množství dat.

Tento kód vypadá nějak takto (velmi zkráceno):

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;

}

Výkon je pomalý. Prohlížeč má sklon k zablokování, když je html připojena ke stolu.

Nějakou radu, jak optimalizovat to? By bylo lepší pro mě vytvořit DOM uzly, spíše než se snažit dostat jQuery k vykreslení HTML?

Položena 26/08/2009 v 22:22
zdroj uživatelem
V jiných jazycích...                            


7 odpovědí

hlasů
4

Můžete se pokusit posunout do pole a poté připojit pomocí Array.join.

Se vždy připojí ke stolu? Pokud tomu tak není, měli byste zabalit všechny řádky v tbody a potom nahradit existující tbody uzel. To je rychlejší, protože je opravdu jen jeden přidávací spíše než x.

AKTUALIZACE

Perf testuje zde pan Padolsey

Odpovězeno 26/08/2009 v 22:33
zdroj uživatelem

hlasů
2

jQuery má všechny ty <tr>máš v html řetězce a vytvoří je jako DOM uzly (rychle), připojením jednu po druhé (pomalé).

Zkuste použít jeden <tbody>držet své řádky, pak jQuery má pouze připojit 1 prvku do tabulky:

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

Jak vidíte, jsem také dělal několik dalších drobných optimalizací: Cache na .lengthmajetku ve smyčce, a používat řadu jako vyrovnávací paměť řetězce . Nemají získat vás moc, ale je dobré vědět.

Odpovězeno 26/08/2009 v 23:56
zdroj uživatelem

hlasů
1

Nastavte všechny html najednou namísto spoléhání se na DOM vložení.

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);
}
Odpovězeno 26/08/2009 v 22:53
zdroj uživatelem

hlasů
0

Trochu off-topic, ale já používám a doporučuji Javascript skály . Tato kniha obsahuje TON úžasné JS optimalizace radu tvůrce Scriptaculous. Také přichází s nástrojem s názvem DOM netvor, který pomáhá vystopovat výkonové překážky - je to skvělý kompliment Firebug jak to vlastně sleduje přes DOM hledají neefektivnosti založených na heuristice a DOM složitosti.

Odpovězeno 26/08/2009 v 23:59
zdroj uživatelem

hlasů
0

Také byste měli používat rychlejší verzi ‚pro‘ smyčky jako: var $ tabulky = $ ( „# result_table“); var html = "";

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

  // etc...

}
Odpovězeno 26/08/2009 v 23:48
zdroj uživatelem

hlasů
0

Můžete použít setTimeout místo cyklu for. Nebude to zavřít prohlížeč, když se buduje dlouhé HTML řetězec. Také zkusit připojit jej jako celý tbody namísto pouhých řad.

Odpovězeno 26/08/2009 v 22:47
zdroj uživatelem

hlasů
0

Tam by mohlo být některé odkazy zde:

jQuery a připojením velké množství HTML

Celkově se zdá, že s použitím Array.join vs zřetězením řetězce pro zvýšení rychlosti je mýtus, který byl rozptýlen - nebo bych měl říci, že v dřívějších verzích prohlížečů, ano, Array.join byl rychlejší. Ale poslední verze prohlížečů značně optimalizovaný řetězec zřetězení.

Odpovězeno 26/08/2009 v 22:44
zdroj uživatelem

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more