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

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

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

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

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

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

AU TRAVAIL LES TRAVAILLEURS
!
Code / Développement

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

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

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

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

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

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

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

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

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

OPTIMISATION DE LA LISTVIEW
Une ListView peut contenir des

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

Code / Développement

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