Preview 3-698.pptx

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

1.0x

Preview 3-698.pptx

Created 2 years ago

Duration 0:00:00
lesson view count 33
XAML Performance: Techniques for Maximizing Universal Windows App Experiences Built with XAML
Select the file type you wish to download
Slide Content
  1. Mark Alcazar & Kiran Kumar

    Slide 1 - Mark Alcazar & Kiran Kumar

    • Partner Engineering Manager / Principal Engineering Lead
    • Techniques for Maximizing Universal Windows app experiences built with XAML
    • XAML Performance: Techniques for Maximizing Universal Windows App Experiences Built with XAML
    • 3-698
    • //build/ content is being presented by Microsoft Office Mix The video for this session will be available shortly
  2. Slide 2

    • 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 made
  3. Great performance, great productivity, both in balance

    Slide 3 - Great performance, great productivity, both in balance

    • If XAML framework were a car…
  4. Slide 4

    • Top 10 List
    • How to “push the accelerator”
    • How to “read your instruments”
    • Common pitfalls and “hairpin turns” to avoid
    • Pointers on how to “change your sparkplug timings”
    • What will we cover here ?
  5. Top 10 and guidelines

    Slide 5 - Top 10 and guidelines

    • CPU
    • Memory
    • Responsiveness
    • Expert technique
  6. Embrace the Zen of performance

    Slide 6 - Embrace the Zen of performance

    • Define 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 virtualization
    • Optimize databinding
    • Optimize your images
    • Optimize text rendering
    • XAML Performance Top 10
    • General principles to follow when your application has a problem
    • “Racetrack ready” - used by internal MS teams
  7. The fastest code is the code you don’t run

    Slide 7 - The fastest code is the code you don’t run

    • In practice
    • Strive for balance - features vs performance
    • Defer work until later
    • Prune as much as you can
    • #1 - Zen of Performance
  8. Slide 8

    • Zen in practice
  9. What are the problems ?

    Slide 9 - What are the problems ?

    • Startup too slow
    • Crashes on Phone (expected due to memory)
    • Scrolling/Responsiveness
    • What 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 be
  10. Lots of performance work done in Windows 10 for Shell/Applications

    Slide 10 - Lots of performance work done in Windows 10 for Shell/Applications

    • Many performance optimizations enabled for Windows 10
    • Example – new compiled markup format requires recompile
    • New performance features only for Universal Windows apps
    • x:Bind, x:DeferLoadStrategy, etc
    • #3 Convert to a Universal Windows app
  11. Universal Windows app Performance

    Slide 11 - Universal Windows app Performance

    • Notable performance gains when moving to UWP
    • Startup
    • Memory
    • CPU - 15% to 30%
    • Working Set - 25% to 45%
  12. Profile your application

    Slide 12 - Profile your application

    • First step – see if there’s a problem with in your code
    • Use Visual Studio 2015 to analyze and fix
    • Timeline tool – where is my problem
    • Profiler to spot slow code
    • Memory usage
    • Visual Diagnostics
    • #4 Profile your application
  13. Demo Fabrikam

    Slide 13 - Demo Fabrikam

    • Profiler
    • VS Timeline
  14. 8.1 App

    Slide 14 - 8.1 App

    • Total Startup: ~12.5 Sec
    • App Activity: ~6 Sec
    • Idle: ~1.4 sec
    • Large Layout: :  ~3 Sec
    • Large layout Element count: ~4600
    • Memory: ~82MB
    • Kiran’s investigation checklist
  15. Kick off initialization work off-thread

    Slide 15 - Kick off initialization work off-thread

    • Show loading/in-progress as appropriate
    • #5 Defer work on startup
  16. Elements are instructions to the framework

    Slide 16 - Elements are instructions to the framework

    • Rough ballpark – 1000 elements ~1 s
    • General guidelines
    • Look at number of elements parsed at startup
    • Look for unused styles
    • Look at templates in repeater(s) / Lists
    • #6 Reduce Number of Elements
  17. New Windows 10 XAML feature

    Slide 17 - New Windows 10 XAML feature

    • Extremely useful for loading parts of UI
    • XAML construct to “delay instantiation” of this part of the tree
    • Useful for MVVM
    • x:DeferLoadStrategy
  18. <StackPanel x:Name="AdditionalProductPage"

    Slide 18 - <StackPanel x:Name="AdditionalProductPage"

    • Visibility="Collapsed" …
    • x:DeferLoadStrategy="Lazy">
    • </StackPanel>
    • var deferredPanel = FindName("AdditionalProductPage");
    • x:Defer example
  19. Demo – reducing number of elements

    Slide 19 - Demo – reducing number of elements

    • In-progress UIReducing element count
    • x:Defer
    • Checklist
    • Total Startup
    • App Activity
    • Idle
    • Large Layout
    • Large layout Element count
    • Memory
  20. Repeaters

    Slide 20 - Repeaters

  21. Framework optimizes repeaters

    Slide 21 - Framework optimizes repeaters

    • Listview/Gridview out of the box virtualize
    • Several pitfalls
    • Placing a listview within a scrollviewer
    • Changing the panels used by listview/gridview
    • #7 Use virtualization
  22. Simplify DataTemplates

    Slide 22 - Simplify DataTemplates

    • Create less elements
    • Use x:Bind for Databinding
    • #8 Optimize Databinding
  23. New Windows 10 XAML feature

    Slide 23 - New Windows 10 XAML feature

    • x:Bind moves databinding to generated code that gets compiled
    • Optimizes both startup and memory
    • Strongly typed
    • Debuggable
    • x:Bind
  24. <DataTemplate x:Key="VacationsListViewItemTemplateOptimized“

    Slide 24 - <DataTemplate x:Key="VacationsListViewItemTemplateOptimized“

    • x:DataType="local:IItem">
    • <TextBlock x:Name="titleTextBlock" Text="{x:Bind Title}"
    • … />
    • </DataTemplate>
    • x:Bind
  25. Additional optimizations

    Slide 25 - Additional optimizations

    • Use x:Phase
    • Use ContainerContentChanging Event
    • Other talk
    • Data Binding: Boost your App’s performance through new enhancements to XAML Data Binding
    • #8 Optimize Databinding
  26. Demo – how is our app coming along ?

    Slide 26 - Demo – how is our app coming along ?

    • Enable UI Virtualization
    • Optimize data templates
    • Use x:Bind
    • Checklist
    • Total Startup
    • App Activity
    • Idle
    • Large Layout
    • Large layout Element count
    • Memory
  27. Large images can use lots of memory

    Slide 27 - Large images can use lots of memory

    • Most of the time our framework optimizes this
    • If you see memory usage high
    • Either resize images in design tool
    • Use DecodePixelHeight & DecodePixelWidth
    • #9 – Optimize your images
  28. public void SetImage(Uri baseUri, String path)

    Slide 28 - 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 & DecodePixelWidth
  29. Windows 10 text rendering 50% faster

    Slide 29 - Windows 10 text rendering 50% faster

    • Enabled by default
    • Certain typography features can disable this
    • CharacterSpacing
    • Typography
    • LineStackingStregy=BaselineToBaseline/MaxHeight
    • IsTextSelectionEnabled = true
    • #10 Optimize text rendering
  30. New Windows 10 XAML feature

    Slide 30 - New Windows 10 XAML feature

    • Debugging feature for ensuring text is on most optimum path
    • IsTextPerformanceVisualizationEnabled
  31. Demo – Text & Images

    Slide 31 - Demo – Text & Images

    • Images
    • Text Rendering
    • Final version
    • Checklist
    • Total Startup
    • App Activity
    • Idle
    • Large Layout
    • Large layout Element count
    • Memory
  32. 8.1 App

    Slide 32 - 8.1 App

    • Total Startup: ~12.5 Sec
    • App Activity: ~6 Sec
    • Idle: ~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 ms
    • App Activity: 0 s
    • Idle: 0s
    • Large Layout: ~83ms
    • Large layout Element count: ~188
    • Memory: ~25 MB
  33. Embrace the Zen of performance

    Slide 33 - Embrace the Zen of performance

    • Define 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 virtualization
    • Optimize databinding
    • Optimize your images
    • Optimize text rendering
    • XAML Performance Top 10
    • General principles to follow when your application has a problem
    • “Racetrack ready” - used by internal Microsoft teams
  34. Convert to Windows Universal app

    Slide 34 - Convert to Windows Universal app

    • Follow the Top 10 list if you have a performance problem
    • Updated performance whitepaper coming soon
    • Call to Action
    • Putting it together: Office & XAML – “Rocket bus”