Pregunta

Estoy buscando algunas estadísticas en los navegadores actuales por cuánto tiempo se tarda en renderizar una tabla usando HTML simple frente a un método puritano CSS pirateado que evita el uso de TABLE , TR , TD etc. etiquetas.

No estoy buscando lo que es correcto, solo lo que es más rápido , particularmente en Firefox 3, aunque también estoy interesado en las estadísticas de otros navegadores. De curso , las etiquetas TABLE están diseñadas para tablas. Esa no es la pregunta.

¿Fue útil?

Solución

En general, yo diría que use < table > para datos tabulares. Sin embargo, si la tabla es muy larga (por ejemplo, más de 100 filas) y el número de columnas es bajo (~ 3), el uso de divs para emular filas resultaría en una huella de marcado mucho más pequeña. Esto es especialmente importante si está utilizando el JavaScript de búsqueda de DOM (como lo proporcionan las muchas bibliotecas de JS), ya que sería beneficioso reducir el tamaño del árbol DOM.

Esto es por experiencia, tenía una tabla de ese tipo y buscaba optimizaciones: pasar a una pantalla basada en div cortó el HTML generado a una tercera y fue una gran mejora en el rendimiento transversal de DOM.

Otros consejos

Si realmente tiene datos tabulares, use tablas. La idea de que nunca debería usar tablas para nada era una extensión errónea del concepto correcto de que debería usar etiquetas html solo para su propósito semántico previsto. Eso significa usar CSS para el diseño, pero usar tablas para datos tabulares. No significa nunca usar tablas.

Dado que algunos navegadores esperan hasta que se haya transferido la tabla completa para mostrarla para asegurarse de que han ajustado los anchos de columna para el tamaño del contenido, los divs probablemente se procesarán más rápido si está buscando para un promedio en todos los navegadores.

Dicho esto, si necesitas una tabla, usa una tabla.

Esta pregunta parece ser similar a esta: ¿Por qué no usar tablas para el diseño en HTML? , por lo que es posible que también desee consultar algunas de las respuestas .

En general, los navegadores no mostrarán una tabla hasta que se haya calculado la tabla completa, lo que significa que, desde la perspectiva del usuario, una tabla grande es más lenta que el mismo contenido utilizando el estilo CSS en lugar de las tablas. Estaba trabajando con una aplicación web en un momento en el que usaba tablas para mostrar una cuadrícula de información de estado, y era extremadamente intensivo de visualizar y muy lento. La misma información que se muestra con CSS fue más rápida y, lo que es más importante, comenzó a mostrar línea por línea a medida que se cargaba, en lugar de esperar a toda la tabla, por lo que se sintió más rápido como usuario final. Yo sugeriría investigar usando CSS para mostrar los datos usando un conjunto de datos de muestra para la prueba. Esto es lo que hice para confirmar que las tablas eran, de hecho, mucho más lentas para el caso de uso particular que teníamos.

Si usa CSS para el diseño y se adhiere a las mejores prácticas y mantiene su CSS en un archivo (s) separado, entonces su CSS normalmente solo tendrá que descargarse una vez antes de que se almacene en caché, lo que le brinda los beneficios del almacenamiento en caché. / p>

Si usa tablas para el diseño, las tablas de diseño se enviarán con el HTML para cada página, lo que aumentará el ancho de banda y los tiempos de descarga.

Para mejorar la velocidad de representación de las tablas, puede intentar configurando el diseño de la tabla: corregido; para ver si eso ayuda ..

Los diferentes navegadores tienen un rendimiento javascript / css muy diferente, por lo que es muy difícil generalizar aquí. Por ejemplo, IE7 tiene un motor sorprendentemente lento, y Chrome es increíblemente rápido. Firefox está en algún punto intermedio, dependiendo de si estás usando 2 o 3.

No tomaría la velocidad de renderizado como el aspecto más importante aquí. Las tablas HTML están hechas para datos tabulares. Poner eso en un montón de DIV o algo así sería totalmente erróneo en mi entendimiento.

Como la mayoría de las respuestas anteriores, yo también diría que use Tablas si está mostrando datos tabulares y DIV si desea controlar el diseño (mediante CSS3). Contrariamente a lo que se cree, las tablas no son más lentas en la representación que los DIV si establece algunas propiedades como colgroup y mantiene el diseño como fijo. Echa un vistazo a los detalles de cómo hacerlo en el siguiente enlace:

sites.google.com/site/spyderhoodcommunity/xhtml/makingtablesrenderfasterwhenlistingtabulardata

Para datos tabulares, use una tabla. Las tablas vienen con todo tipo de características agradables, como etiquetas < thead > y < tfoot > , leyendas, títulos, títulos, etc. Todo lo que necesitas para hacer una tabla una mesa.

Además, si el CSS no funciona / no se carga / no importa, la tabla seguirá luciendo y funcionando como debería.

Personalmente, a partir de lo que he leído, si está presentando datos tabulares, una tabla es más apropiada para la tarea, personalmente he encontrado que eso es bastante cierto.

En cuanto al número en bruto de lo que es " más rápido " ;, como lo menciona @skaffman, depende de los navegadores ... pero para que sea " correcto " Tendría sentido utilizar una tabla para datos tabulares.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top