Hello.
I am developing a single page application(SPA) with DHTMLX Suite 4.6.1 Pro.
The application involves loading and unloading of a same component many times without refreshing the entire page, so I am looking at the memory profile of the loading/unloading process extensively.
dhtmlxForm appears to have some memory release problem when unload() method is applied.
With the sample code below, I took memory heap snapshots as follows. (using both Chrome and IE11)
1st snapshot: before loading the form (baseline)
2nd snapshot: after loading the form
3rd snapshot: after unloading the form
… waiting for a while …
4th snapshot: without any change (for extra verification to see if the memory profile comes back to the baseline)
What I expect to see is that the 1st snapshot is same as the 3rd one. But the 3rd one shows more objects and memory allocated, and this does not change even in the 4th snapshot. I want to verifiy this problem. Thank you.
The following is the sample code used.
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
<script src="../../../codebase/dhtmlx.js"></script>
<script>
var myForm, formData;
function loadForm(){
formData = [
{type: "settings", position: "label-left", labelWidth: 130, inputWidth: 120},
{type: "fieldset", label: "Welcome", inputWidth: 340, list:[
{type: "radio", name: "type", label: "Already have account", labelWidth: "auto", position: "label-right", checked: true, list:[
{type: "input", label: "Login", value: "p_rossi"},
{type: "password", label: "Password", value: "123"},
{type: "checkbox", label: "Remember me", checked: true}
]},
{type: "radio", name: "type", label: "Not registered yet", labelWidth: "auto", position: "label-right", list:[
{type: "input", label: "Full Name", value: "Patricia D. Rossi"},
{type: "input", label: "E-mail Address", value: "p_rossi@example.com"},
{type: "input", label: "Login", value: "p_rossi"},
{type: "password", label: "Password", value: "123"},
{type: "password", label: "Confirm Password", value: "123"},
{type: "checkbox", label: "Subscribe on news"}
]},
{type: "radio", name: "type", label: "Guest login", labelWidth: "auto", position: "label-right", list:[
{type: "select", label: "Account type", options:[
{text: "Admin", value: "admin"},
{text: "Organiser", value: "org"},
{text: "Power User", value: "poweruser"},
{text: "User", value: "user"}
]},
{type: "checkbox", label: "Show logs window"}
]},
{type: "button", value: "Proceed"}
]}
];
myForm = new dhtmlXForm("myForm", formData);
}
function unloadForm(){
myForm.unload();
myForm = null;
formData = null;
}
</script>
</head>
<body>
<div id="myForm" style="height:550px;"></div>
<input type="button" value="Load Form" onclick="loadForm();">
<input type="button" value="Unload Form" onclick="unloadForm();">
</body>
</html>