Как я могу эффективно доставить большое количество активов (изображений)?

Question

У меня есть одна веб-страница, которая будет отвечать за доставку более 500 изображений в браузер. Размеры варьируются от 50 до 80 килобайт.

Используемый сервер - nginx, а также используется лаковый прокси.

Теперь, как я могу сделать этот процесс наиболее эффективным, возможно, так?

У меня есть только две мысли, и мне хотелось бы, чтобы некоторые опытные люди здесь.

Мои только мысли:

1. Настройка нескольких субдоменов и служат партии из них. Я считаю, что наилучшее количество субдоменов для использования будет 12.

2. Используйте ajax для загрузки пакетов в браузер только тогда, когда это необходимо, когда пользователь прокручивает вниз.

Я думаю, что вариант 2 здесь действительно не решает проблему; просто обходит его. Поэтому я хотел бы сосредоточиться на том, чтобы сделать процесс наиболее эффективным и самым быстрым, каким он может быть.

Answer 1

Вы загружаете 1 страницу с 500 * 50 КБ ~ 25 МБ данных, это абсолютно безумный лист!

Независимо от того, что вы делаете, это всегда будет чувствовать себя медленнее по сравнению с average pagesisze of around 1 MB currently. Загрузка большей части динамически через AJAX при необходимости имеет смысл. В качестве альтернативы вы можете разбить его на несколько слоев.

Если вы действительно установить на одну гигантской нединамической странице, то:

• убедитесь, что заголовки кэша установлены, чтобы позволить кэширование (не с первым ГПУ нагрузкой)
• основного проблема (помимо общего размера) заключается в том, что у вас есть много ресурсов, которые вы запрашиваете. есть 3 способа ограничить последствия этого:
  • использование sharding (т. е. разные поддомены). Это работает, потому что в браузерах откроется только до 4 подключений на хост, поэтому, используя несколько доменов, вы можете запросить/загрузить больше ресурсов параллельно.
  • Поместите свои изображения в спрайт (то есть одно большое изображение и используйте css для отображения нужного вам бита)
  • настройте свой сервер, чтобы использовать SPDY для Google. Это в значительной степени устраняет проблему с множеством ресурсов. Даунсайд является то, что он все еще экспериментальный (т.е. вам необходимо перекомпилировать Nginx с патчами) и поддерживается не всеми еще фрезы