Note that there are some explanatory texts on larger screens.

plurals
  1. POOptimizing my web application using Flash, Javascript and JSP
    primarykey
    data
    text
    <p>I have a web app that I am trying to speed up. It looks like this: </p> <pre><code>+------+ | | | | +------+ +------+ | | | | +------+ +------+ | | | | +------+ </code></pre> <p>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:</p> <pre><code>LoadTime = (4 seconds) * numberOfBoxes + (3 seconds) </code></pre> <p>When I just imbed the 3rd party swf directly (without our swf or the javascript) the load time is: </p> <pre><code>LoadTime = (1 second) * numberOfBoxes + (2.5 seconds) </code></pre> <p>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: </p> <ul> <li>Serverside processing (jsp)</li> <li>Download</li> <li>Javascript</li> <li>Flash</li> <li>Other?</li> </ul> <h2>Download</h2> <p>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 <strong>after the first time</strong>. </p> <p>One place of interest however is marked in red. The red area is a 3 second gap between when <code>My SWF</code> is loaded and when two gif files are loaded followed by the <code>Third Party SWF</code>. I think this pause is caused by processing on the client (is this true?). </p> <p><img src="https://i.stack.imgur.com/HBgVd.jpg" alt="enter image description here"></p> <p><em>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</em>.</p> <p>I think that I can conclude from this that I have a client side processing issue which implies either Flash or Javascript. <strong>Question 1: Is this correct?</strong></p> <p><em>Edit: I added up the total non-concurrent download time:</em></p> <ul> <li>When there is <em>1 iframes</em> the download time is <em>1.87 seconds</em></li> <li>When there is <em>2 iframes</em> the download time is <em>2.29 seconds</em></li> <li>When there is <em>5 iframes</em> the download time is <em>8.57 seconds</em></li> <li>When there is <em>10 iframes</em> the download time is <em>10.62 seconds</em></li> <li>When there is <em>21 iframes</em> the download time is <em>17.20 seconds</em></li> </ul> <h2>Javascript</h2> <p>I used the profiler in firebug to profile the javascript. Here are the results when there are four components on the page: </p> <p><img src="https://i.stack.imgur.com/iV248.jpg" alt="enter image description here"></p> <p>This means that the javascript is running for about .25 second/chart. This seems reasonable to me. </p> <p><strong>Question 2: Am I reading these results correctly?</strong></p> <p>This leaves about 3.5 seconds/chart of processing for something else. </p> <h2>Flash</h2> <p>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. </p> <p><strong>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?</strong></p> <h2>Other</h2> <p>I am not sure if there are other things other than: </p> <ul> <li>Serverside processing (jsp)</li> <li>Download</li> <li>Javascript</li> <li>Flash</li> </ul> <p><strong>Question 4: Is there something that I am missing that could be eating up time?</strong></p> <h2>Next Steps</h2> <p>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. </p> <p><strong>Question 5: How should I find that missing time?</strong></p> <h2><em>Update</em>: Time Summary</h2> <p>I have graphed all of the times for each thing that could be taking time. </p> <ul> <li>The X-axis is the number of charts that are being used.</li> <li>The Y-axis is the about of time loading all of the charts takes.</li> </ul> <p>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). </p> <p><img src="https://i.stack.imgur.com/0q3nR.jpg" alt="enter image description here"></p> <h2><em>Update</em>: Browser Wars</h2> <p>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. </p> <p><img src="https://i.stack.imgur.com/XLXbf.jpg" alt="enter image description here"></p> <p><em>Note: Before running tests for Firefox I cleared the cookies and cache. I did not do this for IE or Chrome</em></p> <h2><em>Update</em>: Flash Loading</h2> <p>I have been sprinkling <code>console.log</code> statements though my code trying to sandwich the slow code. (The results get pushed out to the Firebug console). </p> <p>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. </p> <pre><code>17:08:29.973 - Javascript code Time difference: 2510 ms 17:08:32.483 - Flash- myComponent.init() </code></pre> <p>Does flash need to setup a virtual machine for each swf? Does it compile the actionscript on the client? </p> <p>What happens between when I <code>&lt;embed&gt;</code> my swf and when the <code>creationComplete</code> event in my main <code>.mxml</code>?</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload