Comment profiler et obtenir des performances Javascript
Duplicate possible:
Quel est le meilleur moyen de profiler l'exécution de javascript?
J'ai quelques scripts qui utilisent jQuery et je pense avoir une fuite de mémoire dans l'un d'eux.
Comment pourrait-on profiler et trouver quelles parties des scripts que j'ai utilisent le plus de mémoire/CPU?
Concernant la consommation de mémoire
Les fuites de mémoire dans JavaScript sont généralement ignorées, sauf lorsqu'elles se transforment en fuites de mémoire dans le navigateur (c'est-à-dire, même après que l'utilisateur a quitté la page, la mémoire reste allouée et il n'y a aucun moyen de la libérer). La raison en est que, même si votre application Web présente parfois des fuites de mémoire, les utilisateurs passent d’une page à l’autre, ce qui permet de minimiser les fuites. Cependant, ils peuvent ne pas redémarrer le navigateur. Par conséquent, les fuites de mémoire du navigateur peuvent être graves. Certains codes JavaScript sont connus pour causer des fuites de mémoire sur certains navigateurs, Internet Explorer étant probablement le pire dans ce domaine. Pour cela, vous pouvez trouver Détecteur de fuite de mémoire Microsoft JavaScript très utile.
En ce qui concerne les temps
IE, Chrome et Safari ont intégré des profileurs dans les outils de développement Web fournis avec le navigateur. Pour Firefox, vous pouvez utiliser Firebug. Cela peut aussi être utile, car vous utilisez jQuery, ce qui signifie que votre rapport de profilage sera rempli de fonctions anonymes, ce qui le rendrait tout à fait illisible, le plugin jQuery profiling de John Resig , qui vous donnera un résultat plus clair sur le sujet. .
Utilisez Firebug . Pour citer de http://getfirebug.com/js.html :
Pour utiliser le profileur, allez simplement à l'onglet Console et cliquez sur le bouton "Profil". Ensuite, utilisez votre application un peu ou rechargez la page, puis cliquez à nouveau sur le bouton "Profil". Vous verrez ensuite un rapport détaillé indiquant quelles fonctions ont été appelées et combien de temps chacune a pris.
Je suggérerais de jeter un coup d'œil au profileur dans Firebug et au plug-in Drip pour IE afin de vous aider à rechercher des fuites de mémoire.
N'oubliez pas non plus que la plupart des fuites de mémoire javascript proviennent de références circulaires entre objets DOM et que les objets javascript ne sont pas interrompus lors du déchargement de l'objet DOM. Pour éviter cela, je suggérerais d'éviter de créer des références aux objets javascript dans les propriétés d'objet DOM (c'est-à-dire d'éviter quelque chose comme document.getElementById('foo').bar = myObject;). Si vous devez créer ces références circulaires, veillez à les séparer vous-même dans une fonction qui s'exécute lors du déchargement de la page ou lors de la suppression des objets DOM avant le déchargement.
Google Chrome a également des options de profil
Bien que chrome possède des options de profilage intégrées, il ne donne pas d'informations précises sur l'objet. Je préfère donc utiliser l'outil leak-Finder-for-javascript qui m'a aidé à intégrer mon code.
https://code.google.com/p/leak-Finder-for-javascript/
J'espère que ça aide.
Un autre moyen simple de tester un morceau de code spécifique consiste à ajouter une minuterie autour de celui-ci.
var testStart = new Date();
// code to be tested here
$('#jstest').html("selected function: "+ (new Date() - testStart) + " milliseconds");
Où jstest est un élément span visible quelque part sur votre page.
Firebug ou Page Speed pour Firefox de Google ont des outils de profilage.
Ce message de John Resig (jQuery) peut être utile pour détecter les fuites de mémoire dans IE: