ускорить время загрузки изображения

Question

В нашем приложении мы предоставляем онлайн-карту, например, карту Google: показывать фрагменты карты в div (контейнере), когда пользователь перетаскивает / перемещает контейнер, будут загружаться новые фрагменты карты (фактически это изображения)..

Однако, в отличие от карты Google, мы предоставляем более одного слоя в контейнере, например, в следующей плитке:

Это всего лишь одно изображение, но в нашем случае это может быть более 5 прозрачных изображений, наложенных вместе.

Итак, когда пользователь перетаскивает или перемещает контейнер, мы будем загружать в 5 раз больше изображений, чем раньше.Что будет вызывать «операцию перетаскивания мышью» так медленно, поэтому мне интересно, есть ли способ ее улучшить?

По моему мнению, это вызвано http Parallel Downloads.В общем, мы будем загружать около 6 (6 плиток в текущем виде карты, см. Изображение ниже) * 5 (слоев) = 30 изображений на одну операцию для пользователя.

Это большое требование.

Я прочитал эту статью: Исследование производительности, часть 4: Максимальное увеличение числа параллельных загрузок в Carpool Lane

Автор предлагает способ "использования дополнительных псевдонимов" для увеличения параллельных загрузок в нашемстраниц, это кажется хорошей идеей.

Но наше приложение работает в сети интрасети без Интернета, пользователь часто просматривает сайт, используя этот URL:

http://servername/app

И наши плитки сохраняются в: http://servername/app/tiles/...../xx.png

Так что я не знаю, можем ли мы добавить псевдонимы вроде:

http://img1.servername/app/tiles/...../xx.png
http://img2.servername/app/tiles/...../xx.png ?

Я так не думаю.: (

Так в моем случае, есть идеи по улучшению производительности?

Answer 1

Вы можете немного переместить нагрузку на серверную часть, сделав что-то, что просто объединит эти плитки.

Например, ваша серверная программа будет существовать на http://www.servername/app/tiles/gettile/?12&13&14 и просто вернет объединенный результат плиток 12 13 и 14.

Answer 2

Вы можете использовать доменные имена в вашей интрасети, предполагая, что компьютеры в интрасети проходят через DNS-сервер.На DNS-сервере вы можете создать все псевдонимы доменов и указать их на одном сервере.Если DNS-сервер отсутствует, вы можете открыть файл HOSTS на каждом ПК и поместить эти псевдонимы и указать один и тот же IP-адрес сервера.Если это не вариант, то вы должны сделать 5 прозрачных слоев одним изображением.Таким образом, для определенной координаты вместо загрузки 5 прозрачных изображений вы загружаете одно прозрачное изображение, которое объединяет 5 изображений.Вы можете сделать это статически, запустив какой-либо инструмент, который объединяет изображения одной и той же координаты в один файл, или вы можете сделать это динамически, нажав какой-нибудь обработчик http, который объединяет 5 изображений и создает один файл.

Answer 3

Загружайте изображения для следующих квадратов во всех направлениях, пока пользователь не перемещает карту, поэтому вы должны предварительно загрузить их.
Загрузить только первый слой и отобразить его, затем загрузить следующий и отображенный и т. Д.
Как правило, интранед должен быть быстрым.Убедитесь, что сами изображения оптимизированы.
Узнайте у системных администраторов, не являются ли субдомены действительно невозможными.
И почему вы используете 6 плиток - проверьте, можете ли вы использовать их с одной, вы сохраните http-запросы.Также обеспечьте правильное кеширование.