Opened 14 years ago

Last modified 13 years ago

#6524 closed defect is slow for dialogs with many nested elements — at Initial Version

Reported by: guest Owned by:
Priority: high Milestone: 1.2
Component: Dijit Version: 1.1.0
Keywords: Cc:
Blocked By: Blocking:


Problem Description: The new feature of dijit.Dialog that focuses the first focusable element on the dialog performs poor in cases where the dialog contains a large set of nested HTML elements. In our case, we have a dialog that has two selectboxes with a couple (~>100 + ~>350) of <option> elements. takes about 2.5 seconds on our machine (P4 2.6GhZ, FF 2.0.13) in this case. One could argue that we should use dynamic reloadable dropdown boxes instead but this is currently not possible due to other constraints. However, I see some room for improvements in the current dijit code which could solve our problem. I put a timestamp debug log statement into the show() method of the dijit.Dialog to measure possible performance improvements. Here are my results.

1.Without improvement: 2384.2 ms (FF2), 4143.8ms (IE6) (average of 5 tries)

  1. Changed dijit._DialogMixin._getFocusItems to call dijit._getTabNavigable directly instead of calling it implicitely twice due to the

calls to getFirstInTabbingOrder/getLastInTabbingOrder:

_getFocusItems: function(/*Node*/ dialogNode){

find focusable Items each time a dialog is opened

var elems = dijit._getTabNavigable(dojo.byId(dialogNode)); var focusItem = dijit.getFirstInTabbingOrder(dialogNode); var focusItem = elems.lowest ? elems.lowest : elems.first; this._firstFocusItem = focusItem ? focusItem : dialogNode; focusItem = dijit.getLastInTabbingOrder(dialogNode); focusItem = elems.last ? elems.last : elems.highest; this._lastFocusItem = focusItem ? focusItem : this._firstFocusItem; if(dojo.isMoz && this._firstFocusItem.tagName.toLowerCase() == "input" && dojo.attr(this._firstFocusItem, "type").toLowerCase() == "file"){

FF doesn't behave well when first element is input type=file, set first focusable to dialog container dojo.attr(dialogNode, "tabindex", "0"); this._firstFocusItem = dialogNode;



Result: 1502.8 ms (FF2), 2559.6 ms (IE6) (average of 5 tries)

  1. additionally change dijit._getTabNavigable to explicitely exclude "SELECT" children from recursive walkTree() calls

simply changing: if(isShown){ walkTree(child) }


if(isShown && child.nodeName.toUpperCase() != 'SELECT'){ walkTree(child) }

Result: 669 ms (FF2), 549.8 ms (IE6) (average of 5 tries)

So the question is: could this changes be incorporated into dijit or is did I oversee something which makes this impossible. Speaking for our project, we cannot live without this improvement and will stick to the custom hacked code until an officially improved release.

Regards, Philipp

PS: I am attaching the changed dijit classes hoping this makes your life a bit easier...

Change History (1)

Changed 14 years ago by guest

complete changes to classes

Note: See TracTickets for help on using tickets.