PDA

View Full Version : Optimising application loading time



DrZog
4 May 2007, 1:17 AM
Trying to get my loading times down, I noticed the following with Firebug: small gifs < 1Kb are taking over 1.1s to load (as are other small scripts)

FB also reports that there were a total of 35 requests and that of the page total of 829 KB, 824 KB was from the cache. The question is, why does the page stil take 4.54s to load :-/

matjaz
4 May 2007, 2:30 AM
Probably your problem isn't load time, but parsing (HTML, JS) and executing it.

DrZog
4 May 2007, 2:38 AM
Hey matjaz, so CPU constraint? As browsers are limited to 2 (I think) HTTP requests I thought they might be bunching up...

jsakalos
4 May 2007, 5:33 AM
Interesting. Can this limit of 2 simultaneous requsts be configured somewhere in FF?

jsakalos
4 May 2007, 5:44 AM
I also had some performance problem but I don't know it could be also your case. Nevertheless, I initialized in my app approximately 100 DragSources and 100 DropTargets on the page load.

This really impaired load time - it was 10+ seconds.

Then I realized that majority of these elements is never going to be dragged or dropped on so I moved the DD initialization to the mouseover event (with checking if DD was already initialized for that element, of course).

The load time is now 5- seconds.

DrZog
4 May 2007, 6:27 AM
That's some good design jsakalos, kind of extending the whole on-demand concept that makes AJAX kewl.

Here is an interesting article:
http://www.oreillynet.com/xml/blog/2006/10/what_i_didnt_know_about_xhr.html

brian.moeskau
4 May 2007, 8:10 AM
For more than a handful of dragdrop objects, you really should look into the DragZone and DropZone classes. Those allow you to use delegation so that you only have two DD objects (the zones) which delegate the appropriate actions (drag, drop) as needed to their nodes. This will make startup performance a non-issue. The treeview uses the same model and subclasses DragZone and DropZone to add custom logic. At some point soon I hope to produce a tutorial that covers the different patterns for implementing drag and drop with Ext.

jsakalos
4 May 2007, 8:13 AM
I was using Drag/DropZones but it still wasn't fast enough. Maybe Registry.register() calls? But, not it is not an issue anymore as I only setup Drag/DropZones on load and I call register from mouseover event.

Anyway, thanks for advice.

mdelanno
4 May 2007, 10:24 AM
Interesting. Can this limit of 2 simultaneous requsts be configured somewhere in FF?

about:config -> network.http.max-connections-per-server

http://kb.mozillazine.org/Network.http.max-connections-per-server

A nice article on this topic: http://www.die.net/musings/page_load_time/

jsakalos
4 May 2007, 10:26 AM
Thanks, this is very important and useful info for me. :)

tryanDLS
4 May 2007, 11:13 AM
You can tweak that config entry, but it doesn't necessarily mean the browser is going to open up more pipes for you - it's not fully supported. In any case, it's bad practice, because if everybody does it, it's just gonna choke the servers trying respond to that many requests. The better approach, as has been discussed before is to make use of compression and combining multiple small files into fewer big files.