Быстрый вопрос относительно CSS-спрайтов и использования памяти

Question

Ну, это больше связано с изображениями и памятью в целом. Если я буду использовать одно и то же изображение несколько раз на странице, будет ли каждое изображение объединяться в памяти? Или каждое изображение будет использовать отдельный объем памяти?

Меня беспокоит это, потому что я создаю систему скинов для гаджета Windows Desktop и смотрю, как делаю изображения в скине по умолчанию, чтобы сохранить чистоту файловой системы. В то же время я хочу попытаться свести к минимуму объем памяти. Если я получу один файл, содержащий 100 изображений, и повторно использую это изображение в гаджете 100 раз, у меня не возникнет проблем с производительностью.

Приветствие.

Answer 1

Как насчет тестирования? Создайте простое приложение со спрайтами и без них и следите за памятью Windows, чтобы увидеть, какой подход лучше.

Я говорю вам проверить это из-за этого интересного поста от Владимира , даже одобренного Mozilla "мудро использовать спрайтов" запись:

(...) где это изображение используется в качестве спрайта. Обратите внимание, что это PNG 1299x15,000. Он сжимается довольно хорошо - фактический размер загрузки составляет около 26K - но браузеры не отображать сжатые данные изображения. Когда это изображение загружается и распакованный, он будет использовать почти 75MB в памяти (1299 * 15000 * 4).

(В конце поста Владимира есть еще несколько замечательных ссылок для проверки)

Поскольку я не знаю, как Windows отображает свои гаджеты (и если она не собирается обрабатывать сжатые данные изображений), трудно ИМХО точно сказать, какой подход лучше без тестирования.

РЕДАКТИРОВАТЬ: В официальном блоге Windows Desktop (не обновляется с 2007 года) говорится среда выполнения HTML, используемая для гаджетов Windows, - MSHTML , поэтому я думаю, что тест действительно нужно знать, как ваше приложение будет обрабатывать CSS-спрайты.

Однако, если вы прочитаете официальную документацию Гаджеты рабочего стола Windows и Боковая панель Windows , есть интересная вещь в вашем решении не использовать css sprites , в разделе Протокол GIMAGE :

Этот протокол полезен для добавления изображения для гаджета DOM подробнее эффективнее, чем стандартный HTML тег. Результатом этой эффективности от улучшенной обработки эскизов и кэширование изображений (оно будет пытаться использовать миниатюры из кэша Windows, если запрашиваемый размер меньше 256 пикселей на 256 пикселей) по сравнению с запросом изображения с помощью file: // или http: // протоколы. Добавлен Преимущество протокола gimage заключается в том, что любой файл, кроме стандартного изображения файл может быть указан как источник, и значок, связанный с этим файлом отображается тип.

Я бы попробовал использовать этот протокол вместо CSS-спрайтов и тоже провести некоторое тестирование.

Если вам не поможет эта информация, я постараюсь спросить на официальных форумах Гаджеты рабочего стола Windows .

Удачи!

Answer 2

Изображение будет отображаться в кеше один раз (при условии, что URL-адрес одинаков и строка имени не добавлена ​​к имени файла). Спрайт - это путь.

Answer 3

Браузеры идентифицируют кешируемые ресурсы по заголовку ответа ETag.Если оно отсутствует или отличается среди запросов, то изображение может быть загружено и сохранено в кеше несколько раз.Если вы (на самом деле, веб-сервер) предоставляете уникальный и одинаковый заголовок ETag для каждого уникального ресурса, то любой приличный веб-браузер достаточно умен, чтобы держать его в кэше и повторно использовать до тех пор, пока его Expires header позволяет.

Любой приличный веб-сервер автоматически предоставляет заголовок ETag для статических ресурсов, он часто генерируется автоматически на основе комбинации локального имени файла, длины файла и последней измененной временной метки.Но часто они не добавляют заголовок Expires, поэтому вам нужно добавить его самостоятельно.После оценки вашей истории постов здесь, в Stackoverflow, я с уверенностью могу предположить, что вы знакомы с Apache HTTPD в качестве веб-сервера, поэтому я рекомендую взглянуть на mod_expires документацию , чтобы узнать, как его настроить самостоятельнок оптимальному.

В двух словах, подайте спрайт-изображение вместе с ETag и заголовком Expires далекого будущего, и все будет хорошо.