Optimizing my web application using Flash, Javascript and JSP

I have a web app that I am trying to speed up. It looks like this:

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

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

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

Each box is an iFrame containing a Flash SWF and some javascript. The SWF downloads a thirdparty SWF that is used to display information. I have found that the load time for the webapp is:

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

When I just imbed the 3rd party swf directly (without our swf or the javascript) the load time is:

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

I am trying to find where the extra 3 seconds is being used so that I can speed up our webapp. I think that the candidates are:

• Serverside processing (jsp)
• Download
• Javascript
• Flash
• Other?

Download

Below is an image of the downloads taken from firebug. I have replaced the file names with what their type is. None of the downloads are taking especially long after the first time.

One place of interest however is marked in red. The red area is a 3 second gap between when My SWF is loaded and when two gif files are loaded followed by the Third Party SWF. I think this pause is caused by processing on the client (is this true?).

Note: The red bars in the graph are not part of the diagram. I added them to highlight the gap where nothing is occurring on the .net panel.

I think that I can conclude from this that I have a client side processing issue which implies either Flash or Javascript. Question 1: Is this correct?

Edit: I added up the total non-concurrent download time:

• When there is 1 iframes the download time is 1.87 seconds
• When there is 2 iframes the download time is 2.29 seconds
• When there is 5 iframes the download time is 8.57 seconds
• When there is 10 iframes the download time is 10.62 seconds
• When there is 21 iframes the download time is 17.20 seconds

Javascript

I used the profiler in firebug to profile the javascript. Here are the results when there are four components on the page:

This means that the javascript is running for about .25 second/chart. This seems reasonable to me.

Question 2: Am I reading these results correctly?

This leaves about 3.5 seconds/chart of processing for something else.

Flash

I inserted some trace statements in the AS3 code. We are listening to an event called something like "done loading". I put a trace in the first initialize method and in the "done loading" method. The flash is only eating up .2 second/chart between those two trace statements.

Question 3: Is there a better way to to profile the flash? Could it be the flash loading or something like that that is eating up the extra time?

Other

I am not sure if there are other things other than:

• Serverside processing (jsp)
• Download
• Javascript
• Flash

Question 4: Is there something that I am missing that could be eating up time?

Next Steps

I am not sure what my next step should be. I know that something is taking about 1.5 - 3 seconds/chart but I cannot figure out what it is. I suspect that it is something related to my swf.

Question 5: How should I find that missing time?

Update: Time Summary

I have graphed all of the times for each thing that could be taking time.

• The X-axis is the number of charts that are being used.
• The Y-axis is the about of time loading all of the charts takes.

The last graph is possibly the most important graph. The blue dots is the amount of total loading time (measured using a stop watch). The red dots are the amount of time that I have accounted for (Javascript, download time and flash time).

Update: Browser Wars

I am targeting IE and Firefox (although it is a nice bonus if other browsers work). All of the results presented so far are with Firefox with firebug running. Just for fun I thought I would try in other browsers. I don't think that this brings me closer to a solution but interesting to see how much IE sucks.

Note: Before running tests for Firefox I cleared the cookies and cache. I did not do this for IE or Chrome

Update: Flash Loading

I have been sprinkling console.log statements though my code trying to sandwich the slow code. (The results get pushed out to the Firebug console).

One thing that I have noticed that seems suspicious to me me is that there is a 2.5 second gap between when my last javascript log gets printed and when my first flash log gets printed.

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

Does flash need to setup a virtual machine for each swf? Does it compile the actionscript on the client?

What happens between when I <embed&g开发者_高级运维t; my swf and when the creationComplete event in my main .mxml?

---

Just some ideas:

Can you eliminate the middle man, in this case, the third party swf?

Where is the third party swf located? If it is on a remote server, you should just have to download it once and then place it on your local server with your other files. That could eliminate download times.

Can you use something like a flash decompiler to decompile the third party swf's code and put the code directly into your swf? (this is probably against the rules)

What happens if you don't put the content in iframes, rather, just put them in divs?

---

As another option -- try to disable firebug. Is time changes somehow?

Also try the same in chrome -- with and without dev tools.

To understand whether this jsp, that called from your swf or just your swf you can do this:

• instead of your normal swf, provide just it mock without any calls -- just empty
• also instead of your js in frame provide just empty file

Do this partly and check the difference.

Also try to profile all newtwork events, that oocurs. May be your SWF calls some method in 3rd party, that calls then some remote method. Here I think we cann't improve this. Only may be if method in 3rd party could be cached somehow. So in your profile we see only loading of files -- we dont' see any other requests -- ajax or something like this.

---

As per my undertanding, There are three possibilities which the suspects.

1. Firebug profiler. Try on other browser and see how much time it takes.
2. The Red component which is taking time after that other component might be loaded.
3. SWF file creating connection with other application through your server instead of direct connection.

---

Are the iframes coming from HTML response from server? Or, are the iframes added to DOM dynamically via javascript?

You will have better performance by waiting until DOM is ready and inserting iframes into the DOM after page load.

I think the problem is that Flash is blocking script execution while the local SWF downloads the 3rd party SWF. You probably need to figure out how to do a concurrent, non-blocking, asynchronous download of 3rd party SWF using ActionScript.

---

I created a helloWorld SWF and embedded it into a web page.

On the browsers that I was testing on it takes a long time for the swf to load. When there is just one swf on a page this is not noticeable (~ 3 second loading time) however when there are 10 swfs on a page there is a noticeable pause (~3 seconds/chart * 10 charts = 30 seconds).

Here are the browsers that I tested on:

• IE 7 - Very slow. Takes about 37 seconds to load 16 "Hello World" applications
• IE 8 - Seems mostly ok. Only tested for a brief period
• Firefox 3.6.17 - Very slow. As slow as IE 7
• Chrome 12.0.742.91 - Fast

I have posted my hello world application in another question. If anyone one knows how to speed up the loading of a very simple swf you can answer here:

Flash: Many identical SWFs on same Page