css - recomendado - tamaño imagen destacada wordpress
¿Diferencias de rendimiento entre las declaraciones de color? (5)
Aquí están los resultados que incluyen nombres de colores, hexágono corto, hexadecimal, rgb, rgba, hsl y hsla. Puede ejecutar la prueba usted mismo here .
En CSS podemos usar varios métodos diferentes para definir un color:
- Palabra de color:
red - Hexadecimal:
#FF0000 - Canales rojo / verde / azul:
rgb(255, 0, 0) - Tono / saturación / luminosidad:
hsl(0, 100%, 50%)
Me doy cuenta de que usar colores con nombre no es una buena idea, ya que los distintos navegadores tienen su propia idea de cómo se ve la aquamarine .
Ignorando el canal alfa y el soporte del navegador, ¿existen diferencias en cuanto al rendimiento entre estos 4 métodos?
Si estuviéramos tratando de exprimir hasta el último bit de optimización de nuestro CSS, ¿cuál sería el preferido, si lo hubiera? ¿Los valores de color se convierten internamente a un formato específico, o su rendimiento depende de alguna otra cosa (como qué agente de representación o navegador se usa)?
Buscando una respuesta "técnica" si es posible, se agradecen las referencias.
Por lo general, la optimización de css consiste en minimizar el número de bytes que pasan por el cable. Los colores hexadecimales tienden a ser los más cortos (en su ejemplo, # f00 podría usarse en lugar de # ff0000).
Me doy cuenta de que esto no es exactamente responder a la pregunta que has formulado, pero no he visto ninguna prueba en el navegador que intente medir cómo las diferentes representaciones de color afectan la velocidad de reproducción.
Si asumimos que un navegador moderno hace uso completo de la GPU, la representación interna del color será una flotación RGB. Ignorando el nombre del color, que probablemente sea solo un mapa a hexadecimal, creo que el hex y los canales serán los más rápidos. Indudablemente, HSB será el más lento, ya que la conversión de HSB a RGB requiere algo de trabajo, unas 50 líneas de código C
Sin embargo, creo que para el propósito de CSS, esta es una pregunta completamente irrelevante. Incluso para HSB a RGB, la cantidad de trabajo en un color será totalmente trivial. A modo de soporte para esto, tengo varios programas, incluidos los que se ejecutan en dispositivos móviles, que realizan la manipulación del color a nivel de píxel en imágenes grandes donde estoy haciendo RGB-> HSB -> (algo de manipulación) -> RGB. Incluso realizar esta operación 100,000 veces en un ipad solo produce un retraso de un par de segundos; por lo tanto, en esta plataforma relativamente lenta, creo que se puede suponer con seguridad que la conversión en el peor de los casos demora menos de 0.0001 segundos. Y eso es ser pesimista.
Así que solo usa lo que sea más fácil de codificar.
AÑADIDO: para apoyar el no te preocupes por esta opción. Internamente, una GPU manipulará los colores como una matriz de flotadores, así que en términos C
color flotante [4];
o algo similar. Entonces, la única conversión que se está haciendo para las opciones numéricas es una simple división por 255.
Por otro lado, la conversión de HSB a RGB toma considerablemente más tiempo; estimaría, por haber escrito un código para hacerlo, entre 10 y 20 operaciones. Entonces, en términos crudos, HSB es considerablemente más lento, BUT 20 (o incluso 20,000) operaciones en una GPU moderna no vale la pena preocuparse, es imperceptible.
Yo también tenía curiosidad por esto (es un viernes por la tarde). Aquí hay un JSPerf para los diversos métodos de color CSS:
Edición : Cada proceso tiene que bajar a un valor binario para r, g, y b. Los bytes hexagonales y rgb ya están configurados para eso, así que supongo que en realidad podrían ser aproximadamente de la misma velocidad. El resto tiene que pasar por un proceso para alcanzar un valor hex / rgb
#FF0000 = memory values of: 1111 1111 0000 0000 0000 0000
rgb(255,0,0) = memory values of: 1111 1111 0000 0000 0000 0000
Ambos casos son probablemente almacenados en 3 variables int. Entonces, la pregunta real es: ¿cuál es más rápido de procesar en valores binarios para estos enteros? HEX o DEC? Creo que HEX, pero no puedo respaldar eso. De todos modos, el código solo toma los valores binarios de estas variables.