Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    19
    Vote Rating
    0
    JoelB is on a distinguished road

      0  

    Default [4.1.0] Performance loss

    [4.1.0] Performance loss


    Hi,

    I did some tests on my project using Sencha Touch, ExtJs and Dijit performing the same task of placing 200 buttons on the page since I had noticed some performance issues:

    Sencha Touch (add)
    parent = mything;
    time = Date.now();
    for(i = 0; i<200; i++){
    b = new Ext.Button({text:"Button"+i});
    App.ui.page.IRendererMeta._ext.add(b);
    };
    Ext.onReady(function(){console.log(Date.now()-time);});

    136
    Sencha Touch (renderTo)parent = mything;
    time = Date.now();
    for(i = 0; i<200; i++){
    b = new Ext.Button({text:"Button"+i});
    b.renderTo(parent.AttachPoints.center);
    };
    Ext.onReady(function(){console.log(Date.now()-time);});

    1654
    ExtJs (add) (CHANGED)
    parent = mything;
    time = Date.now();
    for(i = 0; i<200; i++){
    b = new Ext.button.Button({text:"Button"+i});
    parent.add(b);
    };
    Ext.onReady(function(){console.log(Date.now()-time);});

    12101
    ExtJs (render)
    parent = mything;
    time = Date.now();
    for(i = 0; i<200; i++){
    b = new Ext.button.Button({text:"Button"+i});
    b.render(parent.AttachPoints.center);
    };
    Ext.onReady(function(){console.log(Date.now()-time);});

    974
    Dijit
    parent = mything;
    time = Date.now();
    for(i = 0; i<200; i++){
    b = new dijit.form.Button({label: "Button"+1});
    b.placeAt(parent.AttachPoints.center);
    };
    Ext.onReady(function(){console.log(Date.now()-time);});

    163

    So Ext took about 12 sec to draw 200 buttons while sencha touch did it in about 0.13 sec!

    If you want to try it you just have to replace parent with whatever objekt you want to add to.

    Also ExtJs had the nasty habit of increasing its time linearly as I added more buttons to the page (corresponding to the amount of elements on the page already), when Dijit and Sencha Touch (add) did not. Most of all Sencha Touch impressed alot when adding, the renderTo version didnt output the same thing and thus wasnt really comparable.

    Is this intended behavour for ExtJs to be both comparably mega slow and linearly slower as we add more to the page or is it a bug?
    Can I do something to improve the ExtJs performance when adding since its really affecting the UX of my app?

    Thankful for all help.
    Joel

  2. #2
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,299
    Vote Rating
    109
    LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light LesJ is a glorious beacon of light

      0  

    Default


    Do you have 200 buttons in your application?

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    19
    Vote Rating
    0
    JoelB is on a distinguished road

      0  

    Default


    Well ofc not.

    But its much easier to see the problem when its a bit blown up. I mean anything above 0.03s causes choppyness in animations and i would say that above 0.2 it is noticable and 12 is way above that. Even pushing out 20 buttons takes about 0.35s, and 40 takes 0.96. And 20-40 controls on a page really isnt all that difficult to figure out.

    And since sencha touch and dijit does way better its not really defendable.

    By the way, sencha touch makes 20 buttons in 0.017 and 40 in 0.033s.

    I also tried with: Ext.suspendLayouts()
    and manage to push 200 buttons down to about 0.5s which is a huge boost although still many times slower than the rest, and only applicable in special familiar cases.

    //Joel

  4. #4
    Ext JS Premium Member westy's Avatar
    Join Date
    Feb 2009
    Location
    Bath, UK
    Posts
    855
    Vote Rating
    38
    westy is a jewel in the rough westy is a jewel in the rough westy is a jewel in the rough

      0  

    Default


    Yeah, we spotted the same thing.

    Here's a post by a colleague of mine highlighting the issue.

    It seems to all be down to the button layout, and some pretty poor code in there. We found that you could use 'autocomponent' layout instead (the base of button) and get much better performance, and couldn't spot any visible differences, at least for our button instances.

    We haven't gone ahead and made the change to our codebase though, since were waiting for a response from the devs; that's not been forthcoming though...
    I'll bump it to get it back on the first page

    Cheers,
    Westy
    Product Architect
    Altus Ltd.

  5. #5
    Sencha User
    Join Date
    Mar 2011
    Posts
    19
    Vote Rating
    0
    JoelB is on a distinguished road

      0  

    Default


    The problem is that I see an issue with the other rendering speeds too using e.g. Ext.form.Text.

    parent = whateverComponent;


    time = Date.now();
    for(i = 0; i<200; i++){
    b = new Ext.form.Text();
    App.ui.page.IRendererMeta._ext.add(b);
    };


    Ext.onReady(function(){console.log(Date.now()-time);});


    9177

    Compared to sencha touchs speed:

    parent = whateverComponent;


    time = Date.now();
    for(i = 0; i<200; i++){
    b = new Ext.field.Text();
    App.ui.page.IRendererMeta._ext.add(b);
    };


    Ext.onReady(function(){console.log(Date.now()-time);});


    364

    Which is about 25 times faster doing this.

    And Dijit doing it in 211ms

    parent = whateverComponent;
    time = Date.now();
    for(i = 0; i<200; i++){
    b = new dijit.form.TextBox({label: "Button"+1});
    b.placeAt(parent.AttachPoints.center);
    };
    Ext.onReady(function(){console.log(Date.now()-time);});
    211

    Something is just not good enough with ExtJs rendering.

    //Joel

Thread Participants: 2