Performance issues in Firefox & Chrome (works well in IE8 and Opera 10)

[Ciaro]

Hi there.

I'm writing a closed-source application, in which all Coolite components are created programmatically. This is required to protect my code upon distribution. I will acquire a commercial license after I ported my application to the 1.0 Coolite codebase & when the performance issues I'm addressing in this topic are solved.

I will try to give you a thorough context on how the application is build, and where I encounter performance problems.

The main page (Default.aspx) loads a viewport, with a Async TreePanel in the west Panel, and a TabPanel in the center Panel. Upon clicking on a node, a seperate page is loaded (containing a viewport with a gridpanel) in a new tab in the center panel. I use the following Javascript to accomplish this:

var tab = tabPanel.getItem(node.id);
if (!tab)
{
   tab = tabPanel.add(
   {
      id: node.id,
      title: node.text,
      closable: true,        
      autoLoad:
      {
         url: 'ViewportWithGrid.aspx?id=' + node.attributes.href,
         mode: 'iframe'
      }
  });
  tabPanel.setActiveTab(tab);
  tabPanel.doLayout();
}

I seem to have 2 major bottlenecks in Firefox & Chrome (Basically Webkit/Gecko based browsers, I recon)

1. Upon Loading the page the first time, Coolite images load in parts, the nodes in the tree load, and after that the node icons, which looks very laggy and slome. This is not the case in IE8 & Opera 10... I do register the node icons in the Page_Load section:

if (!Ext.IsAjaxRequest && !IsPostBack)
{
... // ScriptManager init etc
scriptManager.RegisterIcon(Icon.Folder);
... // Building the viewport etc
}

2. When clicking on a node, it takes 4 to 5 seconds to load the viewport and another 1 to 3 seconds to load the grid. This is all instant in IE & Opera (Ironic, cause Firefox is suppose to handle Iframes better and faster than IE).

I'm quit desperate atm, since I seem to be the only one having performance issues in Firefox (normally, it is the other way around with ExtJS). Is it cause I programmatically create everything in code-behind? I do not want to use Loadmasks every second, as performance (speed of the application) is the most important for me. I'd like to accomplish the same effect as when I browse the app in IE8 & Opera 10.

Thank you in advance for looking into this problem.

[Vladimir]

Hi,

I am not sure whats wrong because FireFox is faster than IE. Do you have the same issue with examples.ext.net? Examples Explorer uses the same structure: tree with dynamic tabs in the center region

[Ciaro]

The Examples Explorer works fine in both Firefox & IE.

I kinda compared my code with it, as I was thinking the same thing (same structure). It is strange, cause my app isn't that big yet (vs the Example Explorer).

The only big difference I could think of, is that I create everything in code-behind, programmatically. I dunno if I point in the right direction right now, tho. If you require more details, I could always mail you some codesnippets or post here some generic implementation examples.

[Ciaro]

I'm going to port my code to markup and see if the problems are still there... I'll keep you updated.

[Ciaro]

It was a long shot anyway. It's the initial load that worries me. Maybe I need to look into preloading?

[geoffrey.mcgill]

Does this sluggishness only happen on your local development machine? Sometimes I find the icons load slowly on my dev machine, but once deployed, everything is snappy.

Disabling Firebug on Firefox should also help speed things up.


Hope this helps.

[Ciaro]

Well, basicly, a couple of ExtJS gfx load after the page is rendered (it seems). Maybe I can preload them so everything looks more streamlined?

I have disabled all addons in Firefox. When Firefox closes, all my browser history, cookies etc is deleted. This is to test the initial loadtime of my webprojects. If I would enable cache and history, when I reopen the app, the treePanel works like in IE. (the slow loading of the gridPanel is still an issue, alltho after opening a couple of gridpanels, it goes a bit faster).

Indead, I'm currently testing it on my dev server. I will try to build my project, and test it on my local IIS, and we are planning to add a test vps soon.

Thank you (both) again, for your time.

Edit: Gonne compile and run on local IIS, hold on :)

[Ciaro]

Does this sluggishness only happen on your local development machine? Sometimes I find the icons load slowly on my dev machine, but once deployed, everything is snappy.

Your a freaking genious :D

I thought local dev server ought to be faster. But with the compiled version, and on my localhost the app runs superfast in both IE & Firefox! God, I feel so stupid now ^^ (Do mind I'm coming from PHP :p)

[geoffrey.mcgill]

I don't really know for sure why the local dev server (cassini?) has these issues. I suspect it has something to do with connection limitations. On an initial uncached page_load there can be a lot of connections sent out if you include the css images and icons.

That's just a theory. At some point I'd like to figure out where exactly the bottleneck is happening.