在 CSS 中我们可以使用几种不同的方法来定义颜色:
- 颜色词:
红色
- 十六进制:
#FF0000
- 红/绿/蓝 channel :
rgb(255, 0, 0)
- 色调/饱和度/亮度:
hsl(0, 100%, 50%)
我确实意识到使用命名颜色并不是一个好主意,因为不同的浏览器对 aquamarine
的外观有自己的想法。
忽略 alpha channel 和浏览器支持,这 4 种方法在性能方面是否存在差异?
如果我们试图从我们的 CSS 中挤出最后一点的优化,那么首选哪一个(如果有的话)?颜色值是否在内部转换为特定格式,或者它的性能是否取决于其他任何因素(例如使用的渲染代理或浏览器)?
如果可能,寻找“技术”答案,感谢引用。
最佳答案
如果我们假设现代浏览器充分利用 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)次操作不值得担心 - 这是难以察觉的。
关于css - 颜色声明之间的性能差异?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6797306/