Ext

rafael.rech · #1 07-04-2008, 10:32 AM

Hi,

We are working in a single page app. i. e., there is only one page load in the application and further navigation just make an ajax request and put the result in a div.
In some pages the are some combos the get loaded with a lot of records and when these pages are loaded, memory usage by FF increases in 3 MB. Then I navigate to another page but this 3 MB are never released again. Is there any technique I should use to release this memory use? Any kind of garbage collection?

Thanks,
Rafael.

rafael.rech · #2 07-04-2008, 03:20 PM

Any help?

jgarcia@tdg-i.com · #3 07-04-2008, 04:07 PM

Fx is known to be a memory hog. Add any debugging tools AND/OR addons and you're going to have issues.

Starfall · #4 07-06-2008, 03:47 AM

Are you using FF2 or FF3? The latter seem to behave much better with memory usage.

rafael.rech · #5 07-07-2008, 08:27 AM

khepri · #6 07-07-2008, 08:34 AM

what's the request and reply of your ajax messages?

rafael.rech · #7 07-07-2008, 09:34 AM

Hi,
I make a request to a Struts2 action. This action sends me back an HTML page with a JS in the head portion. This JS has all my Ext code. Then I clear my the content div in my page and replace it with the HTML page returned from Ajax call. Then I eval the new JS file to load its code in memory and I try do remove old screen's JS from memory.

Here is my main page, the page returned from Ajax call and a sample of screen's ext JS.

Main page (content.jsp)

<head>
	<link rel="stylesheet" type="text/css" href="extJS/resources/css/ext-all.css">
	<link rel="stylesheet" type="text/css" href="extJS/resources/css/xtheme-gray.css">
	<link rel="stylesheet" type="text/css" href="css/zaffari.css">

	<!-- EXT LIBS -->
	<script type="text/javascript" src="extJS/ext-base.js"></script>
	<script type="text/javascript" src="extJS/ext-all-debug.js"></script>
	<script type="text/javascript" src="extJS/ext-lang-pt_br.js"></script>
	<!-- DWR LIBS -->
	<script type="text/javascript" src="dwr/engine.js"></script>
	<script type="text/javascript" src="dwr/util.js"></script>
	<script type="text/javascript" src="dwr/interface/ResourceBundleUtils.js"></script>
	<script type="text/javascript" src="dwr/interface/WebRemotingUtils.js"></script>
	<script type="text/javascript" src="dwr/interface/DWRAction.js"></script>
	<script type="text/javascript" src="js/dwr/DWRActionUtil.js"></script>
	<!-- ZAFFARI LIBS -->
	<script type="text/javascript" src="/siz/js/util/crypto.js"></script>
	<script type="text/javascript" src="js/util/fwk-utils.js"></script>
	<script type="text/javascript" src="js/util/zaffari-navigation.js"></script>
	<script type="text/javascript" src="js/util/zaffari-form.js"></script>
	<script type="text/javascript" src="js/util/zaffari-grid.js"></script>

	<meta http-equiv="ZAFFARI" content="NO-CACHE">
	<script id="screenScript" src="http://localhost:8080/siz/js/ndas04.js" type="text/javascript"></script>
</head>

