iPad 上的 Safari 在渲染 CSS 渐变或图像方面是否更有效？答案

【问题标题】：Is Safari on iPad more efficient at rendering CSS gradients or images?iPad 上的 Safari 在渲染 CSS 渐变或图像方面是否更有效？
【发布时间】：2011-09-27 00:28:16
【问题描述】：

我希望将 CSS 渐变用于我的网络应用程序中重复绘制的元素，因为它可以让我更灵活地动态更改其外观。但是，我的问题是浏览器渲染渐变是否比位图图像更昂贵。还是图像使用更多的处理能力？（而且我不关心跨浏览器的兼容性——该应用程序只能在 iPad 上使用）

【问题讨论】：

我想你会有更大的顾虑……
@hop 根本不理解该声明。如果您说差异可以忽略不计，那么我仍然想知道哪个通常更有效，因为该应用程序非常复杂，我希望尽我所能最大限度地提高性能。
“尽我所能”？完全删除渐变...

标签： css ipad safari gradient

【解决方案1】：

根据 Webkit Wiki 上的一篇文章，图像表现更好：

有时使用 webkit 的绘图功能（如 -webkit-gradient）是很诱人的，但实际上并没有必要 - 维护图像以及使用 Photoshop 和绘图工具可能会很麻烦。但是，将 CSS 用于这些任务会将麻烦从设计者的计算机转移到目标的 CPU。 CSS 中的渐变、阴影和其他装饰应仅在必要时使用（例如，当形状根据内容动态时） - 否则，静态图像总是更快。在非常低端的平台上，如果可能的话，甚至建议对某些文本使用静态图像。

来源：https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages

当然，您必须平衡 CPU 时间和从服务器加载图像所需的额外时间。此外，对于 Internet Explorer，过滤器非常慢，尤其是如果您在一页上有很多过滤器。

以上这个答案直接摘自How does the performance of using background-gradients in CSS vs using images?

这些链接可能对您有用

Browser Repaint/Reflow performance: using CSS3 Gradients vs PNG Gradients

CSS 渐变比 SVG 背景更快 http://leaverou.me/2011/08/css-gradients-are-much-faster-than-svg/

CSS3 与图像的运行时性能 http://jacwright.com/476/runtime-performance-with-css3-vs-images/

【讨论】：

这是我的经验。在最近一个相当强大的网络应用程序中，我们将 iPad 性能问题归结为 CSS3 渐变。愚蠢的，痛苦的教训。如果 iPad 性能对您很重要，请使用图片。