1 / 40

Building high performance Metro style apps using HTML5

APP-162T. Building high performance Metro style apps using HTML5. Mathias Jourdain Principal Development Lead Microsoft Corporation. Agenda. Understand how to improve your app launch Discover why and how to conserve system memory Learn how to keep your app responsive

norm
Download Presentation

Building high performance Metro style apps using HTML5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. APP-162T Building high performance Metro style apps using HTML5 Mathias Jourdain Principal Development Lead Microsoft Corporation

  2. Agenda • Understand how to improve your app launch • Discover why and how to conserve system memory • Learn how to keep your app responsive You’ll leave with examples of how to • Make the performance of good apps great • Measure the time your app took to launch and whether its UI ever became unresponsive

  3. HTML app platform Internet Explorer App container HTML host process TAB App code Web platform App code Webplatform Windowsruntime

  4. Tips & tricks that still work • For safe dynamic content, use innerHTML to create your DOM • Link CSS stylesheets at the top of the page, not at the bottom • Avoid inline JavaScript and inline CSS styles • Don’t parse JSON by hand, use JSON.parse • To hear more, view: [PLAT-386T] 50 performance tricks to make your Metro style apps and sites using HTML5 faster

  5. A Metro style app using HTML5is more than a web page …

  6. Make a great first impression, tune your app’s launch

  7. App launch Splash screen App visible Loading and parsing of HTML, JS, CSS Ready for user New host process Windows Runtime "activated" event "DOMContentLoaded" event Navigation Tile click

  8. Optimize your landing page • Rely on packaged content and local data • Use local images scaled to the right size • Use WinJS fragments to load parts of your app on demand • Defer parsing of unneeded HTML content • Delays JavaScript • Keeps your DOM small: look-up and manipulations are quicker

  9. Further optimizations • Defer some initialization to after the splash screen • Start network downloads after initialization • Delay loading databases • Consolidate small JS files that are related into larger files • If you need more time, use an extended splash screen

  10. Be lightweight, control your resource usage

  11. Process state transitions App is not notified when terminated App has 5s to work after suspend message suspending Running Suspended Terminated Low memory Applaunch resuming App is notified when resumed Splash screen Code runs No process Code runs No code runs

  12. demo Tile Puzzle Memory consumption

  13. Manage your resources • Keep a lightweight DOM • Release expensive content, such as media elements, as soon as they are no longer needed • Help the garbage collector • Avoid circular references between your elements and JavaScript code • Review how you use your Object URLs • On suspend, free resources that are easy to recreate • Use media content from the user at the screen resolution

  14. How to use athumbnail of an image • // Open File Picker • var picker = new Windows.Storage.Pickers.FileOpenPicker(); • picker.fileTypeFilter.replaceAll([".jpg", ".png"]); // Pick an image file picker.pickSingleFileAsync() .then(function (file) { varproperties = Windows.Storage.FileProperties.ThumbnailMode; return file.getThumbnailAsync(properties.singleItem, 1024); }) .then(function (thumb) { varimgTag = document.getElementById("imageTag"); imgTag.src = URL.createObjectURL(thumb, false); }); // Pick an image file picker.pickSingleFileAsync() .then(function (file) { varimgTag = document.getElementById("imageTag"); imgTag.src = URL.createObjectURL(file, false); });

  15. demo Tile Puzzle with a thumbnail Memory consumption Using the thumbnail APIs to obtain screen-size images

  16. The lighter you are, the less likely your app will be terminated while suspended. Consider the impact of your app on the system.

  17. Show you’re listening, process user inputs

  18. CPU activity UI thread 0s 1s 2s 3s Animation Launch User input

  19. Example of app execution JavaScript Compute layout User input events Update app logic Update view (DOM) Timers Callbacks Time on the UI thread

  20. Responsiveness pattern #1: use asynchronous APIs • Synchronous API calls that wait on a resource block the UI thread • Asynchronous APIs let your code continue to run while the OS processes your request in the background • Use asynchronous APIs whenever available UI thread UI thread

  21. How to make an asynchronous XHR call • varxhr = new XMLHttpRequest(); • xhr.onload= function(){ • // The request completed successfully • }; • xhr.onerror = function(){ • // The request failed with an error • }; • xhr.open("GET", “http://www.contoso.com/page.aspx", true); • xhr.send(null);

  22. How to pick afile asynchronously with a Promise • // Instantiate the file picker • var picker = new Windows.Storage.Pickers.FileOpenPicker(); • // Restrict the files shown to JPG and PNG images • picker.fileTypeFilter.replaceAll([".jpg", ".png"]); • // Launch the file picker, and execute one of the callbacks once the • // user has selected an image • picker.pickSingleFileAsync().then( • function(file) { • //code to execute when a file is picked • }, • function (error) { • //code to execute when an error occurs • } • );

  23. Responsiveness pattern #2: avoid time intensive calculations • Fast interactive touch apps react to users within 100 ms • Anything more, the user notices • Be careful of expensive operations on the UI thread…

  24. demo 5-in-a-Row Calculations on the UI thread impact responsiveness

  25. Break apart expensive work • Don’t run long operations on the UI thread • Timers and Intervals are inefficient • Do break up long operations with setImmediate UI thread UI thread UI thread

  26. Web Workers • Many devices have multiple cores that are underutilized • With Web Workers you can schedule work on a different thread • Offload main business logic to a Web Worker to keep the UI thread focused on UI UI Thread Worker Thread

  27. demo 5 in-a-row with a Web Worker Calculations on the UI thread impact responsiveness

  28. Responsiveness Pattern #3: avoid extra work • Most monitors update at 60 FPS, every 16.7 ms • Use requestAnimationFrame to only draw when needed UI thread UI thread

  29. Windows Animation Library • Consistent animations across apps are key to a great user experience • With CSS3 transitions and animations, you can avoid frequent and expensive re-layouts of your page and benefit from hardware tie-in • Use the Windows Animation Library to make your app feel built for Windows and get the perf of CSS3 • To hear more, view: [APP-206T] Bring apps to life with Metro style animations in HTML5

  30. Tools for building touch apps • App templates • Controls: ListView, AppBar, select control, etc. • Scrolling and zooming views • Gesture events • Pointer events • Gesture recognizers • To hear more, view: [APP-185T] Make great Metro style apps that are touch-optimized using HTML5

  31. Build lasting impressions, make performance a pillar of your app

  32. Summary • Tune your app launch time to create great first impressions • Keep your app alive by minimizing your memory footprint • Be responsive, don’t block the UI thread

  33. Related sessions • [APP-185T] Make great Metro style apps that are touch-optimized using HTML5 • [APP-206T] Bring apps to life with Metro style animations in HTML5 • [PLAT-376T] Building offline access in Metro style apps and websites using HTML5 • [PLAT-386T] 50 performance tricks to make your Metro style apps and sites using HTML5 faster • [APP-409T] Fundamentals of Metro style apps: how and when your app will run

  34. © 2011 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.

  35. Appendix

  36. Tool #1: how to calculate activation times • Windows.UI.WebUI.WebUIApplication.addEventListener("activated", onActivation, false); • function onActivation(e) { • // Snap when the activation event callback was called back • varnow = new Date().getTime(); • // Calculate the times between the various events • varpage_load_time = performance.timing.domContentLoadedEventStart - performance.timing.navigationStart; • varpage_activated_time = now - performance.timing.navigationStart; • // Update the DOM to reflect the times calculated • document.getElementById("domcontentloaded").innerText = page_load_time + "ms"; • document.getElementById("activation").innerText = page_activated_time + "ms"; • }

  37. Tool #2: how to detect UI delays • varlastUIDelayTime = 0; • varmaxUIDelayTime = 0; • function renderLoop() { • varnow = new Date().getTime(); • if (lastUIDelayTime != 0) { • varcurrentUIDelay = now - lastUIDelayTime; • if (currentUIDelay > maxUIDelayTime) { • maxUIDelayTime= currentUIDelay; • // Display the new maximum • document.getElementById("maxuidelay").innerText = maxUIDelayTime + " ms"; • } • } • // Remember the last time this function was scheduled, and reschedule • lastUIDelayTime= now; • msRequestAnimationFrame(renderLoop); • }

  38. Tool #3: how to calculate frames per second • varlastUIRefreshFPS= 0; • varframeCounter= 0; • function renderLoopFPS() { • varnow = new Date().getTime() % 1000; • if (now < lastUIRefreshFPS) { • // Display the FPS • document.getElementById("fps").innerText= frameCounter+ " frames"; • // Reset the FPS counter • frameCounter= 0; • } • // Increment the FPS counter • frameCounter+= 1; • lastUIRefreshFPS= now; • msRequestAnimationFrame(renderLoopFPS); • }

  39. © 2011 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.

More Related