Why is the Container's add function faster with an Array with objects then with an Array with Sencha Touch objects

Question

I'm trying to figure out what is better to use when working with Sencha Touch 2 (speed wise). I already figured out that it makes virtually no difference if I initialize the components shown on the screen through Ext.create or {xtype:""}. But I how about if I where to add controls to a container like this:

containerPanel = Ext.create('Ext.Container', {
            id: 'appContgdfsainer',
            fullscreen: true,
            items: Ext.create('Ext.Button', {
                text: 'Button',
                listeners: {tap:function(){containerPanel.add(items)}}
            })

        });

Note that items is an Array containing either 1000 panels created with {html:"test", xtype:"panel"}; or with Ext.create("Ext.Panel",{html:"test"});
This gives me other results then I'd expect. What I expect is that the Ext.create will be faster because sencha only has to add the component which is already created using the Ext.create function. I'd expect the other possibility to be slower because sencha first has to create this object before it can be added.
Only the problem is, it isn't.
The {html:"test", xtype:"panel"}; is noticeably faster to load the panels then when I use Ext.create to add them.

Question:
How come that when adding panels to a container {html:"test", xtype:"panel"}; is faster then Ext.create

Answer 1

How are you determining faster?

I created a quick test on jsperf.com - and it showed that using Ext.create is faster.

Link: http://jsperf.com/st2-xtype-vs-create