颜色声明之间的性能差异？

Question

在CSS中，我们可以使用几种不同的方法来定义颜色：

• 颜色词：red
• 十六进制：#FF0000
• 红色/绿色/蓝色频道：rgb(255, 0, 0)
• 色调/饱和度/亮度：hsl(0, 100%, 50%)

_{我确实认识到使用命名颜色并不是一个好主意，因为不同的浏览器对aquamarine的外观有自己的想法。}

忽略Alpha通道和浏览器支持，这4种方法之间在性能方面有什么不同吗？

如果我们试图从我们的CSS中挤出最后一点的优化，哪一个是首选的，如果有的话？颜色值是在内部转换为特定格式，还是其性能取决于其他任何内容（如使用哪个渲染代理或浏览器）？

如果可能的话，寻找“技术”答案，参考赞赏。

Answer 1

如果我们假设现代浏览器充分利用GPU，那么内部颜色表示将是RGB浮点数。忽略颜色名称 - 这可能只是十六进制的地图 - 我认为十六进制和通道将是最快的。毫无疑问HSB将是最慢的，因为从HSB到RGB的转换需要一些工作 - 大约50行C代码。

但是，我认为就CSS而言，这是一个完全无关紧要的问题。即使对于HSB到RGB，一种颜色的工作量也将是微不足道的。通过对此的支持，我有几个程序 - 包括那些在手机上运行的程序 - 在我做RGB-＆gt; HSB-＆gt;（某些操作）的大图像上以每像素级别进行颜色处理 - ＆gt; RGB。即使在ipad上执行此操作100,000次也只会导致几秒钟的延迟 - 所以在这个相对较慢的平台上，我认为您可以安全地假设典型的最坏情况转换需要少于0.0001秒。那是悲观的。

所以只需使用最简单的代码即可。

ADDED：支持不要担心这个选项。在内部，GPU会将颜色操作为浮点数组，因此在C语言中

浮色[4];

或类似的东西。因此，对数字选项进行的唯一转换是一个简单的除以255。

另一方面，HSB到RGB的转换需要相当长的时间 - 我估计，从编写代码开始，大约需要10到20次操作。因此粗略地说，HSB相当慢，但现代GPU上的20次（甚至20,000次）操作并不值得担心 - 这是不可察觉的。

Answer 2

通常，css优化是关于最小化通过线路的字节数。十六进制颜色往往是最短的（在您的示例中，可以使用＃f00代替＃ff0000）。

我意识到这并没有完全回答你提出的问题，但我没有看到任何试图测量不同颜色表示如何影响渲染速度的浏览器测试。

Answer 3

以下是结果，包括颜色名称，短十六进制，十六进制，rgb，rgba，hsl和hsla。您可以自己运行测试here。

Answer 4

我也对此感到好奇（这是星期五下午）。这里是各种CSS颜色方法的JSPerf：

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

Answer 5

编辑：每个进程都必须达到r，g和b的二进制值。已经为此设置了十六进制和rgb字节，所以我猜它们实际上可能大致相同。其余的必须通过一个过程来达到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

这两种情况最有可能存储在3个int变量中。所以真正的问题是，对于这些整数，处理成二进制值的速度更快？ HEX还是DEC？我认为HEX，但我不能支持它。无论如何，代码只是取这些变量的二进制值。

Answer 6

我使用了jsperf.com中与其他工具相同的工具，并针对不同的颜色格式创建了自己的测试。然后，我在IE11，Edge17，FF64和Chrome71上进行了测试，并将所有结果收集在一个紧凑的excel电子表格中。

前三个是绿色，后三个是红色，最好和最坏的是粗体。

我不知道为什么Chrome这么容易使用命名颜色格式，但是它使我用相同和不同的参数多次重复测试。结果保持不变。

您无法获得任何一种格式的绝对最佳结果，但我的结论如下。

我将继续在已命名的名称上使用十六进制，在大写形式上使用小写，并在可能的情况下开始使用short代替long。

如果结果随新版本的浏览器更改而随时更新。