Trouver la fuite de Javascript dans Chrome

Question

Je fais beaucoup d'appels ajax sur mon site et utilisais jQuery 1.4.2 jusqu'à ce que je remarque qu'il fuyait. Il fuyait avec IE, Firefox et Chrome. Après une enquête, j'ai trouvé le correctif IE pour cela. Je l'ai essayé mais il ne l'a pas résolu pour l'un des trois navigateurs. J'ai ensuite trouvé un post sur ici où la personne a comparé la bibliothèque Javascript de Yahoo à jQuery. Yahoo n'a pas de fuite pour cette personne. Je suis passé à Yahoo et cela a arrêté la fuite dans IE et Firefox (j'ai même utilisé l'addon de Firefox). Mais Chrome fuit toujours. Chrome génère environ 200 Mo de mémoire, puis plante mon onglet. L'appel ajax est à chaque seconde. Il faut environ une heure avant que l'onglet se bloque. Si je quitte la page, la mémoire est libérée. Encore une fois, IE et Firefox le problème est maintenant disparu.

Quelle est la meilleure façon de déterminer où le problème est pour Chrome? J'ai cherché un add-on mais n'en ai pas encore trouvé. J'ai aussi fait des recherches sur Google mais je n'y ai pas vraiment trouvé quelque chose. J'ai pris des snapshots de tas mais je vois juste de gros nombres à côté de (closure) et (code).

J'ai aimé le Firefox One (Leak Monitor), il est facile de voir le problème. Quelque chose comme ça pour Chrome ou des suggestions pour trouver la fuite?

Answer 1

Le cadre ne cause pas la fuite, c'est votre code. Laissez-moi deviner à quoi ressemble votre code.

$.get('//url/',function(){ 
    //lets do fun stuff! 
    function(){ 
    //more fun expensive stuff for the browser to do 
    } 
}; 

//A more efficient way (doesn't create closures) 
function expensivefn(){ 
    //Do expensive stuff here 
} 
$.get('//url',expensivefn); 

Ceci est seulement une façon possible que votre code pourrait être inefficace. Je ne crée généralement pas de pages qui bouclent à l'infini, habituellement je cherche un certain laps de temps puis demande à l'utilisateur s'il veut toujours interroger. La boucle que vous utilisez pourrait créer des fermetures inutiles, tout comme l'exemple ci-dessus. Par exemple,

//Bad! 
setInterval(function(){ 
    //Expensive stuff 
}, 1000) 

//Good 
function expensivestuff(){ 
    //Expensive stuff 
} 
setInterval(expensivestuff,1000); 

Answer 2

Utilisez Profiler Chrome Heap intégré dans DevTools (appuyez sur F12 dans Chrome puis passez à l'onglet Profils):

vous pouvez trouver ici comment tester:

link