Divs vs. Tablas es un debate sobre si se debe usar principalmente elementos Div o de tabla para controlar el diseño de una página HTML.
En una esquina tenemos elitistas de CSS de vanguardia que proclaman la bondad de todas las cosas div. Los defensores de Div reclaman tamaños de archivos más pequeños, tiempos de carga y representación más rápidos, y una mayor facilidad de mantenimiento para sus técnicas, junto con una mayor accesibilidad para los discapacitados visuales.
En la otra esquina tenemos diseñadores web de la vieja escuela que justifican su elección de tablas en gran medida basada en la facilidad de desarrollo y una relativa falta de problemas de compatibilidad con el navegador cruzado.
Después de una extensa encuesta de publicaciones en ambos lados de la pregunta, se hizo dolorosamente obvio que existe un general No se justifica las opiniones, particularmente con respecto a la carga y el rendimiento de la representación.
Este artículo intenta abordar esta deficiencia inyectando algunos hechos muy necesarios en el debate. Codecí versiones prácticamente idénticas de la página de inicio de mi empresa 3 maneras diferentes: una utilizando divs, otro usando tablas y otra usando tablas que especifican la capa de tabla: fijo. Luego me configuré la tarea de descubrir qué tan rápido se descargarían y mostrarían las páginas. También registré el número de bytes de cada página, junto con el tamaño de bytes de los recursos JavaScript, CSS y de imagen asociados con JavaScript de cada página. Decidí configurar cosas para probar páginas cargadas tanto del servidor web como del caché del navegador.
Este artículo no intenta evaluar las afirmaciones con respecto a la facilidad de desarrollo, la facilidad de Mantenimiento o accesibilidad para las páginas de prueba visualmente con discapacidad. Porque representa un ejemplo real del mundo
. Utiliza 8 tablas con 2 niveles de anidación.
pasan la validación W3C como CSS 2.1
Tiempo de carga de la página
Incluyí un bloque de script en el cabezal de cada página de prueba. La primera línea del bloque de script asignó una variable (dtStartLeartime) a un objeto JavaScript New Date. Se estableció una función calculateloadtime () para disparar en el evento de entrada del cuerpo de cada página. En esta función, se cargó otra variable (DtendLoteTime) con un nuevo objeto de fecha. Dado que la asignación de DtStartLeartime parece ser una de las primeras cosas que hace el navegador al cargar una página, y el evento de carga del cuerpo ocurre después de que se carga la página, restando el tiempo de DtStartLoad de DtendLoteTime es una forma útil de calcular el tiempo de carga de la página <
Tiempo de ida y vuelta de red
Aunque los métodos de tiempo de carga de la página proporcionan información útil, todavía son solo 1 pieza del rompecabezas. Esos bytes adicionales utilizados por los métodos basados en la tabla aún podrían exigir una penalización de rendimiento tanto en los tiempos de representación del lado del servidor como en los tiempos de transmisión de red del servidor al navegador del cliente. Para calcular los tiempos de ida y vuelta de red para cada página, decidí crear una página de arnés de prueba que utilice un iframe. La página tiene un botón para cada página de prueba, que cuando hace clic 1. Asigna una variable (drequesttime) a un objeto JavaScript New Date, y 2. actualiza el iframe con la URL que apunta a la página observada en el título del botón. El tiempo de ida y vuelta de red se deriva de restar DTruquestTime del tiempo DTStartLoad en la página de prueba. La página del arnés de prueba también incluye una función JavaScript para grabar resultados de las pruebas en una tabla HTML dibujada dinámicamente.
navegadores
Tengo 5 navegadores instalados en mi computadora portátil Windows XP: Firefox 3.6.23, Internet Explorer 7.0.5730.11, Google Chrome 14.0.835.202 m, Safari 4 Public Beta 528.16 y Opera 9.24. Usé los primeros 4 para mis pruebas. También quería usar Opera, pero por alguna razón el JavaScript para actualizar el iframe no funcionó en Opera la segunda vez que se invocó después de que se muestra una página. No sentí que valiera la pena para los fines del artículo tratar de resolver este problema.
Metodología de prueba
Para cada navegador:
1 . Borrar caché
2. Haga clic en el botón Div (página de agarrar desde el servidor) (nota la marca de tiempo en la página)
3. Haga clic en el botón Div (agarre la página desde el caché) (asegúrese de que la marca de tiempo sea la misma que el paso anterior)
4. [Ctrl-A], [Ctrl-C] para seleccionar todos y copiar resultados al búfer
5. Haga clic en la hoja de cálculo de Excel, [CTRL-V] para pegar los resultados a la hoja de cálculo.
6. Borrar caché
7. Haga clic en el botón de la tabla (la página de agarre desde el servidor) (nota la marca de tiempo en la página)
8. Haga clic en el botón de la tabla (la página de agarre desde el caché) (asegúrese de que la marca de tiempo sea la misma que la misma que Paso anterior)
9. [Ctrl-A], [CTRL-C] para seleccionar todos y copiar resultados al búfer
10. Haga clic en la hoja de cálculo de Excel, [CTRL-V] para pegar los resultados a la hoja de cálculo.
11. Borrar caché
12. Haga clic en el botón de tabla fijo (página de agarre desde el servidor) (nota la marca de tiempo en la página)
13. Haga clic en el botón de tabla fijo (la página de agarrar desde el caché) (asegúrese Igual que el paso anterior)
14. [Ctrl-A], [Ctrl-C] para seleccionar todos y copiar resultados al búfer
15. Haga clic en la hoja de cálculo de Excel, [CTRL-V] para pegar los resultados a hoja de cálculo.
Repetí la prueba dos veces, una vez contra el servidor web que se ejecuta en localhost, y una vez contra el servidor web de producción de Informatics de Impact.
Resultados de la prueba
Resultados para 12 tirones de cada página (6 del servidor, 6 del caché del navegador) en milisegundos:
en general
div – 64610
tabla – 64730 Tabla fija – 65388
Tiempos de ida y vuelta de red
Div – 26648
Tabla – 25914
Tabla fija – 26306
Tiempos de carga de la página
Div – 37962
Tabla – 38816
Tabla fija – 39082
div fue la técnica más rápida en 120 milisegundos en general o un promedio de 10 milisegundos más rápido
cada vez que la página se mostró sobre el siguiente método más rápido, tabla. La tabla fija llegó al final,
658 milisegundos más lento que una tabla o un promedio de 54.833 milisegundos. Creo que dado que tuve cuidado de especificar anchos de columna en la página de prueba de mi tabla, probablemente aprovechó el algoritmo de diseño fijo más rápido que se supone que deben emplear los navegadores. Los tiempos más lentos de la página de diseño fijo podrían explicarse por la mayor cantidad de marcado.
Resultados del tamaño del archivo (bytes)
Div Total – 316576
Total Total – 318861
Total de tabla fija – 319113
Conclusiones
1. No hay una ventaja de rendimiento significativa para usar DIV sobre las técnicas basadas en la tabla. 10 milisegundos son imperceptibles.
2. Al contrario de lo que muchos carteles en los foros técnicos parecen creer, las técnicas CSS se aplican por igual a las tablas y los DIV.
3. Contrariamente a las creencias de muchos carteles en foros técnicos, su navegador puede almacenar en caché las páginas completas, ya sea que contengan tablas, divs o cualquier combinación de los mismos.
4. Hay una ventaja en los tamaños de archivo más pequeños de la técnica basada en DIV. Qué significativo es para usted depende de la cantidad de veces que se solicite su página. Teniendo en cuenta que mi página de inicio tiene alrededor de 800 vistas por mes, la diferencia de 2285 bytes entre el DIV y la página de la tabla me ahorraría solo 1.74 MB de transferencia de datos por mes, lo que no es una gran cantidad en mi asignación de 1000 GB. ¡Implementar este cambio no me salvará nada en mi factura de alojamiento! Sin embargo, si mira una página como la página de inicio de Yahoo que obtiene más de 4 mil millones de visitas a las páginas por mes desde los EE. UU. Solo este cambio netgaría 8512 GB en ahorros de ancho de banda que no tiene en cuenta el hecho de que a veces la página se serviría fuera del caché del navegador. Con aproximadamente $ 1.00 por gigabyte por mes, esto se suma a algunos ahorros agradables, especialmente si las técnicas se migran a otras páginas.
¡Las páginas de prueba todavía están activas!
Tenga algún problema con los resultados de mi prueba, o tiene curiosidad sobre el código JavaScript utilizado para realizar las pruebas, dejé el arnés de prueba de iframe y las páginas de prueba en mi sitio. Aquí está el enlace al arnés de prueba de iframe.
referencia:
- arnés de prueba iframe.
