Share
Lorsque vous travaillez sur du code JavaScript avancé, tel qu'un moteur 3D, vous pouvez vous demander ce que vous pouvez faire pour optimiser et combien de temps vous devriez consacrer à certains éléments de code spécifiques. Dans ce tutoriel, je partagerai plusieurs outils qui donneront un aperçu de la performance de votre code et vous montreront comment tirer le meilleur parti des marques utilisateur dans le graphique mémoire pour analyser vos performances..
Vous ne pouvez pas attendre de voir en quoi consiste ce tutoriel? Regarde cette video:
Ne hésitez pas à me cingler sur Twitter (@deltakosh) si vous voulez discuter de cet article!
Un profileur qui me vient à l’esprit est le profileur intégré que vous pouvez utiliser avec les nouvelles mises à jour des améliorations apportées aux outils de développement pour Internet Explorer F12 qui seront également disponibles pour Microsoft Edge. Bien sûr, vous pouvez utiliser tous les outils similaires que vous préférez sur votre boîte de dev.
Si vous souhaitez essayer ceci sur Android, iOS ou Mac OS, vous pouvez également utiliser remote.IE pour obtenir une instance de la prévisualisation technique de Windows 10 en quelques minutes. Ensuite, ouvrez Internet Explorer «e» que vous avez évité (il s’agit d’un shell client temporaire sur lequel le nouveau moteur de rendu de Project Spartan est configuré), cliquez sur F12 et maintenant vous pouvez voir ce que je vais vous montrer:
Veuillez noter qu'avec les nouveaux outils F12 fournis avec l'aperçu technique de Windows 10, le profileur fait désormais partie de la fenêtre de réactivité de l'interface utilisateur:
Voyons d'autres options pouvant vous donner plus d'informations sur les performances de votre code..
Il suffit d'appeler console.time () et console.timeEnd () autour du morceau de code que vous souhaitez évaluer. Le résultat est une chaîne dans votre console affichant le temps écoulé entre temps et timeEnd.
Ceci est assez basique et peut être facilement imité, mais j’ai trouvé cette fonction très simple à utiliser.
Encore plus intéressant, vous pouvez spécifier une chaîne pour obtenir une étiquette pour votre mesure.
C'est par exemple ce que j'ai fait pour Babylon.js:
Accentsconagua
console.time ("évaluation des maillages actifs"); this._evaluateActiveMeshes (); console.timeEnd ("Évaluation des maillages actifs");Ce type de code peut être trouvé autour de toutes les fonctionnalités principales et ensuite, lorsque la journalisation des performances est activée, vous pouvez obtenir de très bonnes informations:
Soyez averti que le rendu du texte dans la console peut consommer beaucoup de puissance de la part du processeur.
Même si cette fonction n’est pas en soi une fonction standard, la compatibilité du navigateur est très bonne. Chrome, Firefox, IE, Opera et Safari le supportent.
Si vous voulez quelque chose de plus visuel, vous pouvez également utiliser l'objet de performance. Parmi les autres fonctionnalités intéressantes pour vous aider à mesurer les performances d'une page Web, vous pouvez trouver une fonction appelée marque qui peut émettre une marque d'utilisateur.
Une marque d'utilisateur est l'association d'un nom avec une valeur temporelle. Vous pouvez mesurer des portions de code avec cette API afin d'obtenir des valeurs précises. Vous pouvez également trouver un excellent article sur cette API par Aurelio de Rosa sur SitePoint.
L'idée aujourd'hui est d'utiliser cette API pour visualiser des marques d'utilisateur spécifiques sur l'écran de réactivité de l'interface utilisateur:
Cet outil vous permet de capturer une session et d’analyser l’utilisation de la CPU:
Nous pouvons ensuite zoomer sur un cadre spécifique en sélectionnant une entrée appelée Rappel de trame d'animation et en faisant un clic droit dessus pour sélectionner filtrer à l'événement.
Le cadre sélectionné sera filtré puis:
Grâce au nouvel outil F12, vous pouvez ensuite basculer vers des piles d’appels JavaScript pour obtenir plus de détails sur ce qui s’est passé lors de cet événement:
Le principal problème ici est qu’il n’est pas facile de comprendre comment le code est envoyé pendant l’événement..
Et c’est là que les marques des utilisateurs entrent en jeu. Nous pouvons ajouter notre propre Marqueurs et ensuite être capable de décomposer un cadre et voir quelle fonctionnalité est la plus chère et ainsi de suite.
performance.mark ("Début de quelque chose… tout à l'heure!");De plus, lorsque vous créez votre propre framework, il est très pratique de pouvoir instrumenter votre code avec des mesures:
performance.mark ("évaluation des maillages actifs-début"); this._evaluateActiveMeshes (); performance.mark ("Active meshes evaluation-End"); performance.measure ("Évaluation des maillages actifs", "Évaluation des maillages actifs-Début", "Évaluation des maillages actifs-Fin");Voyons ce que vous pouvez obtenir avec Babylon.js, par exemple, avec "V8" scène:
Vous pouvez demander à Babylon.js d’émettre des marques d’utilisateur et des mesures en utilisant Couche de débogage:
Ensuite, à l'aide de l'analyseur de réactivité de l'interface utilisateur, vous pouvez obtenir cet écran:
Vous pouvez voir que les marques utilisateur sont affichées au-dessus de l'événement lui-même (les triangles orange), ainsi que des segments pour chaque mesure:
Il est alors très facile de déterminer que, par exemple, les phases [Cibles de rendu] et [Rendu principal] sont les plus chères..
Le code complet utilisé par Babylon.jspermettre aux utilisateurs de mesurer les performances de diverses fonctionnalités est la suivante:
Tools._StartUserMark = function (counterName, condition) if (typeof condition === "undefined") condition = true; if (! condition ||! Tools._performance.mark) return; Tools._performance.mark (counterName + "-Begin"); ; Tools._EndUserMark = function (counterName, condition) if (typeof condition === "undefined") condition = true; if (! condition ||! Tools._performance.mark) return; Tools._performance.mark (counterName + "-End"); Tools._performance.measure (counterName, counterName + "-Begin", counterName + "-End"); ; Tools._StartPerformanceConsole = function (counterName, condition) if (typeof condition === "undefined") condition = true; if (! condition) return; Tools._StartUserMark (counterName, condition); if (console.time) console.time (counterName); ; Tools._EndPerformanceConsole = function (counterName, condition) if (typeof condition === "non défini") condition = true; if (! condition) return; Tools._EndUserMark (counterName, condition); if (console.time) console.timeEnd (counterName); ;
Grâce aux outils F12 et aux marques utilisateur, vous pouvez maintenant obtenir un excellent tableau de bord sur la façon dont différentes parties de votre code fonctionnent ensemble..
Cela vous surprendra peut-être un peu, mais Microsoft a beaucoup à apprendre gratuitement sur de nombreux sujets JavaScript open source et nous avons pour mission de créer beaucoup plus avec Microsoft Edge. Découvrez moi-même:
Ou la série d'apprentissage de notre équipe:
Et quelques outils gratuits: Communauté Visual Studio, Azure Trial et outils de test multi-navigateurs pour Mac, Linux ou Windows..
Cet article fait partie de la série Web de développement Web de Microsoft. Nous sommes ravis de partager Microsoft Edge et le nouveau Moteur de rendu EdgeHTML avec toi. Obtenez des machines virtuelles gratuites ou testez à distance sur votre appareil Mac, iOS, Android ou Windows @ http://dev.modern.ie/.
