浏览器重绘/回流性能：使用CSS3渐变对PNG渐变

Question

我正在一个导致大量浏览器重排的应用程序工作。性能是一个关键问题。从性能角度来看，对某些DOM元素使用CSS3渐变或图像渐变效果会更好吗？使用CSS文字阴影和渐变的页面是否会使用较慢的回流作为使用图像来实现这些视觉效果的页面？ 另外，有没有我可以使用的回流焊测试？

Answer 1

对于绘图而言，CSS梯度和阴影的作用不仅仅是图像。表现曾经很糟糕，现在他们可以接受。如果你有很多渐变/阴影，你应该实施它们并在你的真实环境中进行测试。如果你只有几个，我不会担心。

Answer 2

它很大程度上取决于浏览器如何呈现它，但大部分情况下渲染速度会变慢。另外，在较旧的浏览器中，您将拥有较少的像素完美显示。但是，这也可以用于细分受众群体，因为通常那些使用更新的浏览器的用户也会更新计算机。所以，这是一种折衷方案，可以有效地为您的网站提供简化版本，但无法处理这些版本。这不是保证，但我发现它通常平衡很好。

总的来说，真实世界的测试是一条路。构建它，查看它是否有效，并在找到它们时解决性能问题。我会毫不犹豫的，因为有可能无法工作。如果它工作的很好，而且你不尝试，你永远不会知道！