Thank you for reporting this bug. We will make it our priority to review this report.
-
Ext JS Premium Member
[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
-
-
Ext JS Premium Member
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.
-
-
to be honest, your test case is flawed. You should *NOT* be rendering items to the DOM when testing utilities such as Ext.Ajax.
-
Ext JS Premium Member
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>
-
-
Also, how are you testing this? Are you refreshing the page?! If so, you're doing it wrong (again).
nm i get it.
-
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
#10
Thx Shea.
I'm bouncing around a lot today (too much to do ++ too much caffeine 
).
Reply With Quote
