Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    359
    Vote Rating
    16
    rich02818 will become famous soon enough

      0  

    Default v4 performance very slow with very simple page

    v4 performance very slow with very simple page


    From Ed's recent comments, it sounds like a problem in rendering involving many components has been identified in v4 and is being resolved. However, there may be more going on as this test has only a viewport with a center region only and in IE8 is 4.5x slower in Extjs 4.0.4 than in 3.4.0.

    The code is loaded and reloaded several times. The times measured within the test case are:

    IE8.0.7.601.17514: v3.4.0 takes 4ms, v4.0.4 takes 22ms

    Firefox 3.6.18: v3.4.0 takes 10ms, v4.0.4 takes 21ms

    chrome 12.0.742.122: v3.4.0 takes 3ms, v4.0.4 takes 9ms

    IE9.0.8112.16421: v3.4.0 8ms, v4.0.4 28ms

    (note: first 3 done on a faster machine than the IE9 measurement)

    The v3.4.0 test code:
    Code:
    <html>
    <head>
    <title>Performance Test</title>
      <link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" /> 
    
        <script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base-debug.js"></script>
        <script type="text/javascript" src="ext-3.4.0/ext-all-debug.js"></script>
        <script type="text/javascript" src="../shared/examples.js"></script>
      
        <script type="text/javascript">
          Ext.onReady(function () {
    
          var date = new Date();
          
        
    
          var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
              new Ext.Panel({
                region: 'center', // a center region is ALWAYS required for border layout
                title: 'version 3 performance info',
                id: 'center'
              })]
          });
        
    
          var viewportTime = new Date() - date;
    
          var performance = Ext.getCmp('center');
          var performanceInfo = '<br>Create Viewport: ' + viewportTime + ' ms<br>';
          performance.body.update(performanceInfo);    
          });
      </script>
    </head>
    <body>
    </body>
    </html>
    v4.0.4 test code:
    Code:
    <html>
    <head>
    <title>Performance Test</title>
    <link rel="stylesheet" type="text/css" href="ext-4.0.4/resources/css/ext-all.css" />
      <script type="text/javascript" src="ext-4.0.4/ext-all-debug.js"></script>
      <script type="text/javascript">
    
        Ext.onReady(function() {
    
        date = new Date();
    
        var viewport = Ext.create('Ext.Viewport', {
            id: 'border-example',
            layout: 'border',
            items: [
            Ext.create('Ext.Panel', {
              region: 'center', // a center region is ALWAYS required for border layout
              title: 'version 4 performance info',
              id: 'center',
              deferredRender: false
            })]
        });
    
        var viewportTime = new Date() - date;
        
        var performance = Ext.getCmp('center');
        var performanceInfo = '<br>Create Viewport: ' + viewportTime + ' ms<br>';
        performance.body.update(performanceInfo);    
      });
    </script>
    </head>
    <body>
    </body>
    </html>
    Can this simple test be run against the current developmental 4.1.0 version and the times posted?
    Last edited by rich02818; 20 Jul 2011 at 1:34 PM. Reason: added IE9 info

  2. #2
    Touch Premium Member
    Join Date
    Nov 2010
    Location
    Chicago
    Posts
    1,325
    Vote Rating
    114
    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  

  3. #3
    Sencha User ykey's Avatar
    Join Date
    Mar 2010
    Location
    USA
    Posts
    245
    Vote Rating
    27
    ykey has a spectacular aura about ykey has a spectacular aura about

      0  

    Default


    Probably just takes the browser a few more ms to parse and load due to a slightly larger library in 4.0.

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    359
    Vote Rating
    16
    rich02818 will become famous soon enough

      0  

    Default


    I appreciate the info, but I'm familiar with timing variations on a multitasking machine and OS. That's why I ran many times and throughout the occasional "too large" result. It's a real problem that is quite repeatable on multiple machines. And just for the record the IE8 numbers were created on a core i7 2.67GHz with 12GB RAM, Win7 64-bit

    Quote Originally Posted by LesJ View Post

  5. #5
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    359
    Vote Rating
    16
    rich02818 will become famous soon enough

      0  

    Default


    Ok, some were concerned with the small times measured. So I updated the test case to put 5 text fields into the single panel in the viewport.

    v4.0.4 takes 5x as long as v3.4.0

    IE8:
    v3.4.0 12ms
    v4.0.4 61ms

    Chrome 12:
    v3.4.0 7ms
    v4.0.4 21ms

    FF 3.6.18:
    v3.4.0 24ms
    v4.0.4 54ms

    Comparing to the original test case with no fields, this implies that on IE8:
    v3 each field takes 1.6ms
    v4 each field takes 7.8ms

    Remember that v3 was much slower than v2 and v4 claims to be much faster than v3 to resolve this issue. Taking 7.8ms to render a single field on a very fast machine is *way too slow* for use with a complex app containing many tabs, each with many fields. Actually v3 was too slow for very complex apps.

    v3 test case:
    Code:
    <html>
    <head>
    <title>Performance Test</title>
      <link rel="stylesheet" type="text/css" href="ext-3.4.0/resources/css/ext-all.css" /> 
    
        <script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base-debug.js"></script>
        <script type="text/javascript" src="ext-3.4.0/ext-all-debug.js"></script>
        <script type="text/javascript" src="../shared/examples.js"></script>
      
        <script type="text/javascript">
          Ext.onReady(function () {
    
          var itemNumber = 0;
          var createItems = function() {
              var items = [];
              for (var i = 0; i < 5; i++) {
                  items.push({
                      xtype: 'textfield',
                      fieldLabel: 'Text ' + itemNumber++
                  });
              }
              return items;
          };
        
          var date = new Date();
          
          var viewport = new Ext.Viewport({
            layout: 'border',
            items: [
              new Ext.Panel({
                region: 'center', // a center region is ALWAYS required for border layout
                title: 'version 3 performance info',
                id: 'center',
                layout: 'form',
                items: createItems()
              })]
          });
        
    
          var viewportTime = new Date() - date;
    
          var performance = Ext.getCmp('center');
          var performanceInfo = 'V3.4.0 Create Viewport: ' + viewportTime + ' ms';
          performance.setTitle(performanceInfo);    
          });
      </script>
    </head>
    <body>
    </body>
    </html>
    v4 test case:
    Code:
    <html>
    <head>
    <title>Performance Test</title>
    <link rel="stylesheet" type="text/css" href="ext-4.0.4/resources/css/ext-all.css" />
      <script type="text/javascript" src="ext-4.0.4/ext-all-debug.js"></script>
      <script type="text/javascript">
    
        Ext.onReady(function() {
    
          var itemNumber = 0;
          var createItems = function() {
              var items = [];
              for (var i = 0; i < 5; i++) {
                  items.push({
                      xtype: 'textfield',
                      fieldLabel: 'Text ' + itemNumber++
                  });
              }
              return items;
          };
    
        date = new Date();
    
        var viewport = Ext.create('Ext.Viewport', {
            id: 'border-example',
            layout: 'border',
            items: [
              Ext.create('Ext.Panel', {
                region: 'center', // a center region is ALWAYS required for border layout
                title: 'version 4 performance info',
                id: 'center',
                items: createItems(),
                deferredRender: false
            })]
        });
    
        var viewportTime = new Date() - date;
        
        var performance = Ext.getCmp('center');
        var performanceInfo = 'V4.0.4 Create Viewport: ' + viewportTime + ' ms';
        performance.setTitle(performanceInfo);    
      });
    </script>
    </head>
    <body>
    </body>
    </html>
    Last edited by rich02818; 21 Jul 2011 at 5:43 PM. Reason: added info

  6. #6
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    We have a great candidate solution for this problem, which is expected to be effective on all pages large or small
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  7. #7
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    359
    Vote Rating
    16
    rich02818 will become famous soon enough

      0  

    Default


    That's great news. I'd be happy to test it with the several test cases that I have here. Just let me know.

  8. #8
    Sencha - Community Support Team edspencer's Avatar
    Join Date
    Jan 2009
    Location
    Palo Alto, California
    Posts
    1,939
    Vote Rating
    9
    edspencer is a jewel in the rough edspencer is a jewel in the rough edspencer is a jewel in the rough

      0  

    Default


    Sure thing. We'll be shipping a beta of course for this reason
    Ext JS Senior Software Architect
    Personal Blog: http://edspencer.net
    Twitter: http://twitter.com/edspencer
    Github: http://github.com/edspencer

  9. #9
    Touch Premium Member
    Join Date
    Mar 2008
    Posts
    5
    Vote Rating
    0
    awfreeman is on a distinguished road

      0  

    Default


    Quote Originally Posted by edspencer View Post
    Sure thing. We'll be shipping a beta of course for this reason
    Can't wait to try it!

  10. #10
    Ext JS Premium Member
    Join Date
    Apr 2008
    Posts
    359
    Vote Rating
    16
    rich02818 will become famous soon enough

      0  

    Default


    I updated and reran the test code above. v4 still too slow:
    Code:
             v3.4.1.1                     v4.2.1.744-beta
    
    IE10        27ms                             93ms
    
    Chrome27    12ms                             38ms
    
    FireFox21   20ms                             35ms