浏览器重绘/回流性能：使用 CSS3 渐变与 PNG 渐变
我正在开发一个会导致大量浏览器回流的应用程序。性能是这里的一个关键问题。从性能的角度来看，对于某些 DOM 元素使用 CSS3 渐变还是图像渐变更好？使用 CSS 文本阴影和渐变的页面是否会像使用图像来实现这些视觉效果的页面一样具有较慢的回流速度？ 另外，有没有我可以使用的回流测试？
I am working at an app that causes lots of browser reflows. Performance is a key issue here. From the performance point of view Is it better to use a CSS3 gradient or an image gradient for some DOM elements? Does a page that uses CSS text shadows and gradients will have a slower reflow as a page that uses images to achieve those visual effects?
Also, are there any reflow tests out there I can use?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
对于绘图来说，CSS 渐变和阴影对 CPU 的负担比图像更大。以前的表现很差，现在还可以接受。如果您有大量的渐变/阴影，您应该只实现它们并在实际设置中进行测试。如果你只有几个，我就不会担心。
For drawing, CSS gradients and shadows do task the CPU more than images. Performance used to be pretty bad, these days they are acceptable. If you have a ton of gradients/shadows, you should just implement them and do the tests in your real-world setting. If you just have a few, I wouldn't worry about it.
这很大程度上取决于浏览器如何渲染它，但在大多数情况下，这些东西会渲染得更慢。此外，在旧版浏览器中，您的像素完美显示效果会较差。然而，这也有助于细分您的受众，因为通常那些拥有更新的浏览器的人也拥有更新的计算机。因此，这是一种对您有利的权衡，本质上是为那些无法处理它的人提供网站的精简版本。不能保证，但我发现它通常可以很好地平衡。
总的来说，现实世界的测试是可行的方法。构建它，看看它是否有效，并在发现性能问题后修复它们。我不会犹豫，只是因为有可能行不通。如果它工作得很好，但你不尝试一下，你永远不会知道！
It depends a lot on how the browser renders it, but for the most part those things will render slower. In addition, you'll have a less pixel-perfect display in older browsers. However, this also serves to segment your audience, as generally those with updated browsers also have updated computers. So, it's a trade-off that can work in your favor to essentially serve a stripped down version of your site to those that wouldn't be able to handle it. It's not guaranteed, but I've found it usually balances out pretty well.
Overall, real-world testing is the way to go. Build it, see if it works, and fix performance issues once you find them. I wouldn't hesitate just because there's a chance it might not work. If it works just fine and you don't try it, you'll never know!