Safari на iPad более эффективен при рендеринге CSS-градиентов или изображений? - PullRequest
Новая
       21

Safari на iPad более эффективен при рендеринге CSS-градиентов или изображений?

1 голос
/ 26 сентября 2011

Я собираюсь использовать CSS-градиенты для элемента моего веб-приложения, которое рисуется многократно, так как это позволило бы мне более гибко динамически изменять его внешний вид.Однако мой вопрос заключается в том, являются ли градиенты более дорогими для отображения в браузере, чем растровые изображения.Или изображения используют больше вычислительной мощности?(И я не касаюсь кросс-браузерной совместимости - приложение будет использоваться только на iPad)

1 Ответ

4 голосов
/ 26 сентября 2011

Согласно статье в Webkit Wiki, изображения работают лучше:

Иногда бывает заманчиво использовать функции рисования webkit, такие как -webkit-градиент, когда это на самом деле не нужно - поддерживать изображения и работать с ними.с фотошопом и инструментами для рисования могут быть хлопоты.Тем не менее, использование CSS для этих задач переносит трудности с компьютера дизайнера в ЦП цели.Градиенты, тени и другие декорации в CSS должны использоваться только при необходимости (например, когда форма динамическая в зависимости от содержимого), в противном случае статические изображения всегда быстрее.На очень бюджетных платформах даже рекомендуется использовать статические изображения для некоторого текста, если это возможно.

Источник: https://trac.webkit.org/wiki/QtWebKitGraphics#Usestaticimages

Конечно, вы должны сбалансировать этоПроцессорное время с дополнительным временем загрузки образа с сервера.Кроме того, для Internet Explorer фильтры работают очень медленно, особенно если их много на одной странице.

Этот ответ выше непосредственно взят из Как производительность использования градиентов фона в CSS по сравнению с использованием изображений?

Эти ссылки могут быть полезны для чтения.

Производительность перерисовки / перекомпоновки браузера: использование CSS3-градиентов и PNG-градиентов

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/

...