CSS-спрайты против URI данных
Я много слышал о важности использования спрайтов для того, чтобы уменьшить количество запросов. Но я думаю, что вместо того, чтобы использовать спрайты, вы можете использовать URI, чтобы выполнить то же самое, и гораздо проще (создание спрайтов не требуется).
Лучше использовать спрайты или uris?
2 ответа
Данные в кодировке Base64 примерно на 1/3 больше, чем необработанные байты , поэтому на страницах, на которых загрузка всех данных изображения занимает более чем в три раза больше времени, чем запрос, спрайты CSS превосходят с точки зрения производительности.
Кроме того, URI встроенных данных заставляют сам файл загружаться столько же, сколько и фактические данные плюс изображения в кодировке base64. Если URI данных находятся на вашей реальной HTML-странице, это означает, что рендеринг останавливается и ожидает загрузки изображения. Если URI данных находятся в вашей таблице стилей, это означает, что любые правила после URI данных должны ждать его, прежде чем они смогут быть обработаны. С другой стороны, с файлом спрайта изображения могут загружаться одновременно с другими вашими ресурсами. Это может стоить стоимости одного дополнительного запроса, особенно с учетом штрафа base64.
Я полагаю, что поддержка IE5, 6 и 7 будет хорошей причиной использовать спрайты вместо URI, если эти цели важны для вас.