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

Posted 2023-02-22

【中文标题】文本 CSS 渲染性能：RGBA vs HEX vs OPACITY

【英文标题】：Text CSS Rendering Performance : RGBA vs HEX vs OPACITY

【发布时间】：2016-11-26 04:52:00

【问题描述】：

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

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

<span>Hello</span>

span color: black; opacity: 0.7; span color: rgba(0, 0, 0, 0.7); span color: #b3b3b3;

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

【问题讨论】：

请注意：这三个选项并不等效。第一个选项 (1) 不仅影响文本颜色，还影响 DOM 元素的不透明度，而其他两个选项只影响文本颜色。我相信这会对渲染性能产生影响，正如我在我的 cmets 中对下面的好答案所指出的那样。

【参考方案1】：

我刚刚制作了一个包含大约 50k 行文本的简单 html。

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

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

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

最后使用span color: #b3b3b3;：

因此，正如您所猜测的那样，使用 opacity 会慢很多。

【讨论】：

很好的答案，感谢您进行此测试！我想知道您是否反复运行此测试并发现这些结果相对一致？

如果我没记错的话，我连续做了 3 次测试，所有结果都相似……但从那以后我再也没有做过。也许 +2 年后结果可能会有所不同......

相当有效的测试！我重新创建了一个类似的测试并发现了类似的结果。使用了大约 27,000 个 div，并使用平面颜色分配和不透明度分配的混合测试了 3 种不同的颜色分配。使用最新的 Microsoft Edge，平面颜色分配明显快于使用 opacity 属性。但是，使用定义为 rgba() 的颜色，我没有注意到与平面颜色分配有任何区别。因此，使用颜色 Alpha 通道添加不透明度的特定方法可能比让整个 DOM 元素使用不透明度更有效，因为它只影响文本。