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

Question

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

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

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

忽略 alpha channel 和浏览器支持，这 4 种方法在性能方面是否存在差异？

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

如果可能，寻找“技术”答案，感谢引用。

Answer 1

如果我们假设现代浏览器充分利用 GPU，那么内部颜色表示将是 RGB float 。忽略颜色名称——它可能只是十六进制的映射——我认为十六进制和 channel 将是最快的。 HSB 无疑是最慢的，因为从 HSB 到 RGB 的转换确实需要一些工作 - 大约 50 行 C 代码。

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

所以只要使用最容易编码的东西即可。

添加:支持不用担心这个选项。在内部，GPU 会将颜色作为 float 组来处理，所以在 C 术语中

浮点颜色[4];

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

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