How to add multiple child Dijit Widget to a LayoutContainer efficiently?

Question

I have the basic scenario on a Dojo 1.9 + Dijit web application:

1. Request JSON data over the network
2. On the the successful reply I parse the JSON data and save to the application model
3. The UI watches the model and when there's data, it creates new Custom dijit/_WidgetBase instances to show the data.
4. Every Custom Dijit Widget is inserted to a dijit/layout/LayoutContainer via myLayoutContainer.addChild(customWidget);

Everything works fine but I would like to improve the rendering performance. I noticed that dijit/layout/LayoutContainer is a dijit/_Container and has its own addChild() which uses dojo/dom-construct.place() which changes the DOM directly.

So I guess I could save some milliseconds if I add all my customWidget instances to a Document Fragment and then add it to the LayoutContainer with just one call to addChild().

But dijit/_Container.addChild requires a widget of type dijit/_WidgetBase so the Document Fragment approach wouldn't work.

How could I achieve my goal?

Answer 1

You could create a single "container" widget which contains all the logic to create the child widgets and attach it to itself. Then only add the single "parent" widget to the LayoutContainer. If you wanted to do even less you could just use a ContentPane as the "container" widget.

var contentPane = new ContentPane();
//multiple times
contentPane.addChild(...)
/layoutContainer in the page flow
layoutContainer.addChild(contentPane);

I can't comment as to how this would change performance though.