agregando gran cantidad de elementos a DOM

en mi aplicación web, tengo que recuperar una gran cantidad de datos y crear una tabla con los datos (tabla con alrededor de 800 filas, 10 columnas)
Cuando, estoy agregando elementos directamente a través del método append(), el navegador no responde por un tiempo.

para acceder a la gran cantidad de datos, estoy usando trabajadores web para la llamada ajax.
Como no podemos manipular el DOM de los trabajadores de la web, ¿qué debo hacer?
gracias :)agregando gran cantidad de elementos a DOM

editar:
Si quiero algunas funciones como ocultar() (jQuery ocultar) sobre ella, trabajará innerHtml ??

Fuente

2012-09-15 Navaneeth

Si qué formato están los datos? JSON? En ese caso, recomiendo un motor de plantillas de JavaScript (por ejemplo, barras de herramientas) para crear la cadena HTML completa, y luego anexar esa cadena al DOM a la vez. –

revise este [enlace] (http://stackoverflow.com/questions/429174/possible-to-add-large-amount-of-dom-doms-without-browser-choking) –

Puede intentar preparar los nodos con un DocumentFragment y luego agregar eso una vez. No creo que el navegador tenga que bloquearse durante la creación del fragmento. – jimp

Puede usar un motor de plantillas de JavaScript para evitar añadir elementos manualmente paso a paso o crear la cadena innerHTML.

Por ejemplo http://ejohn.org/blog/javascript-micro-templating.

Digamos que tiene una plantilla en algún lugar de su 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>

Y entonces usted está usando esta plantilla en su JavaScript para hacer sus objetos:

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

Para la prueba Creé 1000 objetos de usuario y los rendericé en la tabla.
El tiempo promedio de renderizado es de aproximadamente 20-25 ms en Google Chrome. No está mal, ¿verdad?

DEMO

Fuente

2012-09-15 16:08:58

Nota: Acceder a los elementos de DOM con JavaScript es lento para poder tener una página más receptiva.

puede hacer esto mediante la

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

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

y conocer este link for the performance

También puedes ver este enlace Best Practices for Speeding Up Your Web Site

Fuente

2012-09-15 15:50:22

Es posible que desee utilizar un plugin tabla que admite la inserción perezoso de elementos DOM (es decir, a pedido). DataTables ofrece una gran cantidad de características, including this one. También lo ayudará a reducir el tamaño del código que tiene que escribir.

Fuente

2012-09-15 15:52:16 Jon

¿me puede explicar cómo hacer la inserción perezosa de elementos Dom? gracias :) – Navaneeth

agregando gran cantidad de elementos a DOM

Respuesta

Cuestiones relacionadas