浏览器重绘/重排性能：使用 CSS3 渐变与 PNG 渐变答案

【问题标题】：Browser Repaint/Reflow performance: using CSS3 Gradients vs PNG Gradients浏览器重绘/重排性能：使用 CSS3 渐变与 PNG 渐变
【发布时间】：2011-05-04 01:10:13
【问题描述】：

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

【问题讨论】：

标签： performance reflow

【解决方案1】：

对于绘图，CSS 渐变和阴影比图像更需要 CPU。以前性能很差，现在还可以接受。如果你有大量的渐变/阴影，你应该实现它们并在你的真实环境中进行测试。如果你只有几个，我不会担心的。

【讨论】：

【解决方案2】：

这在很大程度上取决于浏览器如何呈现它，但在大多数情况下，这些东西会呈现得更慢。此外，您在旧版浏览器中的像素显示效果会更差。但是，这也有助于细分您的受众，因为通常那些拥有更新浏览器的人也有更新的计算机。因此，这是一种对您有利的折衷方案，主要是为那些无法处理的网站提供精简版本的网站。不能保证，但我发现它通常可以很好地平衡。

总体而言，实际测试是可行的方法。构建它，看看它是否有效，并在找到它们后修复性能问题。我不会犹豫，因为它有可能不起作用。如果它工作得很好而你不尝试，你永远不会知道！

【讨论】：