Dans cette session, vous découvrirez comment analyser et résoudre les problèmes de performance de vos applications Windows 8 développées en HTML 5 / JavaScript, en utilisant les outils de profiling mis à disposition dans Visual Studio. Vous découvrez ainsi comment rendre vos applications « Fast & Fluid » pour le plaisir de vos utilisateurs.

1. Donnez votre avis !
Depuis votre smartphone, sur :
http://notes.mstechdays.fr
De nombreux lots à gagner toutes les heures !!!
Claviers, souris et jeux Microsoft…
Merci de nous aider à améliorer les TechDays
http://notes.mstechdays.fr

2. Optimisation des
applications Windows 8 /
HTML 5 / WinJS
Thomas LEBRUN / Jonathan ANTOINE
Consultants
tlebrun@infinitesquare.com / jantoine@infinitesquare.com
Infinite Square
#APP402
Code / Développement

3. INFINITE SQUARE
STAND 44 ESPACE WINDOWS 8 & EXPÉRIENCES NUMÉRIQUES
 Société de conseil, d’expertise, de réalisation et de formation exclusivement sur les technologies
de développement d’applications et la plateforme applicative Microsoft.
 30 collaborateurs spécialisés sur les techno MS, dont 10 MVP.
 GOLD Certified Partner
sur 4 domaines de compétences.
 Agréé CIR.
 Centre de formation agréé.
Infinite Square aux TechDays 2013

4. Agenda
• Rappels de bonnes pratiques
• JavaScript & Profiling
• Analyse de performances
• Détection de fuites mémoire
• Optimisation de la ListView
• Conclusions
Code / Développement

5. Rappels de bonnes pratiques
• Ne pas bloquer le thread UI !
– Phénomène de « freeze »
– Pas de délai de plus de 100ms
• Analyser fréquemment la mémoire de votre
application
– Permet des optimisations régulières de code
Code / Développement

6. Rappels de bonnes pratiques (2)
• Pas de traitements asynchrones en
JavaScript
• Utiliser des Web Worker !
– 1 worker = 1 thread Windows
• Communication via chaîne de caractères ou
objet JSON

7. AU TRAVAIL LES TRAVAILLEURS
!
Code / Développement

8. JavaScript & Profiling
• Visual Studio JavaScript Profiler
– Enregistre le temps d’exécution de chaque méthodes
– Enregistre le nombre exact d’appels de chaque
méthodes
• De quoi parle-t-on ?
– Exclusive Time: Temps d’exécution de la méthode sans
ses enfants
– Inclusive Time: Temps d’exécution de la méthode avec
ses enfants
Code / Développement

9. JavaScript & Profiling (2)
function Alpha()
{
30 ms
Beta();
}
function Beta()
{
50 ms
}
Code / Développement

10. TROP D’APPELS TUENT
L’APPEL
Code / Développement

11. Analyse de performances
• Performance Analyzer
– Installé avec Visual Studio ou le SDK Windows 8
– Génère un rapport mesurant 13 points de performances
Activation Time Memory leaks
UI responsiveness Idle State CPU usage
Layout passes Successful suspend
Synchronous XHR on UI thread Memory reduction when suspended
Image scaling App memory growth
Memory footprint Runtime broker memory growth
Runtime broker memory reference set
Code / Développement

12. QU’EST-CE-QUI VA PAS ?
Code / Développement

13. Détection de fuites mémoire
• JavaScript Memory Profiler
• Identification de la mémoire
involontairement retenue
– Utilisation de « Snapshots »
• Affiche le nombre et la taille
– D’éléments DOM
– D’objets JavaScript
Code / Développement

14. Détection de fuites mémoire (2)
• De quoi parle-t-on (encore ?!):
– Size: Taille de l’objet en mémoire
– Retained Size: Quantité de mémoire qui pourrait être
collectée par le Garbage Collector (GC) si toutes les
références sur l’objet sont supprimées:
• Inclut la taille de l’objet
• Inclut la taille de tous les objets référencés (et leurs
références)
Code / Développement

15. Détection de fuites mémoire (3)
• Possibilité de prendre des « snapshots » par
programmation:
– Idéal pour capturer un moment précis
• console.takeHeapSnapshot
– Capture un « snapshot » et l’affichage dans le profiler
• console.profileMark
– Affiche un marqueur dans le profiler
Code / Développement

16. A BAS LES « MEMORY LEAKS » !
Code / Développement

17. OPTIMISATION DE LA LISTVIEW
Une ListView peut contenir des

18. Conclusions
• Installer l’Update 1 de Visual Studio 2012
– Vous profiterez de tous les outils d’analyse de
performances
• Ne sous-estimer pas l’importance de ces
outils
– Ils vous permettront d’identifier des bugs « vicieux »
(cas rencontré récemment )
– Utiliser les régulièrement sur votre application
Code / Développement

19. Code / Développement

20. Développeurs Pros de l’IT
http://aka.ms/generation-app Formez-vous en ligne www.microsoftvirtualacademy.com
http://aka.ms/evenements-
developpeurs Retrouvez nos évènements http://aka.ms/itcamps-france
Les accélérateurs
Faites-vous accompagner
Windows Azure, Windows Phone,
gratuitement
Windows 8
Essayer gratuitement nos http://aka.ms/telechargements
solutions IT
La Dev’Team sur MSDN Retrouver nos experts L’IT Team sur TechNet
http://aka.ms/devteam Microsoft http://aka.ms/itteam
Code / Développement