Slow menu rendering / responsiveness

[dngrmoose]

I am having a real tough time trying to figure out why my menus are taking a long time to allow interaction. It also seems to based on the first time a menu of a particular level is shown. For example, i have a toolbar where I have three menu buttons. Clicking on the first menu button yields a slow response, whereas the 2nd or 3rd is quite quick. If I then go a 2nd-level menu of any of the top-level menus, I get the same sluggishness.

Now, I should explain what I mean by slow. Basically, if I set the show delay to be 1ms, you would see the menu appear in the correct place, the cursor appears as "wait" and you cannot select any of the items in the menu for around a second.

The menus are being added to document.body.

Any ideas?

[BernardChhun]

do you have a sample page?

oh and what Ext version are using? and under what browser?

[dngrmoose]

I'll try to get one up. Running 1.1 stable, IE6.

[dngrmoose]

Appears to be the show() method in Ext.Element that is causing the problems. In the showAt() method, if I remove this.el.show() and just set the visibility of the menu inline, it is INSTANTLY available. There is also a minimal impact to memory. Put this.el.show() back in, you will see an much larger increase in memory usage and the wait cursor is shown.

I will submit a bug report about this, as I think this has major impacts to performance in IE6 across the board.



Ext.menu.Menu.prototype.showAt = function(xy, parentMenu, /* private: */_e)
{
this.parentMenu = parentMenu;
if(!this.el){
this.render();
}
if(_e !== false){
this.fireEvent("beforeshow", this);
xy = this.el.adjustForConstraints(xy);
}
this.el.setXY(xy);
//this.el.show();
this.el.dom.style.visibility = 'visible';
this.hidden = false;
this.focus();
this.fireEvent("show", this);
};

[dngrmoose]

UPDATE: Tracked down problem to Ext.Layer, and specifically, the creation of SHIMs. Seems that this is the bottleneck in IE6. You only see the slow down some of the time because the shims are created as needed -- e.g. three levels of a menu shown, then you need three shims..

[BernardChhun]

damn you're impressive dude :) keep at it!

[dngrmoose]

Thanks. Yeah, you just couldn't remove this.el.show(), as Ext.Layer ultimately overrides the setVisible() method (so the shim can be positioned). Oh well, worked it out in the end.

[treejanitor]

You need the shims to cover over <select> elements. I found that you do indeed get a tremendous increase in speed in removing them. However, I need mine, because I do have <select> elements that rise above them.

So... maybe there is a way to draw the menu off screen, size the shim asynchronously, and attach it to the correct DOM location/screen position as some kind of cached element. At least maybe the sizes can be calculated beforehand... I'm not sure. I just don't see any way around needing the actual shims.

I'll start walking the Ext.Layer.sync() code and see if what I find. I don't think it's a bug though, but maybe I'm missing something.

@dngrmoose
How did it work out in the end for you ?

[treejanitor]

It appears to me that the major cost of drawing the menu in IE 6 is the sizing of the rendered shim. I have mitigated some of that cost (non-submenus) in a simple way. After I create the menu, I do the following:


menu.getEl().getShim();
menu.getEl().hideShim();

This effectively gets and sizes the shims prior to menu usage. The shim is at that point instantiated and gets used when the menu is clicked upon.

I tested speed improvements with shadows and other configurable options, but found that the code that determine height/weight, left/top is the slowest bit and the other parts were not so significant.

I have yet to figure out how to do the submenus possibly because they work a little differently on activation (activate()). I'm sure it's possible with a similar technique although you need to find the right hook to get their shim out there and sizeable.