Optimisation des applications Windows 8/HTML5/WinJS

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 / WinJSThomas LEBRUN / Jonathan ANTOINE

Consultantstlebrun@infinitesquare.com / jantoine@infinitesquare.com

Infinite Square

Code / Développement

#APP402

INFINITE SQUARE STAND 44 ESPACE WINDOWS 8 & EXPÉRIENCES NUMÉRIQUES

GOLD Certified Partnersur 4 domaines de compétences.

Agréé CIR.

Centre de formation agréé.

Infinite Square aux TechDays 2013

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.

Code / Développement

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

Agenda

Code / Développement

• 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

Rappels de bonnes pratiques

• 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

Rappels de bonnes pratiques (2)

demoAU TRAVAIL LES TRAVAILLEURS !

Code / Développement

Code / Développement

• 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

JavaScript & Profiling

Code / Développement

function Alpha(){

Beta();}function Beta(){

}

JavaScript & Profiling (2)

30 ms

50 ms

50 50

30 80

demoTROP D’APPELS TUENT L’APPEL

Code / Développement

Code / Développement

• Performance Analyzer– Installé avec Visual Studio ou le SDK Windows 8– Génère un rapport mesurant 13 points de performances

Analyse 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

demoQU’EST-CE-QUI VA PAS ?

Code / Développement

Code / Développement

• 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

Détection de fuites mémoire

Code / Développement

• 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)

Détection de fuites mémoire (2)

Code / Développement

• 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

Détection de fuites mémoire (3)

demoA BAS LES « MEMORY LEAKS » !

Code / Développement

demoOPTIMISATION DE LA LISTVIEW

Une ListView peut contenir des

Code / Développement

• 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

Conclusions

Merci !Code / Développement

Formez-vous en ligne

Retrouvez nos évènements

Faites-vous accompagner gratuitement

Essayer gratuitement nos solutions IT

Retrouver nos experts Microsoft

Pros de l’ITDéveloppeurs

www.microsoftvirtualacademy.com

http://aka.ms/generation-app

http://aka.ms/evenements-developpeurs

http://aka.ms/itcamps-france

Les accélérateursWindows Azure, Windows Phone,

Windows 8

http://aka.ms/telechargements

La Dev’Team sur MSDNhttp://aka.ms/devteam

L’IT Team sur TechNethttp://aka.ms/itteam

Code / Développement