Как производительность использования background-градиентов в CSS против использования изображений?

Question

Кто-нибудь или кто-нибудь знает, кто оценивал эффективность использования фоновых градиентов в CSS по сравнению с использованием изображений?

Определенно, это более гибкий и продуктивный код, но есть ли снижение производительности по сравнению с использованием CSS-градиентов для кнопок, панелей и т. Д.?

Вот пример кросс-браузерного CSS градиента:

background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #1E5799 0%, #2989D8 50%, #207cca 51%, #7db9e8 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1E5799), color-stop(50%,#2989D8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E5799', endColorstr='#7db9e8',GradientType=0 ); /* ie */

background: -o-linear-gradient(top, #1E5799 0%,#2989D8 50%,#207cca 51%,#7db9e8 100%); /* opera */

Answer 1

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

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

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

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

Answer 2

Для Safari / WebKit в OS X производительность хороша, если вы используете несколько фоновых градиентов, и, кажется, увеличивается с мощностью компьютера конечного пользователя. Некоторые элементы CSS всегда плохо работают, хотя - tr: hover - худший из моего опыта.

Например, на совершенно новом MBP (2,2 ГГц i7, 8 ГБ памяти) страница с таблицей из 30 строк и 5 столбцов с одним фоновым градиентом при наведении курсора будет заикаться и пропускать, когда пользователь наводит курсор мыши над строк. Кажется, после 8 рядов мне стало плохо, что не очень много.

Возможно, вы захотите рассмотреть возможность использования CSS-градиентов для разработки, а затем преобразовать их в изображения на проблемных страницах, прежде чем приступить к работе.

[Это относится к OS X Lion в Safari 5.1 и WebKit r94958 (9-12-2011).]

Answer 3

в случае IE - вы вызываете фильтр, который действует как «плагин» для браузера, поэтому выполняется некоторый код для получения желаемого результата. Я предполагаю, что это довольно быстро, но если ваша страница достаточно длинная, чтобы рассчитать и визуализировать цвета, потребуется больше, чем показ изображения где-нибудь на странице.