Microsoft Silverlight Performance on Windows Phone An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 SESSION CODE: WPH309 Microsoft Silverlight Performance on Windows Phone Yochay Kiriaty Senior Technical Evangelist Microsoft Corporation yochayk@microsoft.com ; twitter @yochayk Windowsteamblog.com/wpdev

Learning Windows Phone http://learningwindowsphone.com/

An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 Performance

Windows Phone Is Already Optimized An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 Windows Phone Is Already Optimized

SL Performance on Windows Phone An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 SL Performance on Windows Phone Silverlight for Windows Phone Understand the architecture and Concepts Monitor Performance Counters Understand the tools Plan Ahead Less is more Leverage Render thread Leverage GPU Caching Imaging/Media

What is Silverlight for Windows Phone? An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 What is Silverlight for Windows Phone? Starts with Silverlight 3 plus… Performance tuning Input integration H/W media and sensor integration OS application model integration Relaxed sandbox constraints

Concepts and Architecture

Silverlight Rendering An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 Silverlight Rendering PhoneApplicationPage LayoutRoot (Grid) TitleGrid textBlockPageTitle textBlockListTitle Content Grid Your content

Silverlight Threading (on the phone) An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 Silverlight Threading (on the phone) One UI thread One Render Thread Many worker threads User threads Media decoding threads

Silverlight Threading (on Phone) UI thread Render Thread Input (touch) Layout Measure and arrange User code E.g. per-frame callbacks E.g. Blocking on Network Animations not done in Render thread Simple Animations Only “double” Animations for simple Properties Render Transforms Opacity Perspective Transforms Rectangular Clip

Silverlight Threading (on the phone) UI Thread Render Thread Event Handlers Tick Any property changes? Layout Queue up rendering changes Rasterize in back buffer Show my Frame Animate

UI Thread Vs. Render Thread An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 UI Thread Vs. Render Thread Render thread demos Demo

Animation System Frame-based Animation when CPU bound Time-based Animation when CPU bound

Tools and Counters

An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 The Emulator Leverages GPU on your PC Often much more CPU than on device Uses a single core Requires DirectX 10 capable hardware

An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 Performance Counters Application.Current.Host.Settings.EnableFrameRateCounter = true; Render Thread frame rate (fps) UI Thread frame rate (fps) Amount of VRAM used by App (kb) Total # of Textures on GPU # of Intermediates

Dirty Regions Application.Current.Host.Settings.EnableRedrawRegions = true; Visually indicates the elements that are being redrawn with each frame (texture rasterized by the UI thread)

An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 Dirty Regions Demo

Cache Visualizations Application.Current.Host.Settings.EnableCacheVisualization = true; Applies a color overlay to visuals that are not GPU accelerated

Planning for Performance

Practices to drive performance 1. Identify potential problem areas Startup? Memory? Framerate? 2. Monitor as changes are made Framerate, Size of Dirty Regions 3. Test on device, often. 4. Include designers early and often

Performance Strategy Less is more Minimize UI thread work Leverage Off-thread Leverage GPU Rinse and Repeat (1-4)

Less is more Slim Visual Trees Virtualization Collapse items that are not visible Z order doesn’t count Use redraw regions to measure impact to tree Events Layout Rendering Avoid Small property changes or use “render thread“ animation.

Leverage GPU & Render Thread Use simple animations of Simple properties Cache Avoid large textures

An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 Caching CacheMode = BitmapCache will cache the rasterized (textures) version of a UIElement and its children Tips: Know your tree. Must have no SW-only features in self or parent. Silverlight auto-caches animations when possible. Don’t count on it, verify it.

Know Your Tree – SW Rendering of Parent An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 Know Your Tree – SW Rendering of Parent Demo

Tech Ed North America 2010 8/3/2018 Quiz In the next demo, what allows the blue ellipse (including its opacity mask) to animate on the Render thread and not the UI thread? (with the same outcome) Use BitmapCache on the ellipse to cache it once and then let the render thread have fun 1 Add the ellipse as child to a canvas that is animated and use BitmapCache 2 3 Remove the replace OpacityMask with Opacity I have no idea 4 © 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.

An Introduction to Developing Applications for Microsoft Silverlight 8/3/2018 Caching = BitmapCache Demo

Media Video ( MediaElement ) Images Rendered in Render thread Must be cached. CacheMode required in earlier builds, not required later, but it is being applied. Still, less is more: Right size Minimum frame rate possible. Images Decoded in software.

