CSS Efficiency Questions

Question

Por el bien de esta pregunta, dejemos que "eficiencia" signifique más o menos velocidad de representación de páginas. Sin embargo, también debemos tener en cuenta los problemas de rendimiento, como el desplazamiento suave.

Digamos que está poniendo un fondo de rayas en una página. Desde el punto de vista de la eficiencia, ¿es mejor tejar una imagen de 100 píxeles de ancho (mostrando diez rayas) o una imagen de 20 píxeles de ancho (mostrando dos rayas)? Por supuesto ... una imagen grande tarda más tiempo en cargarse, pero siento que he tenido problemas al colocar imágenes muy pequeñas. ¿Hay un punto óptimo?

estoy empezando a pensar que esto depende del navegador, especialmente teniendo en cuenta la segunda parte de esta pregunta (y tal vez el sistema operativo, así?):

Para lograr la transparencia, es más eficiente que un azulejo translúcida .png, o trabaje con atributos de opacidad de CSS (de nuevo, aparece la pregunta de mosaico grande vs. pequeño)? Desde mi experiencia, las versiones anteriores de IE parecen comportarse mejor con un .png transparente y embaldosado que con los atributos de opacidad de CSS (aunque nunca he hecho ninguna prueba científica).

Las esquinas redondeadas son otro buen ejemplo ... en algunos navegadores, el uso de imágenes en lugar de atributos CSS o implementaciones de JavaScript parece hacer que la página sea mucho más rápida, con un desplazamiento mucho más suave.

Esto es realmente una pregunta más amplia que CSS, pero es algo en lo que he estado pensando últimamente.

-Peter

Answer 1

Sí, todo esto es OS y el navegador céntrica.

Por ejemplo, en Safari, es más eficiente usar transformaciones CSS para animar elementos que JS.

En general:

• se quiere evitar el embaldosado imágenes muy pequeñas. Una imagen de 20 píxeles formará un mosaico mejor que 1px, ya que el navegador está trabajando mucho menos para volver a pintar toda la pantalla. Aunque probablemente no haya mucha diferencia entre 20px y 100px.
• Cualquier cosa que se pueda hacer con CSS probablemente sea más eficiente que cargar otra imagen. (como esquinas redondeadas, sombras paralelas, etc.)
• una gran advertencia son los filtros css de IE. Muchos de ellos no son eficientes y es mejor que vuelvas a las imágenes.

Answer 2

Basado en mis pruebas, parece que la página se muestra más rápido usando la imagen más pequeña posible, y vamos a hacer las baldosas CSS por sí mismo. La velocidad a la que esto sucede depende únicamente del navegador.

En cuanto a los fondos translúcidos, el uso de CSS sería más ligero en el ancho de banda, pero la opacidad de CSS aún no es totalmente compatible, por lo que tendría en cuenta al abordar algo así.

estaría muy curioso saber lo que los resultados de las pruebas de otras personas ...