css - 文本 CSS 渲染性能 : RGBA vs HEX vs OPACITY

Question

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

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

<span>Hello</span>

1. span {颜色:黑色；不透明度:0.7；
2. span {color: rgba(0, 0, 0, 0.7);}
3. 跨度 {color: #b3b3b3;}

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

Answer 1

我刚刚制作了一个包含大约 50k 行 span 的简单 HTML。

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

使用 span {color: black;不透明度:0.7；:

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

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

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