Diagnosing performance and memory issues in JavaScript-based Windows Store AppsAndrew HallProgram Manager II3-008

The performance of an app will determine whether customers are willing to continue

using your app, so make it great

Good Performance PracticesVisual Studio Profiler BasicsHTML5 Performance AnalyzerJavaScript Memory Profiler Basics

Agenda

Good performance practicesBe responsive, don’t block the UI thread• Users notice delays of more than 100ms• Break up longer operations or use web workers

Monitor your app’s memory use• The smaller your footprint the less likely the OS

will terminate your app while suspended

Tune your apps performance regularly

Visual Studio JavaScript profilerInstrumentation-based profiling• Records how long every method takes to execute• Records exact counts of method calls

Only shows JavaScript execution time• Does not show work done by other systems (e.g., rendering or layout)

Profiler terminologyInclusive time: The total amount of time from when the function was entered until the function exited• Includes the total time spent in all child functions

Exclusive time: The amount of time spent executing code in just the function body• Does NOT include time spent in child functions

function Alpha()

{

Beta();

}

function Beta()

{

}

Inclusive and exclusive time

30 ms

50 ms

Exclusive Inclusive

Alpha

Beta 50 50

30 80

Demo

Performance Analyzer for HTML5 AppsWalks you through testing your applicationGenerates a report measuring 13 tenets of performanceInstalls with the SDKActivation time Memory leaks

UI responsiveness Idle state CPU usage

Layout passes Successful suspend

Synchronous XMLHttpRequest on UI thread

Memory reduction when suspended

Image scaling App memory growth

Memory footprint Runtime broker memory growth

Runtime broker memory reference set

Demo

JavaScript Memory ProfilerIdentify unintentionally retained memoryand inefficient use of memorySnapshot-based toolShows JavaScript and DOM elements• Size• Counts• Reference graph

Memory terminologySize: How large the object is in memoryRetained Size: The amount of memory that the object is preventing the garbage collector from reclaiming• Includes the size of the object• Includes the size of all referenced objects (and any objects they

reference) that the current object is the only parent of in the memory graph

Size and retained size

Size Retained Size

Object A

Object B

Object C

Object D

500 KB 500 KB

100 KB 600 KB

Object A (100 KB)

Object B (500 KB)

Object C (50 KB)

Object D (100 KB)

50 KB

100 KB

50 KB

100 KB

Object A (100 KB)

Object B (500 KB)

600 KB

Demo

SummaryInstall the Visual Studio Quarterly Update #1Use the tools you already have to improvethe performance of your app• Visual Studio JavaScript Profiler• Visual Studio JavaScript Memory Profiler• HTML5 Performance Analyzer

Questions?

Related Sessions[4-000] Building High-Performing JavaScript for Modern Engines[3-014] Modern JavaScript

Tools

• HTML5 Performance Analyzer: http://msdn.microsoft.com/en-us/library/windows/apps/jj553524.aspx

• Visual Studio Profiler: http://msdn.microsoft.com/en-us/windows/apps/hh696637.aspx

• JavaScript Memory Analyzer: http://msdn.microsoft.com/en-us/library/windows/apps/jj819177.aspx

Performance Guidance

• http://msdn.microsoft.com/en-us/library/windows/apps/jj553524.aspx

• http://channel9.msdn.com/Events/Build/BUILD2011/APP-162T

Resources

Please submit session evals on the Build Windows 8 App or at http://aka.ms/BuildSessions

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.