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)操作并不值得担心 – 这是不可察觉的。

相关文章

前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作。边调整边想感叹IE真是个沙雕。。特将...
前言 有些属性不是很常用,但是工作中遇到了,记录一下,方便学习。 1、text-indent text-indent 属性规...
前言 政府网站会遇到公祭日的时候,网站整体颜色变灰的情况。今天正好调了一下。在此把解决方案分享给大...
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息。 实现过程 书写css...
html代码 css代码 效果图
在一些界面上 , 如果每个icon都去找图片还是相当麻烦的 , 直接使用css画出icon就方便的多了 , 下面两个...