Bonjour,

J'utilise de plus en plus Ajax dans mes applications Web et il m'arrive souvent lorsque je travaille longtemps sans rafraîchir la page de recevoir un avertissement de la part de Chrome disant que le processus commence à utiliser trop de mémoire. Peu de temps après, mon application devient lente et instable.

J'ignore cependant ce qu'il faudrait que je fasse pour libérer la mémoire utilisée par les requêtes Ajax. Voici le code d'une page PHP qui permet d'expérimenter mon problème :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?php
if(isset($_POST["octets"])) {
	echo str_pad("", $_POST["octets"], 0);
	exit;
}
?>
<html>
	<head>
		<script type="text/javascript">
			function load_data(octets) {
				var xmlHttp = GetXmlHttpObject();
				if(xmlHttp == null) return false;
				else {
					method = "POST";
					target = window.location.href.substring(window.location.href.lastIndexOf("/")+1,window.location.href.length) + "?sid="+Math.random();
					asynchronous = true;
					xmlHttp.onreadystatechange = function() {
						if(xmlHttp.readyState == 4) {
							var el = document.createElement('div');
							el.setAttribute('data', xmlHttp.responseText);
							document.body.appendChild(el);
							el.style.border = "2px solid #0000FF";
							el.style.width = "250px";
							el.style.height = "25px";
							el.innerHtml = octets;
							el.onclick = function(e) { document.body.removeChild(this); delete this; };
							delete(xmlHttp);
							delete el;
						};
					}
					xmlHttp.open(method,target,asynchronous);
					xmlHttp.setRequestHeader('Cache-Control', 'no-cache');
					xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=ISO-8859-15');
					xmlHttp.send("octets="+octets);
				}
			}
			function GetXmlHttpObject(){
				var objXMLHttp = null;
				if (window.XMLHttpRequest){
					try { objXMLHttp = new XMLHttpRequest(); }
					catch(e) { objXMLHttp = false; }
				}
				else {
					if(window.createRequest) {
						try { objXMLHttp = new window.createRequest(); }
						catch(e) { objXMLHttp = false; }
					}
					else {
						if(window.ActiveXObject) {
							try { objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP"); }
							catch(e) {
								try { objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); }
								catch(e) { objXMLHttp = false; }
							}
						}
					}
				}
				return objXMLHttp;
			}
		</script>
	</head>
	<body>
		<input type="button" value="1 Mo" style="width:150px; float:left;" onclick="load_data(1048576);" /><br /><br />
	</body>
</html>
Remarquez que chaque click sur le bouton appelle au chargement de 1Mo (approx.) de données via Ajax. Dans Windows 7 32 bit, j'utilise le gestionnaire de tâche pour suivre l'utilisation mémoire du processus chrome.exe et cette valeur croit beaucoup à chaque fois que j'appuie sur le bouton. La quantité de mémoire utilisée ne redescend pas vraiment, pas même lorsque je clique sur les rectangles bleu sensés contenir les données chargées pour les retirer du document. Rafraîchir la page semble réduire l'utilisation de mémoire mais ne ramène pas cette donnée à sa valeur initiale.

Comment puis-je faire pour libérer toute la mémoire correctement suite à mes requêtes Ajax?

EDIT : Mise à jour de l'extrait de code incluant des tentatives de libérer l'espace occupé par les variables.