iPad上的Safari更有效地呈現CSS漸變或圖像嗎？

我正在尋找使用CSS漸變來重複繪製我的網絡應用程序的元素，因爲它可以讓我更靈活地動態更改其外觀。但是，我的問題是，漸變對於瀏覽器渲染比點陣圖像更昂貴。或者圖像使用更多的處理能力？（我不關心跨瀏覽器的兼容性 - 應用程序將只能在iPad上使用）iPad上的Safari更有效地呈現CSS漸變或圖像嗎？

來源

2011-09-26 blabus

我想你會有更大的擔憂... – hop

@hop根本不理解這種說法。如果您認爲差異可以忽略不計，我仍然想知道哪一種效率更高，因爲該應用程序非常複雜，我希望能夠儘可能提高性能。 – blabus

「盡我所能」？完全刪除漸變... – hop

據有關的Webkit百科的文章，圖片更好地履行：

有時很誘人使用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/

來源

2011-09-26 16:28:16

這是我的經驗。在最近一款功能強大的網絡應用程序中，我們將iPad的性能問題固定在CSS3漸變上。愚蠢，痛苦的教訓。如果iPad性能對您很重要，請使用圖片。 – mahalie