Каковы преимущества использования CSS Спрайты в веб-приложениях?
Не уверенный, что это имеет значение, какая база данных
UNION и UNION ALL должна работать над всеми SQL Server.
необходимо избежать ненужных UNION с, они - огромная утечка производительности. Как показывает опыт, используйте UNION ALL, если Вы не уверены, чтобы использовать.
6 ответов
Вопрос обычно не в количестве полосы пропускания, которое оно могло бы сэкономить . Это больше о снижении количества HTTP-запросов , необходимых для отображения веб-страницы.
Учитывая:
- веб-браузеры выполняют только несколько HTTP-запросов параллельно
- выполнение HTTP-запроса означает раунд -поездка на сервер, который занимает много времени
- у нас есть «быстрое» интернет-соединение, что означает быструю загрузку ...
Что требует времени при выполнении большого количества запросов для получения небольшого содержимого ( например, изображения, значки и т.п.) - это несколько циклов обращения к серверу: вы в конечном итоге тратите время на ожидание отправки запроса и ответа сервера, вместо того, чтобы использовать это время для загрузки данных.
Если мы сможем минимизировать количество запросов, мы минимизируем количество обращений к серверу и лучше будем использовать наше высокоскоростное соединение (мы загружаем файл большего размера, а не ждем множества меньших) .
Вот почему используются CSS-спрайты.
Для получения дополнительной информации вы можете посмотреть, например: CSS Sprites: Image Slicing's Kiss of Death
Меньше HTTP-запросов = более быстрая загрузка в целом. Yahoo и компания. используйте эту технику, если вы можете себе представить, сколько у них пользователей, это сэкономит много полосы пропускания. Представьте себе 50 отдельных изображений для значков, это 50 отдельных HTTP-запросов, а не один спрайт CSS, содержащий все изображения, который сохранит 49 HTTP-запросов и умножит их на всех пользователей сайта.
На самом деле, спрайты используются не для уменьшения объема передаваемых данных (в большинстве случаев это немного увеличивает объем передаваемых данных), а для уменьшения количества запросов, выполняемых на сервере.
HTTP-запросы в браузерах традиционно выполняются последовательно. Это означает, что один запрос не начнется, пока не будет выполнен предыдущий. Кроме того, открытие соединения для выполнения запроса обходится дорого. Ограничивая количество запросов к серверу, вы увеличиваете скорость загрузки элементов.
Я думаю, у Yahoo есть лучший аргумент в пользу CSS-спрайтов. Кроме того, стоит прочитать всю страницу:
Помимо повышения производительности общей загрузки страницы за счет ограничения количества запросов, спрайты изображений могут также выполнять динамическую замену изображений (например, изменение фонового изображения элемента навигации при наведении) "немного лучше, так как все, что вы делаете, это изменяете x, y вместо src.
Я думаю, чтобы ответить, каков порог, чтобы гарантировать их использование, я бы сказал немедленно из-за потенциальных улучшений нагрузки для каждого человека клиент.
Помимо уменьшения количества HTTP-запросов (как уже отмечалось), спрайты CSS не зависят от JavaScript. Это дает несколько других преимуществ:
- меньше кода для поддержки
- проще кроссбраузерное тестирование
- можно закодировать встроенно с помощью
атрибутов стиля - нет взлома DOM
- нет предварительной загрузки изображений (так что меньше администрирования - «Ой, подождите, мне нужно предварительно загрузить эту новую навигационную кнопку ... дерьмо, какой файл .js имеет мой предварительный загрузчик?»)
- вы можете использовать классы css, чтобы применить его к нескольким селекторам
- можно применяться к любому селектору с псевдоклассом
: hover, или в любом селекторе, который можно обернуть якорем (не толькоimgs)
Если вы не против взлома DOM, вы можете получить отличные эффекты анимации, просто нажав X и значения Y около. Это упрощает анимацию множества различных состояний (например, нажатие клавиши или onmouseclick ).
Также есть несколько интересных побочных эффектов графического производства:
- меньше графического производства файлы
- проще создавать макеты для кнопок и т. д. непосредственно в HTML (меньше необходимости в PSD-файлах)
- проще вносить изменения в графический интерфейс без необходимости регенерировать тонны графики
- , что гораздо сложнее для пиратов изображений ваша графика