C'est une sorte de suivi à une question que j'ai posté la semaine dernière: Simple jQuery Ajax call leaks memory in Internet ExplorerPourquoi jquery fuit-il si mal la mémoire?
J'adore la syntaxe jquery et toutes ses fonctionnalités intéressantes, mais j'ai eu des problèmes avec une page qui met à jour automatiquement la table cellules via des appels ajax fuite de mémoire. J'ai donc créé deux pages de test simples pour expérimenter. Les deux pages font un appel ajax toutes les .1 secondes. Après chaque appel ajax réussi, un compteur est incrémenté et le DOM est mis à jour. Le script s'arrête après 1000 cycles.
On utilise jquery pour l'appel ajax et pour mettre à jour le DOM. L'autre utilise l'API Yahoo pour l'ajax et fait un document.getElementById (...). InnerHTML pour mettre à jour le DOM.
La version de jquery manque de mémoire. Courant en goutte à goutte (sur XP Home avec IE7), il commence à 9 Mo et se termine à environ 48 Mo, avec une mémoire qui augmente linéairement tout le temps. Si je commente la ligne qui met à jour le DOM, il se termine toujours à 32 Mo, ce qui suggère que même les mises à jour DOM simples fuite d'une quantité importante de mémoire. La version non-jquery démarre et se termine à environ 9 Mo, qu'elle mette à jour le DOM.
Est-ce que quelqu'un a une bonne explication de ce qui cause une fuite si grave? Est-ce que je manque quelque chose d'évident? Y a-t-il une référence circulaire dont je ne suis pas au courant? Ou est-ce que jquery a juste de sérieux problèmes de mémoire?
Voici la source pour la version qui fuit (jquery):
<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.4.2');
</script>
<script type="text/javascript">
var counter = 0;
leakTest();
function leakTest() {
$.ajax({ url: '/html/delme.x',
type: 'GET',
success: incrementCounter
});
}
function incrementCounter(data) {
if (counter<1000) {
counter++;
$('#counter').text(counter);
setTimeout(leakTest,100);
}
else $('#counter').text('finished.');
}
</script>
</head>
<body>
<div>Why is memory usage going up?</div>
<div id="counter"></div>
</body>
</html>
Et voici la version non-leaky:
<html>
<head>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/connection/connection_core-min.js"></script>
<script type="text/javascript">
var counter = 0;
leakTest();
function leakTest() {
YAHOO.util.Connect.asyncRequest('GET',
'/html/delme.x',
{success:incrementCounter});
}
function incrementCounter(o) {
if (counter<1000) {
counter++;
document.getElementById('counter').innerHTML = counter;
setTimeout(leakTest,100);
}
else document.getElementById('counter').innerHTML = 'finished.'
}
</script>
</head>
<body>
<div>Memory usage is stable, right?</div>
<div id="counter"></div>
</body>
</html>
Quelle version de jquery utilisez-vous? –
Cela arrive-t-il dans Firefox? – SLaks
Ses extraits sont en cours de chargement 1.4.2 –