¿Diferencias de rendimiento entre las declaraciones de color?

Question

En CSS podemos utilizar varios métodos diferentes para definir un color:

• color palabra: red
• hexadecimales: #FF0000
• Rojo// canales Azul Verde: rgb(255, 0, 0)
• Tono/saturación/luminosidad : hsl(0, 100%, 50%)

_{Me doy cuenta de que el uso de colores con nombre no es un buena idea, ya que los diferentes navegadores tienen su propia idea de cómo es aquamarine.}

Ignorando el canal alfa y el soporte del navegador, ¿hay alguna diferencia en cuanto a 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 hubiera? ¿Los valores de color se convierten a un formato específico internamente, o el rendimiento depende de cualquier otra cosa (como qué agente de representación o navegador se usa)?

Buscando una respuesta "técnica" si es posible, se agradecen las referencias.

Answer 1

Si suponemos que un navegador moderno hace un uso completo de la GPU, la representación del color interno será flotantes RGB. Haciendo caso omiso del nombre del color, que probablemente sea solo un mapa para hexagonal, creo que el hexágono y los canales serán los más rápidos. HSB será sin duda 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 con 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 apoyo para esto, tengo varios programas, incluso los que se ejecutan en teléfonos móviles, que hacen la manipulación del color en un nivel por píxel en imágenes grandes donde estoy haciendo RGB-> HSB-> (alguna 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 que en esta plataforma relativamente lenta, creo que se puede suponer que la típica conversión de peor de los casos tarda menos de 0,0001 segundos. Y eso es ser pesimista.

Así que solo use lo que sea más fácil de codificar.

AGREGADO: para apoyar el no se preocupe por esta opción. Internamente, una GPU manipulará los colores como una matriz de flotantes, por lo tanto, en los términos C

color flotante [4];

o algo similar. Por lo tanto, la única conversión que se realiza para las opciones numéricas es una división simple entre 255.

Por otro lado, la conversión de HSB a RGB lleva mucho más tiempo - estimaría, de haber escrito el código para hacerlo, aproximadamente 10 a 20 operaciones. Entonces, en términos crudos, HSB es considerablemente más lento, PERO 20 (o incluso 20,000) operaciones en una GPU moderna no vale la pena preocuparse, es imperceptible.

Answer 2

Editar: Cada proceso tiene que bajar a un valor binario para r, g y b. Los bytes hexadecimal y rgb ya están configurados para eso, así que supongo que en realidad podrían tener más o menos la misma velocidad. El resto tiene que pasar por un proceso para llegar a un valor hexadecimal/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 los más propensos almacenan en 3 variables int. Entonces, la verdadera pregunta 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 simplemente toma los valores binarios de estas variables.

Answer 3

Por lo general, la optimización CSS se trata de minimizar el número de bytes que pasan por el cable. Los colores hexadecimales tienden a ser los más cortos (en su ejemplo, se podría usar # f00 en lugar de # ff0000).

Me doy cuenta de que esto no responde exactamente a la pregunta que me hizo, pero no he visto ninguna prueba de navegador que intente medir cómo las diferentes representaciones de color afectan la velocidad de reproducción.

Answer 4

Yo también tenía curiosidad por esto (es un viernes por la tarde). He aquí una JSPerf para conocer los modos de color CSS:

http://jsperf.com/css-color-names-vs-hex-codes/18

Answer 5

Éstos son los resultados, incluyendo los nombres de colores, hexagonal, hexagonal corto, RGB, RGBA, HSL y HSLA. Puede ejecutar la prueba usted mismo here.