Hybrid View

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    59
    Vote Rating
    3
    wsi is on a distinguished road

      0  

    Default [OPEN-1331] Extjs.Ajax (3.2.2) Leak

    [OPEN-1331] Extjs.Ajax (3.2.2) Leak


    ExtJs version: 3.2.2

    Overview:

    I have a Javascript file that sends an AJAX request out to a server which hosts a PHP script that returns a random number. The returned AJAX value is written to a text field in a form and then the same request is sent to the server again. This process continues indefinitely.

    Issue: Web browser Memory usage is constantly increasing.

    Test results:

    Oct 8, 2010 at 4:03PM memory usage reported by Windows Task Manager

    FF: 27 016K
    Chrome: 15 616K
    IE 8: 26 368K


    Oct 12, 2010 at 8:36AM memory usage reported by Windows Task Manager

    FF: 64 220K
    Chrome: 49 304K
    IE 8: 47 268K


    As of recording the 8:36AM, memory usage has increased slightly.


    Tested Browsers: IE 8.0.7600.16385, Chrome 6.0.472.63, Firefox 3.6.10


    PHP source code:
    Code:
    <?php
        
        sleep(1);
        echo "response ".time();
        
    ?>
    HTML + JAVASCRIPT source:

    Code:
    <html>
    
    <head>
    
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/> 
        <script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script>
        <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    
    </head>
    
    <body>
            
    <script type="text/javascript">
    
    Ext.onReady(function(){
                    
        var simple = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            url:'save-form.php',
            frame:true,
            title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},
            defaultType: 'textfield',
    
            items: [
                {
                    id: 'response_field',
                    fieldLabel: 'response',
                    name: 'response'
                }
            ]
        });
        
        simple.render(document.body);
        
        
        
        function makeRequest(){
                
                Ext.Ajax.request({
                       url: 'router.php',
                       success: function(response, opts){
                               
                               Ext.getCmp('response_field').setValue(response.responseText);
                               makeRequest();
                                  
                       },
                       failure: function(){
                               makeRequest();
                       },
                       params: { 
                        foo: 'bar' 
                       }
                });
        
        }
    
        makeRequest();
         
    
    });                
    
    
    
    </script>
    
    
    </body>
    </html>
    Comment:

    Is this a leak in the framework or is there something I can do to prevent the browser memory usage from constantly increasing?
    Last edited by wsi; 12 Oct 2010 at 8:57 AM. Reason: Spelt the title wrong. Changed title from Extj.Ajax to Extjs.Ajax

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,536
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Only one thing comes to my mind:

    Try to not define failure and success functions inline - remove them to vars. If it doesn't help I can move this thread to bugs for the devel team to investigate the matter.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    59
    Vote Rating
    3
    wsi is on a distinguished road

      0  

    Default


    I modified the javascript to not use inline failure and success functions. The modified code is:

    Code:
    <html>
    
    <head>
    
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/> 
        <script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script>
        <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    
    </head>
    
    <body>
            
    
    <script type="text/javascript">
    
    Ext.onReady(function(){
                    
        var simple = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            url:'save-form.php',
            frame:true,
            title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},
            defaultType: 'textfield',
    
            items: [
                {
                    id: 'response_field',
                    fieldLabel: 'response',
                    name: 'response'
                }
            ]
        });
        
        simple.render(document.body);
        
        var success_handler = function(response, opts){
            Ext.getCmp('response_field').setValue(response.responseText);
            makeRequest();
        };
        
        var failure_handler =  function(){
               makeRequest();
        };
        
        
        function makeRequest(){
                
                Ext.Ajax.request({
                       url: 'router.php',
                       success: success_handler,
                       failure: failure_handler,
                       params: { 
                        foo: 'bar' 
                       }
                });
        }
    
        makeRequest();
    
    });                
    
    
    
    </script>
    
    
    </body>
    </html>
    The test results are as follows


    Oct 13, 2010 @ 2:49PM

    chrome: 33 656K

    ff: 43 092K

    ie 8: 40 598K


    ----------------------------


    Oct 13, 2010 @ 4:44PM

    chrome: 42 708K

    ff: 58, 552K

    IE 8: 40, 596K


    ----------------------------

    Oct 14, 2010 @ 1:15PM

    Chrome: 55 192K

    FF: 62 664K

    IE 8: 45 132K


    The leak still exists.

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,536
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    OK, moving this thread to bugs for the devel team to fix/comment/explain.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #5
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    to be honest, your test case is flawed. You should *NOT* be rendering items to the DOM when testing utilities such as Ext.Ajax.

  6. #6
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    59
    Vote Rating
    3
    wsi is on a distinguished road

      0  

    Default


    I am a little confused about your comment; can you direct me to the line of code that renders items to the DOM? I am making a guess that you are referring to the line.

    Code:
    Ext.getCmp('response_field').setValue(response.responseText);
    If that line is causing the issue, would the following modification fix the issue?

    Code:
    <html>
    
    <head>
    
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/> 
        <script type="text/javascript" src="extjs/adapter/ext/ext-base-debug.js"></script>
        <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
    
    </head>
    
    <body>
            
    <script type="text/javascript">
    
    Ext.onReady(function(){
                    
        var single_text_field = new Ext.form.TextField({
              fieldLabel: 'response',
              name: 'response'
        });                
                        
        var simple = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            frame:true,
            title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},
            defaultType: 'textfield',
            items: [
                single_text_field
            ]
        });
        
        simple.render(document.body);
        
        var success_handler = function(response, opts){
            single_text_field.setValue(response.responseText);
            makeRequest();
        };
        
        var failure_handler =  function(){
               makeRequest();
        };
        
        
        function makeRequest(){
                
                Ext.Ajax.request({
                       url: 'router.php',
                       success: success_handler,
                       failure: failure_handler,
                       params: { 
                          foo: 'bar' 
                       }
                });
        }
    
        makeRequest();
    
    });                
    
    
    
    </script>
    
    
    </body>
    </html>

  7. #7
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Quote Originally Posted by jsakalos View Post
    He only sets value - I would expect that that cannot/shouldn't cause the leak.
    DOM manipulation is one of the leading causes of memory leaks, IMHO. each browser acts differently.

  8. #8
    Sencha User
    Join Date
    Jun 2009
    Posts
    750
    Vote Rating
    0
    meroy is on a distinguished road

      0  

    Default


    This has been entered into Trac. Thanks!

  9. #9
    Ext JS Premium Member
    Join Date
    Sep 2009
    Posts
    59
    Vote Rating
    3
    wsi is on a distinguished road

      0  

    Default


    Thank you, what is Trac?

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Trac is the issue tracker used internally by the Sencha team.

Similar Threads

  1. [OPEN-1001] Memory leak on buttons inside a window
    By VT-TizianoF in forum Ext 3.x: Bugs
    Replies: 2
    Last Post: 14 Oct 2010, 11:37 PM
  2. Replies: 14
    Last Post: 9 Dec 2009, 9:40 AM
  3. Partial solution to memory leak by ajax
    By sean.zhou in forum Community Discussion
    Replies: 4
    Last Post: 18 Nov 2008, 9:35 AM
  4. [2.2] Ext.QuickTips + ASP.NET AJAX = IE Memory Leak?
    By SeiginoRaikou in forum Ext 2.x: Bugs
    Replies: 14
    Last Post: 23 Sep 2008, 12:40 PM
  5. Ext.QuickTips + ASP.NET AJAX = IE Memory Leak?
    By SeiginoRaikou in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 15 Sep 2008, 9:19 PM

Thread Participants: 7

Tags for this Thread