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,537
    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,537
    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



  8. #8
    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


    Also, how are you testing this? Are you refreshing the page?! If so, you're doing it wrong (again).

    nm i get it.

  9. #9
    Sencha - Community Support Team VinylFox's Avatar
    Join Date
    Mar 2007
    Location
    Baltimore, MD
    Posts
    1,501
    Vote Rating
    8
    VinylFox will become famous soon enough VinylFox will become famous soon enough

      0  

    Default


    Simply put, Jay is saying that your example has both a Form and the Ajax request, so there is no way to know which is causing the memory leak.

    Might be the form, field, layout, getCmp, setValue, etc, etc, etc.

    Just make it simpler and test again. ie:

    PHP Code:
        var success_handler = function(responseopts){
            
    makeRequest();
        };
        
        var 
    failure_handler =  function(){
            
    makeRequest();
        };
        
        function 
    makeRequest(){
                
                
    Ext.Ajax.request({
                       
    url'router.php',
                       
    successsuccess_handler,
                       
    failurefailure_handler,
                       
    params: { 
                        
    foo'bar' 
                       
    }
                });
        }

        
    makeRequest(); 

  10. #10
    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


    Thx Shea.

    I'm bouncing around a lot today (too much to do ++ too much caffeine ).

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