Render más rápido de las tablas con CSS
En el caso de que tengamos que usar tablas, cuando realmente se trate de una tabla, es conveniente tener en cuenta una propiedad CSS poco utilizada que nos podrá permitir mejorar la velocidad de render de las tablas.
La propiedad es table-layout y nos permite indicar si queremos que la tabla se dibuje con unos anchos fijos o dependientes del contenido:
.fixed_table {
table-layout: fixed;
}
.auto_table {
table-layout: auto;
}El valor fixed nos permite dibujar la tabla de una forma más rápida, ya que el ancho de las celdas depende de las columnas y no del contenido de ellas. Por ello, al no tener que mirar toda la tabla para ajustar los anchos, el render se hace más rápido. Es bueno usarlo cuando se trata de tablas muy grandes y mejor si tienen un contenido muy parecido.
El valor auto es dependiente del contenido de las celdas, por lo que es necesario leer toda la tabla. Se recomienda usarlo cuando las tablas tiene contenido muy variable o cuando se trata de pocas filas.
Use the table-layout CSS property to speed up table rendering
Vía / Posh CSS
Esto se puede solucionar mediante CSS, para ello deberemos crearnos una imagen que contenga todos los estados del botón (seleccionado, no seleccionado, con foco y sin foco). Como se puede apreciar, la imagen contiene todos los posibles estados uno debajo del otro, ya que mediante estilos, usaremos una porción de la imagen para mostrar el estado correspondiente.