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

Printable View

Show 40 post(s) from this thread on one page

12 Oct 2010, 7:45 AM
wsi

[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?
12 Oct 2010, 10:38 AM
jsakalos

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.
14 Oct 2010, 11:24 AM
wsi

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.
14 Oct 2010, 11:28 AM
jsakalos

OK, moving this thread to bugs for the devel team to fix/comment/explain.
14 Oct 2010, 11:35 AM
jay@moduscreate.com

to be honest, your test case is flawed. You should *NOT* be rendering items to the DOM when testing utilities such as Ext.Ajax.
14 Oct 2010, 12:10 PM
wsi

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>
14 Oct 2010, 12:13 PM
jay@moduscreate.com

http://tdg-i.com/img/screencasts/2010-10-14_1613.png
14 Oct 2010, 12:14 PM
jay@moduscreate.com

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

nm i get it.
14 Oct 2010, 12:20 PM
VinylFox

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();
14 Oct 2010, 12:23 PM
jay@moduscreate.com

Thx Shea.

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

Show 40 post(s) from this thread on one page