Como posso otimizar ainda mais javascript mesa fila criação / inserção?

votos
1

Eu estou usando jQuery. Eu tenho recurso site que faz uma pesquisa ajax e retorna um resultado JSON. O retorno de chamada ajax em seguida, preenche as linhas de uma tabela com os resultados. Geralmente, há 100 linhas por pesquisa que são inseridos. Cada linha tem uma boa quantidade de dados.

O código é algo como isto (muito abreviado):

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;

}

O desempenho é lento. O navegador tende a trancar quando o HTML é anexada ao quadro.

Qualquer conselhos sobre como otimizar isso? Seria melhor para mim criar os nós DOM em vez de tentar obter jQuery para tornar o HTML?

Publicado 26/08/2009 em 22:22
fonte usuário
Em outras línguas...                            


7 respostas

votos
4

Você pode tentar empurrar para uma matriz e, em seguida, anexar usando Array.join.

Você está sempre acrescentando para a mesa? Se não você deve envolver todas as linhas em uma tbody e depois substituir o nó tbody existente. Isso é mais rápido, pois é realmente apenas um acréscimo, em vez de x.

ATUALIZAR

Perf testa aqui pelo Sr. Padolsey

Respondeu 26/08/2009 em 22:33
fonte usuário

votos
2

jQuery leva todos esses <tr>'s na cadeia html e cria-los como nós DOM (rápido), acrescentando-os um por um (lento).

Tente usar um único <tbody>para manter suas linhas, em seguida, jQuery só tem de acrescentar um elemento para a tabela:

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

Como você pode ver eu também fiz um par de outros micro-otimizações: armazenar em cache a .lengthpropriedade no circuito, e usar uma matriz como um buffer de string . Eles não ganhar-lhe muito, mas vale a pena conhecer.

Respondeu 26/08/2009 em 23:56
fonte usuário

votos
1

Definir todo o html de uma só vez, em vez de depender de inserção 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);
}
Respondeu 26/08/2009 em 22:53
fonte usuário

votos
0

Um off-topic pouco, mas eu uso e recomendo Rochas Javascript . Este livros contém uma tonelada de incrível conselho otimização JS pelo criador do Scriptaculous. Também vem com uma ferramenta chamada DOM monstro que ajuda a rastrear os gargalos de desempenho - é um complemento incrível para Firebug como ela realmente rastreia através do DOM procurando ineficiências baseadas em heurística e complexidade DOM.

Respondeu 26/08/2009 em 23:59
fonte usuário

votos
0

Você também deve usar a versão mais rápida de 'para' loop como: var $ table = $ ( "# result_table"); var html = "";

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

  // etc...

}
Respondeu 26/08/2009 em 23:48
fonte usuário

votos
0

Você pode usar setTimeout em vez de um loop for. Não irá travar o navegador quando se está a construir a string HTML longa. Você também pode querer tentar anexá-lo como toda uma tbody em vez de apenas as linhas.

Respondeu 26/08/2009 em 22:47
fonte usuário

votos
0

Pode haver alguns ponteiros aqui:

jQuery e anexar grandes quantidades de HTML

No geral, parece que o uso de Array.join vs concatenação para um aumento de velocidade é um mito que foi dissipada - ou devo dizer que em versões anteriores do navegadores, sim, Array.join foi mais rápido. Mas as versões recentes de navegadores grandemente otimizado concatenação de String.

Respondeu 26/08/2009 em 22:44
fonte usuário

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