Введение в статью Wulin.com (www.vevb.com): плюсы и минусы Spirites CSS.
Плюсы и минусы спрайтов CSS
Что касается этой технологии, самые большие преимущества являются следующими:
1. Уменьшите количество HTTP -запросов при загрузке веб -страницы. Эта ситуация, по-видимому, применяется только к случаям, когда ресурсы необходимо повторно приобрести со стороны сервера, такие как начальная загрузка. Но независимо от того, что это все еще очень полезно для веб -страницы с высоким трафиком или частой перезагрузкой.
2. При создании фонового изображения для ссылки он может предотвратить мерцание фоновых, вызванных загрузкой фонового изображения, когда A: Hover. Я лично думаю, что это имеет какое -то значение для улучшения пользовательского опыта.
3. Картинки легко управлять. Предпосылка заключается в том, что фотографии строчки имеют определенные правила. Как показано на рисунке ниже, это изображение фона кнопки, используемого всеми веб -сайтами. Это позволяет вам интуитивно видеть все стили кнопок на веб -сайте. (Лично мне нравится писать картинки в соответствии с определенными атрибутами картинки. Одна картина - это значок или фон BTN ... таким образом, снимками могут управляться, кстати, и снимки с определенными правилами можно следовать, которые легче расположить вместе. Конечно, иногда вы также выбираете сплайс с изображением в соответствии с модулем. Таким образом, простой логика создается в структуре модуля: назой, и на вызове. Вызванный.
CSS Sprites Scope of Application:
1. Ускорение веб -страницы должно быть завершено путем сокращения количества HTTP -запросов.
2. Веб -страница содержит большое количество небольших значков. Или некоторые значки очень универсальны.
3. Есть картинки, которые необходимо предварительно загружать на веб -странице. Это в основном связано с и A: A: Hover Founal Image. Если фоновые изображения A и A: Hover загружаются отдельно, то мышь пользователя перейдет на кнопку, а фон кнопки внезапно исчезнет, а затем появится, вызывая вспышку. Если цвет текста кнопки такой же или похож на фон, он будет еще более смущающим, что может заставить людей чувствовать, что кнопка исчезла.
Условия, которые должны быть выполнены
На веб -страницах лучше всего иметь правило для фотографий, которые собираются с помощью этой технологии. Установить ширину или высоту. Лучше всего установить ширину и высоту. Картины, которые требуют плитки, явно не подходят для спрайта.
Как показано на рисунке выше, кнопки определяются ситуацией фиксированной ширины и высоты.
В случае фиксированной ширины можно расположить несколько небольших снимков параллельно. Когда высота установлена, маленькие изображения расположены вертикально.
Если фон не является фиксированной шириной и не фиксированной высотой, легко использовать технологию спрайтов CSS в случае не фиксированной ширины, ни фиксированной высоты, легко создать состояние изображений, которые не должны появляться на странице. Если высота будет насильно установлена, она будет очень неблагоприятно для будущего обслуживания.
Суммировать
Хорошая ли эта технология или плохая, не может быть обобщена. Это зависит от конкретной ситуации веб -сайта. При анализе сначала решите, нужно ли вам это или нет, а также всесторонне интегрировать затраты на разработку, затраты на техническое обслуживание и другие проблемы. Найдите план, который соответствует реальной ситуации, прежде чем принимать решение. Используйте спрайты вовремя, и рекомендуется не размещать изображения различных размеров, выравнивания и использования экстремальными способами их поддержания. Такие крайности могут не уменьшить количество HTTP -запросов, но вместо этого выкладывают скрытые опасности для будущего обслуживания.