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

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

Определенно более гибко и продуктивно использовать код, но есть ли недостаток производительности для использования градиентов 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 */

Ответ 1

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

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

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

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

Ответ 2

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

Ответ 3

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

Например, на новом MBP (2.2ghz i7, 8gb memory) страница со столом с 30 строками и 5 столбцами, с одним фоном градиента на tr-зависании, заикается и пропускается, когда пользователь переводит строк. Кажется, что я начинаю плохо себя чувствовать примерно через 8 строк, что не так уж много.

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

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