1. Building high performance Metro style apps using HTML5
9/22/2018 7:40 PM
APP-162T
Building high performance Metro style apps using HTML5
Mathias Jourdain
Principal Development Lead
Microsoft Corporation
© 2010 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.

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 TAB
HTML host process
App code
Web platform
App code
Web platform
Windows runtime

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 HTML5 is more than a web page …

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

7. App launch Windows Runtime "activated" event "DOMContentLoaded" event
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 has 5s to work after suspend message
App is not notified when terminated
Running
suspending
Suspended
Terminated
App launch
Low memory
resuming
App is notified when resumed
Splash screen
Code runs
Code runs
No code runs
No process

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 a thumbnail 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) {
var imgTag = document.getElementById("imageTag");
imgTag.src = URL.createObjectURL(file, false);
});
// Pick an image file
picker.pickSingleFileAsync()
.then(function (file) {
var properties = Windows.Storage.FileProperties.ThumbnailMode;
return file.getThumbnailAsync(properties.singleItem, 1024); })
.then(function (thumb) {
var imgTag = document.getElementById("imageTag");
imgTag.src = URL.createObjectURL(thumb, false);
});

15. Tile Puzzle with a thumbnail
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
User input 2s
Animation 3s
Launch

19. Example of app execution
User input events
JavaScript
Compute layout
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
var xhr = new XMLHttpRequest();
xhr.onload = function(){
// The request completed successfully };
xhr.onerror = function(){
// The request failed with an error
xhr.open("GET", “ true);
xhr.send(null);

22. How to pick a file 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. Calculations on the UI thread impact responsiveness
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. 5 in-a-row with a Web Worker
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. 9/22/2018 7:40 PM
© 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.
© 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
var now = new Date().getTime();
// Calculate the times between the various events
var page_load_time = performance.timing.domContentLoadedEventStart - performance.timing.navigationStart;
var page_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
var lastUIDelayTime = 0;
var maxUIDelayTime = 0;
function renderLoop() {
var now = new Date().getTime();
if (lastUIDelayTime != 0) {
var currentUIDelay = 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
var lastUIRefreshFPS = 0;
var frameCounter = 0;
function renderLoopFPS() {
var now = 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. 9/22/2018 7:40 PM
© 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.
© 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.