Оптимизация моего веб-приложения с использованием Flash, Javascript и JSP

У меня есть веб-приложение, которое я пытаюсь ускорить. Это выглядит так:

+------+
|      |
|      |
+------+

+------+
|      |
|      |
+------+

+------+
|      |
|      |
+------+

Каждый ящик представляет собой iFrame, содержащий Flash SWF и некоторый javascript. SWF загружает SWF третьей стороны, который используется для отображения информации. Я обнаружил, что время загрузки для webapp:

LoadTime = (4 seconds) * numberOfBoxes + (3 seconds)

Когда я просто вставляю сторонний swf напрямую (без нашего swf или javascript), время загрузки:

LoadTime = (1 second) * numberOfBoxes + (2.5 seconds)

Я пытаюсь найти, где используются дополнительные 3 секунды, чтобы ускорить наш webapp. Я считаю, что кандидаты:

  • Обработка серверов (jsp)
  • Скачать
  • Javascript
  • Вспышка
  • Другое?

Скачать

Ниже приведен образ загрузок, извлеченных из firebug. Я заменил имена файлов тем, что их тип. Ни одна из загрузок не занимает особенно длинную после первого раза.

Однако одно интересное место отмечено красным. Красная область занимает 3 секунды между загрузкой My SWF и загрузкой двух файлов gif, а затем Third Party SWF. Я думаю, что эта пауза вызвана обработкой на клиенте (это правда?).

enter image description here

Примечание. Красные полосы на графике не являются частью диаграммы. Я добавил их, чтобы выделить пробел, где ничего не происходит на панели .net.

Я думаю, что я могу заключить, что у меня проблема с обработкой на стороне клиента, которая подразумевает либо Flash, либо Javascript. Вопрос 1: Правильно ли это?

Изменить: я добавил общее время одновременной загрузки:

  • Когда есть 1 iframe, время загрузки составляет 1,87 секунды.
  • Когда есть 2 iframes, время загрузки составляет 2,29 секунды.
  • Когда есть 5 iframe, время загрузки составляет 8.57 секунд.
  • Когда есть 10 iframe, время загрузки составляет 10,62 секунды.
  • Когда есть 21 iframe, время загрузки составляет 17.20 секунд

Javascript

Я использовал профилировщик в firebug для профилирования javascript. Вот результаты, когда на странице есть четыре компонента:

enter image description here

Это означает, что javascript работает примерно на 0,25 секунды/график. Это кажется мне разумным.

Вопрос 2: Я правильно читаю эти результаты?

Это оставляет около 3,5 секунд/диаграмму обработки для чего-то еще.

Флэш

Я вставил некоторые инструкции трассировки в код AS3. Мы слушаем событие под названием "сделанная загрузка". Я помещал след в первый метод инициализации и в метод "сделанной загрузки". Вспышка только съедает .2 секунды/график между этими двумя операторами трассировки.

Вопрос 3: Есть ли лучший способ профилировать флеш? Может быть, это флеш-загрузка или что-то в этом роде, которое елит дополнительное время?

Другие

Я не уверен, есть ли другие вещи, кроме:

  • Обработка серверов (jsp)
  • Скачать
  • Javascript
  • Вспышка

Вопрос 4: Есть ли что-то, что мне не хватает, что можно было есть?

Следующие шаги

Я не уверен, каким должен быть мой следующий шаг. Я знаю, что что-то занимает около 1,5 - 3 секунды/график, но я не могу понять, что это такое. Я подозреваю, что это связано с моей swf.

Вопрос 5: Как мне найти недостающее время?

Обновление: сводка времени

Я все время рисую для каждой вещи, которая может занять время.

  • Ось X - это количество используемых диаграмм.
  • Ось Y - это время загрузки всех графиков.

Последний график, возможно, самый важный граф. Синие точки - это сумма общего времени загрузки (измеренная с помощью секундомера). Красные точки - это количество времени, которое я учитывал (Javascript, время загрузки и время вспышки).

enter image description here

Обновление: Браузерные войны

Я ориентирую IE и Firefox (хотя это хороший бонус, если работают другие браузеры). Все результаты, представленные до сих пор, включают Firefox с firebug. Просто для удовольствия я думал, что попробую в других браузерах. Я не думаю, что это приближает меня к решению, но интересно посмотреть, сколько IE отстой.

