文本 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

我刚刚制作了一个简单的 HTML，其中包含大约 5 万行 span。

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

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

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

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

因此，正如您猜到的那样，使用不透明度会慢很多。