aggiungendo una grande quantità di elementi al DOM

nella mia applicazione web, devo recuperare un'enorme quantità di dati e creare una tabella con i dati (tabella con circa 800 righe, 10 colonne)
Quando, aggiungo direttamente elementi attraverso il metodo append(), il browser non risponde per un po '.

per l'accesso ai dati enormi, sto utilizzando i lavoratori Web per una chiamata Ajax.
Come, non possiamo manipolare DOM dai web worker, cosa dovrei fare ??
thanks :)aggiungendo una grande quantità di elementi al DOM

modificare:
Se voglio alcune funzioni come hide() (jQuery nascondere) su di esso, lavorerà innerHtml ??

fonte

2012-09-15 Navaneeth

Se quale formato sono i dati? JSON? In tal caso, raccomando un motore di template JavaScript (ad esempio Handlebars) per creare l'intera stringa HTML e quindi aggiungere quella stringa al DOM in una volta. –

controlla questo [collegamento] (http://stackoverflow.com/questions/429174/possible-to-add-large-amount-of-dom-nodes-without-browser-choking) –

Puoi provare a preparare i nodi con un DocumentFragment e quindi accodandolo una volta. Non penso che il browser debba bloccare durante la creazione del frammento. – jimp

È possibile utilizzare alcuni modelli di motore JavaScript per evitare di appendere manualmente gli elementi passo dopo passo o di costruire la stringa innerHTML.

Ad esempio http://ejohn.org/blog/javascript-micro-templating.

Diciamo che avete un modello da qualche parte nella tua HTML:

<script type="text/html" id="user_rows_tpl"> 
    <% for(var y = 0, l = users.length; l > y; y++) { %> 
     <tr id="user-row-<%=y%>"> 
      <td><%=users[y].name%></td> 
      <td><%=users[y].surname%></td> 
      <td><%=users[y].age%></td>  
     </tr> 
    <% } %> 
</script>

E poi si sta usando questo modello nel JavaScript per rendere gli oggetti:

<script type="text/javascript"> 
    var table = document.getElementById("userTable"); 
    table.innerHTML = tmpl("user_rows_tpl", { 
     users: getUsers() 
    }); 
</script>

Per il test Ho creato 1000 oggetti utente e li ho resi in tabella.
Il tempo medio di rendering è di circa 20-25 ms in Google Chrome. Non male, non è vero?

DEMO

fonte

2012-09-15 16:08:58

Nota: L'accesso agli elementi DOM con JavaScript è lento, in modo da avere una pagina più reattiva.

si può fare questo da

var buffer = []; 
setInterval(function(){ $("#div").html(buffer.join(""); buffer = []; }, 1000); 

buffer.push("html"); 
buffer.push("html");

e controllare questo link for the performance

controllare anche questo link Best Practices for Speeding Up Your Web Site

fonte

2012-09-15 15:50:22

Si potrebbe desiderare di utilizzare un plugin tabella che supporta l'inserimento pigro di elementi DOM (cioè a richiesta). DataTables offre una vasta gamma di funzioni, including this one. Ti aiuterà anche a ridurre le dimensioni del codice che devi scrivere.

fonte

2012-09-15 15:52:16 Jon

puoi spiegarmi come fare l'inserimento pigro degli elementi Dom ?? grazie :) – Navaneeth

aggiungendo una grande quantità di elementi al DOM

risposta

Problemi correlati