CSS рендеринг браузера Спрайтов
Я использую метку, чтобы вернуться в начало цикла. Это плохая идея?
Да. Сегодня был бы отличный день, чтобы узнать о
while. Два способа думать оwhile:(1) Вы знаете, что делает
if.if(condition) statementвычисляетconditionи, если оно истинно, выполняетstatementодин раз .
whileделает почти то же самое.while(condition) statementоцениваетconditionи, если оно истинно, выполняетstatement, а затем снова проверяетcondition, ... и так далее, покаconditionне станет ложным.(2) Если вы понимаете goto, вы можете выразить
whileчерезgoto.while(condition) statementсовпадает с:Continue: if (!condition) goto Break; statement goto Continue; Break:;Если вы можете программировать с помощью
goto, вы можете программировать ту же самую вещь более четко с помощьюwhile.Тем не менее, в вашем конкретном случае вы, вероятно, захотите использовать цикл
do, который является перевернутымwhile:do statement while(condition);имеет поведение «do the Statement, затем проверьте условие, если оно истинно, выполните оператор снова ... пока условие не станет ложным.
doимеет семантику:Restart: statement Continue: if (condition) goto Restart; Break:;
4 ответа
on slower machines equipped with older browsers (like IE6/IE7) you can notice significant performance drop when you're using very big images many times on one page. It's even more severe, when you're using sprites for :hover states.
You have to moderate your temptation towards pushing all your sprites to one huge image - think about which elements are part of the website/webapp UI and put them into one sprite file (those will be displayed all the time, while browsing). Then try to group rest of the sprites into website section-specific images, and use them as needed. Downside is slightly extended load time (additional HTTP requests), but user experience while viewing/scrolling page will be much higher.
You need to balance things. If you are talking about an image which will include say 1000 sprites then the CSS will be huge. In addition there is a very thin chance that you'll be using all those sprites in the same page anyway.
Как мы можем судить по нашему опыту на YouTube, с этим нет большой проблемы.
Надеемся, что браузер кэширует изображение в памяти и затем использует его для рендеринга вывода везде, где это изображение необходимо .
Вы можете сохранить значительное количество HTTP-запросов, объединив ваши изображения в один или несколько составных спрайтов и используя CSS для выборочного отображения частей спрайта на вашей веб-странице. Теперь, когда основные браузеры эволюционировали достаточно для поддержки CSS-фонов и позиционирования, все больше сайтов используют эту технику производительности. Фактически, некоторые из самых загруженных сайтов в Интернете используют CSS-спрайты для сохранения HTTP-запросов.
С миллионами пользователей Yahoo! и AOL делают все возможное, чтобы улучшить пользовательский опыт. И AOL.com, и Yahoo.com используют спрайты CSS для сохранения многочисленных HTTP-запросов для своих сложных интерфейсов. Оба сайта используют спрайты CSS для выборочного отображения значков в своих каталогах служб, а Yahoo! также использует спрайты в других местах.
Другим преимуществом CSS-спрайтов является то, что объединенное изображение часто меньше по размеру файла, чем отдельные изображения, несмотря на добавление пробелов между изображениями. Меньший размер спрайтов обусловлен уменьшенными издержками, связанными с несколькими таблицами цветов и информацией о форматировании, необходимой для отдельных изображений. Чтобы максимизировать доступность и удобство использования, спрайты CSS лучше всего использовать для значков или декоративных эффектов.