CSS Sprites браузер рендеринга

Question

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

Answer 1

на более медленных компьютерах, оснащенных более старыми браузерами (например, IE6 / IE7), вы можете заметить значительное снижение производительности, когда вы используете очень большие изображения много раз на одной странице. Это еще более серьезно, когда вы используете спрайты для состояний наведения.

Вам нужно умерить соблазн на то, чтобы поместить все ваши спрайты в одно огромное изображение - подумайте, какие элементы являются частью пользовательского интерфейса веб-сайта / веб-приложения, и поместите их в один файл спрайтов (они будут отображаться постоянно при просмотре) , Затем попробуйте сгруппировать оставшиеся спрайты в изображения для отдельных разделов сайта и использовать их по мере необходимости. Недостатком является немного увеличенное время загрузки (дополнительные запросы HTTP), но пользовательский опыт при просмотре / прокрутке страницы будет намного выше.

Answer 2

Вы должны сбалансировать вещи. Если вы говорите об изображении, которое будет содержать, скажем, 1000 спрайтов, тогда CSS будет огромным. Кроме того, существует очень малая вероятность того, что вы все равно будете использовать все эти спрайты на одной странице.

Answer 3

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

С миллионами пользователей Yahoo! и AOL делают все возможное, чтобы улучшить пользовательский опыт. И AOL.com, и Yahoo.com используют спрайты CSS для сохранения многочисленных HTTP-запросов для своих сложных интерфейсов. Оба сайта используют спрайты CSS для выборочного отображения значков в своих каталогах служб, а Yahoo! также использует спрайты в других местах.

Еще одним преимуществом CSS-спрайтов является то, что объединенное изображение часто меньше по размеру файла, чем отдельные изображения, несмотря на добавление пробелов между изображениями. Меньший размер спрайтов обусловлен уменьшенными издержками, связанными с несколькими таблицами цветов и информацией о форматировании, необходимой для отдельных изображений. Чтобы максимизировать доступность и удобство использования, спрайты CSS лучше всего использовать для значков или декоративных эффектов.

Answer 4

Как мы можем судить по нашему опыту на YouTube, с этим нет больших проблем.

Надеемся, что браузер кэширует изображение в памяти и затем использует его для рендеринга вывода там, где это изображение необходимо.