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

前端之家收集整理的这篇文章主要介绍了文本CSS渲染性能:RGBA vs HEX vs OPACITY前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
设计人员总是使用不透明度而不是实际颜色值来提供CSS.这会影响浏览器中的渲染性能吗?

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

<span>Hello</span>

> span {color:black;不透明度:0.7;}
> span {color:rgba(0,0.7);}
> span {color:#b3b3b3;}

我的直觉表示不透明度较慢(尽管放在GPU中),因为现在在渲染时,浏览器必须考虑背景,因此任何更改都会导致它重新绘制对象,因为这种透明性,而静态彩色对象将从不改变.

解决方法

我刚刚创建了一个包含大约50k行文本的简单HTML.

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

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

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

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

因此,正如您所猜测的那样,使用不透明度会相当缓慢.

原文链接:https://www.f2er.com/css/215878.html

猜你在找的CSS相关文章