Уменьшите HTTP -запросы 1000 изображений?
https://stackoverflow.com/questions/4543743
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Я знаю, что этот вопрос может показаться немного сумасшедшим, но мне сложно, что, возможно, кто -то может придумать умную идею:
Представьте, что у вас есть 1000 изображений миниатюры на одной HTML -странице.
Размер изображения составляет около 5-10 кб.
Есть ли способ загрузить все изображения в один запрос? Каким -то образом застегивайте все изображения в один файл ...
Или у вас есть другие предложения по предмету?
Другие варианты, о которых я уже знаю:
Спрайты CSS
Ленивая нагрузка
Установить истечение срока службы заголовки
Загрузка изображений по разным именам хостов
Решение
Есть только два других варианта, о которых я могу подумать, учитывая вашу ситуацию:
- Используйте «Данные:» протокол и эхо, кодированная базовая 64 версия ваших миниатюр непосредственно на странице HTML. Я бы не рекомендовал это, так как вы не можете кэшировать эти изображения в браузере пользователей.
- Используйте веб -хранилище HTML5, чтобы сохранить все изображения в виде записей с кодируемыми данными изображения BASE64, хранящимися в виде каждых в столбце. После того, как база данных загрузится на машину пользователей, используйте JavaScript, чтобы пройти через все записи и создать миниатюры на странице динамически, используя что -то вроде jQuery. С помощью этой опции вам нужно будет подождать, пока вся база данных не будет загружена в браузере конечных пользователей, и им понадобится довольно современный браузер.
Я думаю, что ваш лучший выбор - это комбинация ленивой загрузки, кэширования с истекающими заголовками и подача изображений из нескольких имен хоста.
Если изображения могут быть сгруппированы логически, спрайты CSS также могут работать для вас в дополнение ко всему выше. Например, если ваши миниатюры предназначены для изображений, загруженных в определенный день ... вы можете создать один файл для каждого дня, который затем может быть кэширован в браузере пользователей.
Другие советы
Это делается с помощью так называемого CSS Sprite; Одно изображение со всеми остальными изображениями внутри него, с конкретной частью, которая нужна в HTML, выбранной CSS.
Смотрите один учебник в http://css-tricks.com/css-sprites
Похоже, вы хотите что -то вроде Spdy's сервер push. Анкет Когда клиент запрашивает страницу HTML (или первое изображение), SPDY позволяет серверу нажимать другие ресурсы, не ожидая дополнительных запросов.
Конечно, это все еще экспериментально.
Вы можете попробовать монтаж Команда ImageMagick для создания одного изображения.