<body class="ext-gecko" id="ext-gen7">

	<div id="divOuterScreen">
		<!-- HERE GOES THE EACH PAGE'S CONTENT -->
	</div>

	<script>
		// Variables to treat memory usage
		var inMemoryObjects = new Array();
		var screenNewObjects = new Array();
			
		var lastInitComponents = function() { };
		
		var screen2open;
		/**
		 * Make the Ajax call to screen action (struts2)
		 */
		var openScreen = function(screen, params) {
			screen2open = screen;
			Ext.Ajax.request({
				url : screen2open + '.action',
				success : openScreenCallback
			});
		}

		/**
		 * Callback for page loading
		 */    
		var openScreenCallback = function(data) {

			// Deletes from the page previous screen
			var mydiv = $('divOuterScreen');
			clearScreenMemoryUse(mydiv);

			// Loads new screen in content div
			mydiv.innerHTML = data.responseText;

			// Go through all SCRIPT elements returned in responseText and eval them
			// If SCRIPT element has src property, it is screen's Ext script, then
			// inserts it in the HEAD and delete the previous screen's Ext script from there
			var scripts = mydiv.getElementsByTagName('script');
			var bigScript = '';
			for (var i = 0; i < scripts.length; i++) {
				if (scripts[i].text != '') {
					bigScript += '\n/* */\n' + scripts[i].text;
				} else {
					if (scripts[i].src != '') {
						// Creates new SCRIPT element
						var fref = document.createElement('script');
						fref.setAttribute('type', 'text/javascript');
						fref.setAttribute('src', scripts[i].src);
						fref.setAttribute('id', 'screenScript');

						// Search for SCRIPT entries in the page to remove old screen's entries
						var scr = document.getElementsByTagName('script');
						var found = false;
						for (var idx = scr.length - 1; idx >= 0; idx--) {
							if (scr[idx]
									&& scr[idx].getAttribute('src') != null
									&& scr[idx].getAttribute('id') != null
									&& scr[idx].getAttribute('id')
											.indexOf('screenScript') == 0) {
								// Purge all non used elements from old screen
								...
								// Remove SCRIPT entry
								scr[idx].parentNode.removeChild(scr[idx]);
							}
						}
						// Put new SCRIPT element in HEAD
						document.getElementsByTagName('head')[0].appendChild(fref);
					} // end-if(scripts[i].src != '')
				}
			}
			if (window.execScript) {
				// IE
				window.execScript(bigScript);
			} else {
				// FF
				window.eval(bigScript);
			}
			// Init screen
			tempInitScreen();
		}
		
		/**
		 * Waits until initScreen is loaded
		 */
		var tempInitScreen = function tempInitScreen(tries) {
			var idx = !tries ? 0 : tries;
			if (typeof(initScreen) == 'undefined') {
				if (tries < 5) {
					setTimeout(function() {
						tempInitScreen(tries+1);
					}, 50);
				}
				return;
			}
			initScreen();
		}
		
		// map Fn keys
		mapFunctionKeys();
		// Open login page
		openScreen('ndas13');
	</script>
    
</body>

Code returned from ajax call
[HTML]
<html>
<head>
<title>Ndaa30 - Coordenadores</title>

<script type="text/javascript" src="js/util/zaffari-toolbar.js"></script>

<script src='js/ndaa30.js'></script>

<script>

function initTela() {
if(typeof(initComponents)=='undefined' || (!POPUP_WIN && initComponents == lastInitComponents)) {
setTimeout(function() { initTela(); }, 50);
return;
}
lastInitComponents = initComponents;
useLoadingMessage();

initComponents(31);
showDivConteudo();
if (!this.navBackCounter || this.navBackCounter == null) {
limpar();
}
if(POPUP_WIN) {
var func = window.onunload ? window.onunload : function(){};
window.onunload = func.createInterceptor(callbackFecharJanela, window);
}
initOpBtns();
loadNewObjectsList();
}
</script>
</head>
<body>



...

<form action="dummy" method="POST" id="usuario_form" class="x-form" >
<input type='hidden' name="ativo" id="ativo" value="true" />
</form>

<form action="dummy" method="POST" id="form_dados" class="x-form" >
<input type='hidden' name='orderColumns' />
<input type='hidden' name='orderColumn' />
<input type='hidden' name='orderDirection' />
<input type='hidden' name='pageNumber' />
<input type='hidden' name='pageSize' />
<input type='hidden' id='positionRecordId' name='positionRecordId' value ="1" />

<fieldset class="x-fieldset" style=" ">
<legend class="x-fieldset-header x-fieldset-header-noborder x-unselectable" style="-moz-user-select: none;">
<span class="x-fieldset-header-text">Dados do coordenador</span>
</legend>
<input type='hidden' name="id" id="id" value="" />
<div class="x-panel x-column x-panel-noborder x-form-label-left" style="width: 720; min-height: 26px; height: auto;" >
<div class="x-form-item" style="">
<label class="x-form-item-label" style="width: 110;">Usu

rafael.rech · #8 07-07-2008, 09:59 AM

You guys may think I

devnull · #9 07-07-2008, 11:39 AM

i think that pattern is going to cause memory issues...
if i understand you correctly, you are basically reloading ext and all your javascript each time you change something in the application? yet you arent redirecting to a new page, you are replacing the content in a div?
as far as i know, there is no way to remove javascript from memory once loaded without navigating to a new page entirely, and it sounds like you are loading new copies of all the scripts with every request.
load the ui once, and then only make requests for data, thats the best way to do it.

rafael.rech · #10 07-07-2008, 03:20 PM

what you mean as load the ui once? each screen is totally different...
when people say they have a single page app, what do they mean?

as far as reloading ext each time, the answer is no. i

Ext

Ext JS

Ext GWT

Ext Core

Support Subscriptions

Training

Community

Ext Solutions

Ext JS

Ext GWT

Help