Mark Alcazar & Kiran Kumar - PowerPoint Presentation

Slide1
Slide2

Mark Alcazar & Kiran KumarPartner Engineering Manager / Principal Engineering LeadTechniques for Maximizing Universal Windows app experiences built with XAML

XAML Performance: Techniques for Maximizing Universal Windows App Experiences Built with XAML

3-698Slide3

If XAML framework was a car… what kind of car would we be ?

Is XAML

performance great enough

for my application ?

Productivity (comfort) only

lots of compromises made

Performance only

lots of compromises madeSlide4

Great performance, great productivity, both in balance

If XAML framework were a car… Slide5

Top 10 ListHow to “push the accelerator”How to “read your instruments”

Common pitfalls and “hairpin turns” to avoidPointers on how to “change your sparkplug timings”

What

will

we

cover here

?Slide6

Top 10 and guidelines

CPU

Memory

Responsiveness

Expert techniqueSlide7

Embrace the Zen of performanceDefine the problem and set a target

Convert to a Universal Windows app

Profile your application

Defer work on

startup

Reduce number of elements

REPEATER

Use virtualizationOptimize databinding Optimize your images Optimize text renderingXAML Performance Top 10

General principles to follow when your application has a problem“

Racetrack ready” - used

by internal MS teamsSlide8

The fastest code is the code you don’t runIn practiceStrive for balance - features vs performance

Defer work until laterPrune as much as you can

#1 - Zen of PerformanceSlide9

Zen in practiceSlide10

What are the problems ? Startup too slowCrashes on Phone (expected due to memory)

Scrolling/ResponsivenessWhat are our goals ?

Target application startup – within 1-2 s

Be able to run on Phone (memory < 50 Mb)

Responsive scrolling

#2 – Define your target and your goals

Define what the problem is and where you need to beSlide11

Lots of performance work done in Windows 10 for Shell/ApplicationsMany performance optimizations enabled for Windows 10

Example – new compiled markup format requires recompileNew performance features only for Universal Windows apps

x:Bind, x:DeferLoadStrategy,

etc

#3 Convert to a Universal Windows appSlide12

Universal Windows app PerformanceNotable performance gains when moving to UWP

Startup

Memory

CPU

- 15% to 30

%

Working

Set

- 25% to 45

%Slide13

Profile your applicationFirst step – see if there’s a problem with in your codeUse Visual Studio 2015 to analyze and fixTimeline tool – where is my problem

Profiler to spot slow codeMemory usageVisual Diagnostics

#4 Profile your applicationSlide14

Demo Fabrikam

Profiler

VS

TimelineSlide15

8.1 AppTotal Startup: ~12.5 SecApp

Activity: ~6 Sec

Idle

: ~

1.4

sec

Large Layout: :  ~3 Sec

Large layout Element count: ~4600Memory: ~82MBKiran’s investigation checklistSlide16

Kick off initialization work off-threadShow loading/in-progress as appropriate#5 Defer work on startupSlide17

Elements are instructions to the frameworkRough ballpark – 1000 elements ~1 sGeneral guidelinesLook at number of elements parsed at startup

Look for unused stylesLook at templates in repeater(s) / Lists

#6 Reduce Number of ElementsSlide18

New Windows 10 XAML featureExtremely useful for loading parts of UIXAML construct to “delay instantiation” of this part of the treeUseful for MVVM

x:DeferLoadStrategySlide19

<StackPanel x:Name="AdditionalProductPage"

Visibility="Collapsed"

…

x:DeferLoadStrategy

="

Lazy">

…</StackPanel> var deferredPanel = FindName("AdditionalProductPage");x:Defer exampleSlide20

Demo – reducing number of elements

In-progress

UI

Reducing element count

x:Defer

Checklist

Total

Startup

App ActivityIdleLarge Layout

Large layout Element count

MemorySlide21

RepeatersSlide22

Framework optimizes repeatersListview/Gridview out of the box virtualizeSeveral pitfalls

Placing a listview within a scrollviewer

Changing the panels used by

listview

/

gridview

#7 Use virtualizationSlide23

Simplify DataTemplatesCreate less elementsUse x:Bind for Databinding

#8 Optimize DatabindingSlide24

New Windows 10 XAML featurex:Bind moves databinding to generated code that gets compiledOptimizes both startup and memoryStrongly typed

Debuggable

x:BindSlide25

<DataTemplate x:Key="VacationsListViewItemTemplateOptimized“ x:DataType

="local:IItem">…

<TextBlock x:Name="titleTextBlock" Text="

{x:Bind

Title}"

… />

</

DataTemplate>x:BindSlide26

Additional optimizationsUse x:PhaseUse ContainerContentChanging EventOther talk

Data Binding: Boost your App’s performance through

n

ew

e

nhancements

to XAML Data Binding

#8 Optimize DatabindingSlide27

Demo – how is our app coming along ?

Enable UI Virtualization

Optimize data templates

Use x:Bind

Checklist

Total

Startup

App Activity

IdleLarge LayoutLarge layout Element countMemorySlide28

Large images can use lots of memoryMost of the time our framework optimizes thisIf you see memory usage high Either resize images in design toolUse

DecodePixelHeight & DecodePixelWidth

#9 – Optimize your imagesSlide29

public void SetImage(Uri baseUri, String path){ _base = base;

_path = path;

BitmapImage

bi = new BitmapImage(new Uri(baseUri, path));

bi.DecodePixelHeight

= 120; bi.DecodePixelWidth = 180; Image = bi; }DecodePixelHeight &

DecodePixelWidthSlide30

Windows 10 text rendering 50% fasterEnabled by defaultCertain typography features can disable thisCharacterSpacingTypography

LineStackingStregy=BaselineToBaseline

/

MaxHeight

IsTextSelectionEnabled

= true

#10 Optimize

text renderingSlide31

New Windows 10 XAML featureDebugging feature for ensuring text is on most optimum path

IsTextPerformanceVisualizationEnabledSlide32

Demo – Text & Images

Images

Text Rendering

Final version

Checklist

Total

Startup

App Activity

IdleLarge LayoutLarge layout Element count

MemorySlide33

8.1 AppTotal Startup: ~12.5 Sec

App Activity: ~6 SecIdle: ~1.4 sec

Large Layout: :  ~3 Sec

Large layout Element count: ~4600

Memory: ~82MB

Final Result – Side by Side

10 App – Final Version

Total Startup: ~740 msApp Activity: 0 s

Idle: 0sLarge Layout: ~83msLarge layout Element count: ~188Memory: ~25 MBSlide34

Embrace the Zen of performanceDefine the problem and set a target

Convert to a Universal Windows app

Profile

your application

Defer

work on

startup

Reduce number of elementsREPEATERUse virtualizationOptimize databinding Optimize your images Optimize text rendering

XAML Performance Top 10General principles to follow when your application has a problem

“Racetrack ready” - used by internal Microsoft teamsSlide35

Convert to Windows Universal appFollow the Top 10 list if you have a performance problemUpdated performance whitepaper coming soon

Call to Action

Putting it together: Office & XAML – “Rocket bus”Slide36