浏览器重绘/回流性能:使用 CSS3 渐变与 PNG 渐变 [英] Browser Repaint/Reflow performance: using CSS3 Gradients vs PNG Gradients

问题描述

我正在开发一个会导致大量浏览器回流的应用.性能是这里的一个关键问题.从性能的角度来看，对于某些 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?

推荐答案

对于绘图而言，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.

这篇关于浏览器重绘/回流性能:使用 CSS3 渐变与 PNG 渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！