css – 颜色声明之间的性能差异?

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

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

我确实意识到,使用命名的颜色不是一个好主意,因为不同的浏览器有自己的想法,什么是海蓝宝石。

忽略Alpha通道和浏览器支持,这4种方法之间是否有明显的差异性?

如果我们试图从CSS中抽出最后一点优化,那么哪个更好?颜色值是否在内部转换为特定格式,或者其性能取决于其他任何内容(如使用渲染代理或浏览器)?

寻求“技术”的答案,如果可能,参考赞赏。

解决方法

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

不过,我认为CSS的目的是一个完全不相干的问题。即使对于HSB到RGB,一种颜色的工作量也将是微不足道的。通过这种支持我有几个程序 – 包括那些在手机上运行的程序 – 它在像素级别上进行颜色处理,在我正在做RGB-> HSB->(一些操纵)的RGB图像上。即使在ipad上执行这个操作十万次只会导致延迟几秒钟 – 所以在这个相对较慢的平台上,我认为你的典型的最坏情况转换可以安全地假定需要少于0.0001秒。这是悲观的。

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

ADDED:支持不用担心这个选项。在GPU内部,GPU会将颜色作为浮动数组来操作,所以在C语言中

浮色[4];

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

另一方面,HSB到RGB的转换需要相当长的时间 – 我估计,从编写代码到大约10到20个操作。所以在原油方面,HSB相当慢,但现代GPU的20(或甚至20,000)操作并不值得担心 – 这是不可察觉的。

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效