Start-up Use a splash screen Delay loading resources at start-up. Include applicationsplashscreen.jpg Delay loading resources at start-up.

Performance pitfalls SW-only features: Non-rectangular clips Opacity mask – DO NOT use it! Large textures ( > 2K pixels either way) Not simple animations (e.g. ColorAnimation)

Conclusion Windows Phone comes optimized. Your app should take advantage of the architecture and the hardware Avoid SW rendering Know your tree

Windows Phone Resources Questions? Demos? The Latest phones? Visit the Windows Phone Technical Learning Center for demos and more… Business IT Resources www.windowsphone.com/business Developer Resources developer.windowsphone.com Experience Windows Phone 7 on-line and get a backstage pass www.windowsphone7.com

Win a Windows Phone Contest Hat Contest* How do you enter? Enter by visiting the Windows Phone booth, accepting a free Windows Phone branded hat, and wearing that hat during the Event. How am I selected? Each day of the event, a Windows Phone representative will randomly select up to 5 people who are observed wearing their Windows Phone branded hat Session Contest* During each Windows Phone session the moderator will post a question. The first person to correctly answer the question and called on by the moderator will potentially win Questions? Go to the WPH Information Counter at the TLC * Restrictions apply please see contest rules for eligibility and restrictions. Contest rules are displayed in the Technical Learning Center at the WPH info counter.

Related Windows Phone Content – Breakout Sessions Mon &Tue Monday WPH301 WP7: Deploy Microsoft Forefront Unified Access Gateway for Access Control to SharePoint, Exchange and more. WPH202 Deploying Windows Phone 7 with Exchange Server and SharePoint Server Tuesday WPH203 Overview of the Windows Phone 7 Application Platform WPH313 Windows Phone 7 Architecture Deep Dive WPH304 An In-Depth view at Building Applications for WP7 with Silverlight (Part 1) WPH305 An In-Depth view at Building Applications for WP7 with Silverlight (Part 2) WPH306 Developing Occasionally Connected Applications for Windows Phone 7

Related Windows Phone Content – Breakout Sessions Wed &Thu Wednesday WPH310 Designing and Developing for the Rich Mobile Web WPH311 Developing Mobile Code Today that will run on WP 7 Tomorrow WPH309 Silverlight performance on Windows Phone WPH307 Building Windows Phone Games with XNA WPH308 Building a High Performance 3D Game for Windows Phone Thursday WPH303 Understanding the Windows Phone 7 Development Tools WPH314 Learn Windows Phone 7 Development by Creating a Robotic T-Shirt Cannon WPH312 Understanding Marketplace and Making Money with WP7 Applications

Related Windows Phone Content – Interactive Session & HOL Windows Phone Interactive Sessions Windows Phone 7 Demo Only! Microsoft’s Next Generation Mobile Enterprise Application Platform (MEAP) Windows Phone 7 Application Performance Prepare for Windows Phone 7 Development! Coding practices you should start using now in Windows Mobile Windows Phone Hands On Labs Hello Windows Phone - Building Your first Windows Phone Application Microsoft Silverlight for Windows Phone Microsoft XNA Framework 4.0 for Windows Phones Using Push Notifications and Windows Communication Foundation (WCF) Services

Resources Learning Required Slide www.microsoft.com/teched Tech Ed North America 2010 8/3/2018 12:14 AM Required Slide Resources Learning Sessions On-Demand & Community Microsoft Certification & Training Resources www.microsoft.com/teched www.microsoft.com/learning Resources for IT Professionals Resources for Developers http://microsoft.com/technet http://microsoft.com/msdn © 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.

Complete an evaluation on CommNet and enter to win! Tech Ed North America 2010 8/3/2018 12:14 AM Required Slide Complete an evaluation on CommNet and enter to win! © 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.

Sign up for Tech·Ed 2011 and save $500 starting June 8 – June 31st http://northamerica.msteched.com/registration   You can also register at the North America 2011 kiosk located at registration Join us in Atlanta next year

Tech Ed North America 2010 8/3/2018 12:14 AM © 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. © 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.

Tech Ed North America 2010 8/3/2018 Quiz In the next demo, what allows the blue ellipse (including its opacity mask) to animate on the Render thread and not the UI thread? (with the same outcome) Use BitmapCache on the ellipse to cache it once and then let the render thread have fun 1 Add the ellipse as child to a convenes that is animated and use BitmapCache 2 3 Remove the replace OpacityMask with Opacity I have no idea 4 © 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.