Diagnosing performance and memory issues in JavaScript-based Windows Store Apps

1. Diagnosing performance and memory issues in JavaScript-based Windows Store Apps Andrew Hall Program Manager II 3-008

2. The performance of an app will determine whether customers are willing to continue using your app, so make it great

3. Agenda • Good Performance Practices • Visual Studio Profiler Basics • HTML5 Performance Analyzer • JavaScript Memory Profiler Basics

4. Good performance practices • Be 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

5. Visual Studio JavaScript profiler • Instrumentation-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)

6. Profiler terminology • Inclusive 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

7. Inclusive and exclusive time • function Alpha() • { • Beta(); • } • function Beta() • { • } 30 ms 80 30 50 50 50 ms

8. Demo

9. Performance Analyzer for HTML5 Apps • Walks you through testing your application • Generates a report measuring 13 tenets of performance • Installs with the SDK

10. Demo

11. JavaScript Memory Profiler • Identify unintentionally retained memoryand inefficient use of memory • Snapshot-based tool • Shows JavaScript and DOM elements • Size • Counts • Reference graph

12. Memory terminology • Size: How large the object is in memory • Retained 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

13. Size and retained size Object A (100 KB) Object C (50 KB) Object A (100 KB) Object D (100 KB) Object B (500 KB) Object B (500 KB) 600 KB 600 KB 100 KB 500 KB 500 KB 50 KB 50 KB 100 KB 100 KB

14. Demo

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

16. Questions?

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

18. Resources • 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 Please submit session evals on the Build Windows 8 App or at http://aka.ms/BuildSessions