Respuesta lenta cuando la tabla HTML es grande

Estoy trabajando en una aplicación web para gestión de datos de productos, en la que los datos del producto se muestran en una tabla con 4 columnas (número de índice, SKU, descripción del producto y stock).

El problema al que me enfrento es que cuando la mesa se volvió muy grande (> 1000 filas), la página está muy descuidada, especialmente cuando estoy sobre una fila (he definido tr:hover en el CSS).

Traté de solucionar esto mostrando los datos parcialmente y cargando más cuando el usuario se desplaza hacia abajo, usando algunos javascript:

 if (tablesDIV.scrollTop> = tablesDIV.scrollHeight - (tablesDIV.clientHeight + 80)) { /*...*/ } 

Dio buenos resultados, pero esto impide llegar a la última fila al presionar End , y cuando se carga un número significativo de filas, la página se volvió a demorar.

¿Hay solución a este problema?

EDITAR: El código CSS relacionado con la tabla.

 #tables thead th{border-bottom:1px solid #CCC;background-color:#F5F5F5;background-image:-webkit-gradient(linear,left top,left bottom,from(#F5F5F5),to(#F1F1F1));background-image:-moz-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:-o-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:linear-gradient(top,#F5F5F5,#F1F1F1);font-weight:700;cursor:default} #tables tbody th{font-weight:700;text-overflow:none} #tables tbody tr{background:#FFF;cursor:pointer} #tables tbody tr:nth-child(even){background:#F8F9FC} #tables tbody tr:hover{background:#CDE} 

EDIT2: Demo.

Demostración: http://jsfiddle.net/4dpGz/

Lo primero que está desacelerando su ciclo es .insertRow() . Lo estás haciendo en la parte superior de tu ciclo y luego le agregas celdas. Después de agregar la fila y después de agregar cada celda, el navegador está haciendo cálculos de diseño. En su lugar, use .createElement() y luego .appendChild() al final de su ciclo.

Demostración: http://jsfiddle.net/ThinkingStiff/gyaGk/

Reemplazar:

 row = tableContent.insertRow(i); 

Con:

 row = document.createElement('tr'); 

Y agrega esto al final de tu ciclo:

 tableContent.tBodies[0].appendChild(row); 

Eso resolverá su problema de velocidad de carga. En cuanto al elemento emergente, tiene demasiadas reglas de CSS que afectan a sus elementos tr y td mediante el uso de selectores de tags. Eliminé algunas, y usé clases en algunas, y el resaltado por desplazamiento es mucho más rápido. Específicamente, noté que el overflow: hidden en los elementos de td disminuyó considerablemente. Considere combinar algunas de sus reglas, usar selectores más simples y agregar clases a elementos para un procesamiento de CSS más rápido. Durante el vuelo estacionario, el motor de diseño tiene que volver a calcular muchas cosas, y cuanto menos reglas CSS tenga, mejor. Un ejemplo que vi en tu código fue #tables tbody tr cuando solo había un tbody en la tabla. #tables tr hubiera sido suficiente. Mejor que cualquiera de esos es una clase. .row en mi demo.

Mejores prácticas de Google Page Speed :

  • Evite los selectores descendientes: table tbody tr td
  • Evite ancestros redundantes: body section article body ( body nunca se necesita)
  • Evitar selectores universales (*): body *
  • Evite los selectores de tags como la clave (más a la derecha): ul li
  • Evite los selectores secundarios o secundarios: ul > li > a
  • Evite selectores demasiado calificados: form#UserLogin ( # ya es específico)
  • Establezca sus reglas lo más específicas posible (clase o id).

si su tabla tiene columnas regulares (sin colspan y / o rowspan) puede mejorar un poco el tiempo de renderizado aplicando el table-layout:fixed propiedad table-layout:fixed :

MDN: https://developer.mozilla.org/en/CSS/table-layout

Con el método de diseño “fijo”, la tabla completa se puede representar una vez que se haya descargado y analizado la primera fila de la tabla. Esto puede acelerar el tiempo de renderizado sobre el método de diseño “automático”, pero el contenido de celda posterior puede no ajustarse al ancho de columna proporcionado.

Además, como en cualquier elemento HTML en Chrome, agregue “transform: rotateX (0deg);” El elemento de la tabla fuerza la aceleración del hardware para activarse, acelerando el desplazamiento de manera significativa (si ese es el problema).

Las tablas deben descargarse y mostrarse completas antes de que se muestren, lo que parece tardar más en mostrarse. Este lapso todo depende de la potencia de procesamiento:

¿Las tablas html grandes son lentas?

Por la cantidad de filas que tiene, me sorprende que vea un desfase notable, aunque puede probar algunas cosas aquí para ayudarnos a ayudarlo:

  • eliminar fondos degradados (según los represente el navegador)
  • paginate form data
  • salida forma filas en trozos (digamos, 200 filas a la vez)
  • Cómo eliminar toda la ayuda de css?
  • especifique un ancho exacto + alto en las filas de la tabla, las celdas

Si está trabajando con tablas muy grandes (digamos, 5000 o incluso 500,000 filas), le recomiendo un pequeño complemento llamado Clusterize . Ni siquiera necesita jQuery para usarlo. La idea es similar a las imágenes de carga diferida, y funciona extremadamente bien en la práctica.

Me parece que al poner una mesa grande en un div, es mejor usar un setTimeout. Esto parece acelerarlo significativamente en Chrome al almacenar la tabla en una var global primero y luego llamar a la función en un setTimeout.

 setTimeout("setTable(tdata)",1); function setTable(d) { $("#myDiv").html(d); } 

¡Aclamaciones! B55