enter image description here

Примечание. Перед запуском тестов для Firefox я очистил файлы cookie и кеш. Я не делал этого для IE или Chrome

Обновление: загрузка Flash

Я использовал sprinkling console.log, хотя мой код пытается сэндвич медленного кода. (Результаты выводятся в консоль Firebug).

Одна вещь, которую я заметил, которая кажется мне подозрительной, заключается в том, что между моим последним журналом javascript печатается и когда мой первый журнал флэш-памяти печатается.

17:08:29.973 - Javascript code
Time difference: 2510 ms
17:08:32.483 - Flash- myComponent.init()

Нужно ли устанавливать флешку для виртуальной машины для каждого swf? Составляет ли он файл actionscript на клиенте?

Что происходит между тем, когда я <embed> мой swf и когда событие creationComplete в моей главной .mxml?

Ответы

Ответ 1

Я создал SWF helloWorld и встроил его в веб-страницу.

В браузерах, которые я тестировал, требуется много времени для загрузки swf. Когда на странице есть только один swf, это не заметно (время загрузки ~ 3 секунды), однако при наличии 10 swfs на странице есть заметная пауза (~ 3 секунды/диаграмма * 10 диаграмм = 30 секунд).

Вот те браузеры, которые я тестировал:

  • IE 7 - очень медленно. Занимает около 37 секунд для загрузки 16 приложений Hello World.
  • IE 8 - Кажется, в основном нормально. Проверено только на короткий период.
  • Firefox 3.6.17 - Очень медленно. Так же медленно, как IE 7
  • Chrome 12.0.742.91 - быстрый

Я отправил свое приветственное мировое приложение в другой вопрос. Если кто-то знает, как ускорить загрузку очень простой swf, вы можете ответить здесь:

Flash: много одинаковых SWF на одной странице

Ответ 2

Только некоторые идеи:

Можете ли вы устранить среднего человека, в данном случае, стороннего swf?

Где находится сторонний SWF? Если он находится на удаленном сервере, вам нужно просто загрузить его один раз, а затем поместить его на свой локальный сервер вместе с другими файлами. Это может исключить время загрузки.

Можете ли вы использовать что-то вроде декомпилятора флэш-памяти для декомпиляции стороннего SWF-кода и поместить код прямо в ваш swf? (возможно, это противоречит правилам)

Что произойдет, если вы не поместите содержимое в iframes, а просто поместите их в divs?

Ответ 3

В качестве другого варианта - попытайтесь отключить firebug. Время как-то меняется?

Также попробуйте то же самое в хром - с инструментами и без него.

Чтобы понять, будет ли этот jsp, вызванный из вашего swf или только вашего swf, вы можете сделать это:

  • вместо вашего обычного swf, давайте просто издеваемся без каких-либо вызовов - просто пуст
  • также вместо вашего js в кадре предоставить только пустой файл

Сделайте это частично и проверьте разницу.

Также попробуйте профилировать все события newtwork, которые oocurs. Может быть, ваш SWF вызывает какой-то метод в стороннем случае, который вызывает тогда какой-то удаленный метод. Здесь я думаю, что мы не можем улучшить это. Только может быть, если метод третьего лица может быть каким-то образом кэширован. Поэтому в вашем профиле мы видим только загрузку файлов - мы не видим других запросов - ajax или что-то вроде этого.

Ответ 4

В соответствии с моим делом, Есть три возможности, которые подозревают.

  • Профилировщик Firebug. Попробуйте другой браузер и посмотрите, сколько времени потребуется.
  • Красный компонент, который занимает время после загрузки другого компонента.
  • SWF файл, создающий соединение с другим приложением через ваш сервер вместо прямого подключения.

Ответ 5

Являются ли фреймы, исходящие из ответа HTML с сервера? Или, iframes добавлены в DOM динамически через javascript?

У вас будет более высокая производительность, ожидая, пока DOM будет готов, и добавьте iframes в DOM после загрузки страницы.

Я думаю, проблема в том, что Flash блокирует выполнение script, в то время как локальный SWF загружает сторонний SWF. Вероятно, вам нужно выяснить, как выполнять параллельную, неблокирующую асинхронную загрузку стороннего SWF с помощью ActionScript.