Opened 11 years ago

Closed 11 years ago

Last modified 11 years ago

#11635 closed enhancement (fixed)

Apply CSS classes earlier in Dijit to avoid page reflows

Reported by: Shane O'Sullivan Owned by: bill
Priority: high Milestone: 1.6
Component: Dijit Version: 1.5
Keywords: Cc:
Blocked By: Blocking:


A number of places in Dijit apply CSS classes to their domNode in the postCreate() method, based on some attribute values. At this point the node is already in the document, which causes a page redraw in IE6 and IE7.

These CSS classes should be added earlier in the process, before the domNode is inserted into the document, in order to avoid this extra processing.

Change History (5)

comment:1 Changed 11 years ago by bill

(In [22773]) Refactor TitlePane so set("open", ...) is main interface to open/close, rather than toggle(). This also moves the CSS code (including _setCss() call) from postCreate() into _setOpenAttr() thus doing no CSS changes in postCreate(). Refs #10839, #11635 !strict.

comment:2 Changed 11 years ago by bill

Resolution: fixed
Status: newclosed

(In [22778]) Move code to set classes, styles, innerHTML and other DOM manipulation (like setting aria roles) out of postCreate() and into either buildRendering() (for constants), or to _set*Attr() methods (for values affected by changes to widget attributes).

This fixes #11635 although there can still be improvements by changing programmatic code like setWaiRole() calls into attributeMap entries.


comment:3 Changed 11 years ago by bill

(In [22815]) Move setSelectable() calls into buildRendering(). I tested this and it works everywhere, even though on IE setSelectable() calls dojo.query(). Apparently because dojo.query("*", node) doesn't call any browser built in functions but rather just traverses the DOM.

In the future (to simplify server side rendering) it might make sense to declare selectability in the template, like data-dojo-selectable="false", rather than calling it from buildRendering().

Refs #11635 !strict.

comment:4 Changed 11 years ago by bill

(In [22929]) Fix setting of dijitSelectFixedWidth class on table node. Regression from [22778] which was messing up formatting of "Test three" in test_Select.html. Refs #11635 !strict.

comment:5 Changed 11 years ago by bill

(In [23228]) Use watch() in _CssStateMixin rather than connecting to set(); it's a bit simpler and faster.

Also, for performance reasons, move initial class setting code to occur before widget DOM is added to the document.

Refs #11251, #11635 !strict.

Note: See TracTickets for help on using tickets.