文本CSS渲染性能：RGBA vs HEX vs OPACITY

Question

设计师总是使用不透明度而不是实际颜色值来提供CSS。这会影响浏览器中的渲染性能吗？

在始终白色背景上渲染速度更快，我实际上并不关心透明度。

<span>Hello</span>

1. span {color: black; opacity: 0.7;}
2. span {color: rgba(0, 0, 0, 0.7);}
3. span {color: #b3b3b3;}

我的直觉说不透明度较慢（尽管放在GPU中），因为现在在渲染时浏览器必须考虑背景，因此任何更改都会导致它重新绘制对象，因为这种透明性，而静态有色物体永远不会改变。

Answer 1

我刚刚制作了一个包含大约5万行文字的简单HTML。

然后我使用Google性能选项来检查渲染进度。

使用span {color: black; opacity: 0.7;}：

使用span {color: rgba(0, 0, 0, 0.7);}：

最后使用span {color: #b3b3b3;}：

因此，正如您所猜测的那样，使用不透明度的速度要慢得多。