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

**wsi** · 12 Oct 2010 7:45 AM

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?

**jsakalos** · 12 Oct 2010 10:38 AM

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.

**wsi** · 14 Oct 2010 11:24 AM

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.

**jsakalos** · 14 Oct 2010 11:28 AM

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

**jay@moduscreate.com** · 14 Oct 2010 11:35 AM

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

**wsi** · 14 Oct 2010 12:10 PM

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>

**jay@moduscreate.com** · 14 Oct 2010 12:13 PM

**jay@moduscreate.com** · 14 Oct 2010 12:14 PM

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

nm i get it.

**VinylFox** · 14 Oct 2010 12:20 PM

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(response, opts){
        makeRequest();
    };
    
    var failure_handler =  function(){
        makeRequest();
    };
    
    function makeRequest(){
            
            Ext.Ajax.request({
                   url: 'router.php',
                   success: success_handler,
                   failure: failure_handler,
                   params: { 
                    foo: 'bar' 
                   }
            });
    }

    makeRequest();

**jay@moduscreate.com** · 14 Oct 2010 12:23 PM

Thx Shea.

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

).

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

Thread Tools

Search Thread

Display

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

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

Similar Threads

[OPEN-1001] Memory leak on buttons inside a window

[OPEN][3.x] Floating Menu memory Leak - Ext.Shadows are never destroyed

Partial solution to memory leak by ajax

[2.2] Ext.QuickTips + ASP.NET AJAX = IE Memory Leak?

Ext.QuickTips + ASP.NET AJAX = IE Memory Leak?

Tags for this Thread