Pandurang Nayak              Sumeet Jindal
Client Platform Evangelist   Senior Developer
Microsoft Corporation        Vect...
Why are we here?
 Learn the inner workings of Silverlight
 Understand rendering pipelines

 Find tips and techniques for b...
Information Sources
 Silverlight Performance Team
 Silverlight Product Team
 Top Silverlight Bloggers and Experts
 Interna...
Silverlight Architecture

                                 User Code

                        Controls

                  ...
Graphics Pipeline
 Cross-Platform
   Develop once, run anywhere
 Retained Mode Graphics System
                    dirty r...
The UI Thread
On The UI Thread                 On the Non-UI Thread

   User Code                          Frame Rasteriza...
The Animate Loop
                          Tick                     Event Handlers



     Ask browser
                   ...
Animation Basics
      Frequency is the plugin’s framerate
      Real-Time Animation (vs. Frame-based)
      Types of anim...
Knowing Animations
 We only redraw the dirty rectangle
 Avoid large scale animations
 Text redraw triggers the font hintin...
Using EnableRedrawRegions
The Update Loop
                      Tick                     Event Handlers



     Ask browser
                        ...
Layout and Draw
                                                   ListBox

   Designed for Nesting
                      ...
The Update Loop
                      Tick                     Event Handlers



     Ask browser
                        ...
Rasterization
 All changes for a frame are drawn at once
 Identify what causes a framerate drop

                         ...
Brushes
 A brush maps a screen position to a color
 Brushes in Silverlight
     SolidColorBrush
     LinearGradientBrush
 ...
Image and Video Brushes in Silverlight
Rasterization and Anti-Aliasing
 Vector Graphics   - Anti-aliased
 Animation         - Anti-aliased
Rasterization and Anti-Aliasing
 Blurry Image Rendering
    Cause: Interpolation
Rasterization and Anti-Aliasing
 Blurry Thin Lines
    Cause: non-int positions
Rasterization and Anti-Aliasing
 Seaming
     Cause: non-int positions
  c = .5(.5*cbkgrd + .5*ctop) + .5(.5*cbkgrd + .5*c...
Rasterization and Anti-Aliasing
 In Silverlight 2 RTM,
      Vector Graphics      • Already Correct Behavior



         A...
Media Rendering
 halo.wmv is 300x400. Which is least expensive?

 <MediaElement Source=“halo.wmv”

 a.   Width= quot;225qu...
Media: Every Pixel, Every frame!
       Rinse & Repeat, at the video framerate




 Encode at the minimum framerate that y...
Media Rendering
 halo.wmv is 300x400. Which is least expensive?

 <MediaElement Source=“halo.wmv”

 a.   Width= quot;225qu...
Media Rendering
 halo.wmv is 300x400. Which is least expensive?

 <MediaElement Source=“halo.wmv”

 a.   Width= quot;225qu...
Shrinking video causes
(Ex: 300x400 to 225x300)

  Extra bandwidth for extra 75x100px
  Decoding extra 75x100px
  Interpol...
Profiling Silverlight Applications
 Steps:
  1.   Observe
  2.   Hypothesize
  3.   Develop Testing Protocol
  4.   Experi...
Debugging Settings
Sys.Silverlight.createObjectEx({
     source: quot;xaml/Scene.xamlquot;,
     parentElement: document.g...
Your Animation is stuttering
What is the first step to debug?
a. Decrease the framerate
b. Identify the resource constrain...
xperf
 ETW – Event Tracing for Windows
    Tracing mechanism for both user-mode & kernel-
    mode apps
    Silverlight & ...
xperf
Step 1: Install Microsoft Windows Performance Toolkit
http://msdn.microsoft.com/en-us/performance/default.aspx

Step...
xperf
What happens on Navigation


                          Download                                Create
         Navigate   ...
XAML Parsing Uncovered!
 URI-based resources are loaded when added to
 tree
    Asynch
    Cached via Browser
 Build uniqu...
Text Stack
 TextBlock & TextBox
 Glyph Capabilities
 Text Stack
    Cross-OS consistency
    Glyph rendering is optimized ...
Silverlight Spy
 View Visual Tree for Silverlight applications
 Along with .NET Reflector, can show you entire
 structure ...
Silverlight Spy
References
 Performance Bloggers
 http://blogs.msdn.com/seema
 http://blogs.microsoft.co.il/sasha
 http://blogs.msdn.com/t...
Session Resources
Windows Performance Toolkit:   http://msdn.microsoft.com/en-us/performance



Silverlight               ...
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
Advanced Silverlight
Advanced Silverlight
Advanced Silverlight
Upcoming SlideShare
Loading in...5
×

Advanced Silverlight

2,928

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,928
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
37
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • YUV to ARGB – Y (luminance), UV (chrominance)
  • Silverlight provides a second lower level Glyphs element for advanced typography. A glyph is terminology indicating a graphical representation of a letter or sequence of letters.
  • Transcript of "Advanced Silverlight"

    1. 1. Pandurang Nayak Sumeet Jindal Client Platform Evangelist Senior Developer Microsoft Corporation Vectorform
    2. 2. Why are we here? Learn the inner workings of Silverlight Understand rendering pipelines Find tips and techniques for building great SL applications Learn performance best practices Understand how to profile your apps Peek into few advanced features in the upcoming Silverlight 3
    3. 3. Information Sources Silverlight Performance Team Silverlight Product Team Top Silverlight Bloggers and Experts Internal MS Silverlight Communities My Own Experience with Customers
    4. 4. Silverlight Architecture User Code Controls Managed Interop CoreC Property Deep Layout Text Media Gfx Zoom Image LR System Interaction between pipelines via brushes
    5. 5. Graphics Pipeline Cross-Platform Develop once, run anywhere Retained Mode Graphics System dirty rectangle
    6. 6. The UI Thread On The UI Thread On the Non-UI Thread User Code Frame Rasterization Control Code Media Decoding Animations Layout Master Tip Silverlight is hosted in the browser. So, the (single) UI Thread belongs to the browser!
    7. 7. The Animate Loop Tick Event Handlers Ask browser Any Property to show Changes? frame By default, Rasterize in Layout back buffer Queue up Rendering Changes
    8. 8. Animation Basics Frequency is the plugin’s framerate Real-Time Animation (vs. Frame-based) Types of animations: Interpolation Animations ColorAnimation, PointAnimation, DoubleAnimation Splines, KeyFrames ObjectAnimation http://silverlight.net/quickstarts/ blend_quickstart/part3_animations.aspx
    9. 9. Knowing Animations We only redraw the dirty rectangle Avoid large scale animations Text redraw triggers the font hinting algorithm Master Tip When in doubt, use: agControl.settings.EnableRedrawRegions = true;
    10. 10. Using EnableRedrawRegions
    11. 11. The Update Loop Tick Event Handlers Ask browser Any Property to show Changes? frame Rasterize in Layout back buffer Queue up Rendering Changes
    12. 12. Layout and Draw ListBox Designed for Nesting ScrollViewer Two Passes: Measure & Arrange Grid Extensible ScrollBars StackPanel Master ListBoxItem Tip Nested flow layout that changes often is expensive. Some Stuff
    13. 13. The Update Loop Tick Event Handlers Ask browser Any Property to show Changes? frame Rasterize in Layout back buffer Queue up Rendering Changes
    14. 14. Rasterization All changes for a frame are drawn at once Identify what causes a framerate drop Master Tip Measure maximum framerate to tune your application: sender.settings.EnableFramerateCounter = true; sender.settings.MaxFrameRate = 1000; Integrate codepaths via Brushes
    15. 15. Brushes A brush maps a screen position to a color Brushes in Silverlight SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush VideoBrush Master Tip When mixing pipelines, brushes are cheap!
    16. 16. Image and Video Brushes in Silverlight
    17. 17. Rasterization and Anti-Aliasing Vector Graphics - Anti-aliased Animation - Anti-aliased
    18. 18. Rasterization and Anti-Aliasing Blurry Image Rendering Cause: Interpolation
    19. 19. Rasterization and Anti-Aliasing Blurry Thin Lines Cause: non-int positions
    20. 20. Rasterization and Anti-Aliasing Seaming Cause: non-int positions c = .5(.5*cbkgrd + .5*ctop) + .5(.5*cbkgrd + .5*cbottom)
    21. 21. Rasterization and Anti-Aliasing In Silverlight 2 RTM, Vector Graphics • Already Correct Behavior Animation • Already Correct Behavior Image Rendering • Layout Rounding NEW!!! Sharp Lines • Layout Rounding NEW!!! • Overlap edges Seaming • Change Background Color Non-Integer positioning mainly arises from Text and “Center”
    22. 22. Media Rendering halo.wmv is 300x400. Which is least expensive? <MediaElement Source=“halo.wmv” a. Width= quot;225quot; Height=quot;300quot; /> b. Width=quot;300quot; Height=quot;400quot; /> c. Width=quot;303quot; Height=quot;404quot; /> d. Width=quot;450quot; Height=quot;600quot; />
    23. 23. Media: Every Pixel, Every frame! Rinse & Repeat, at the video framerate Encode at the minimum framerate that you need. Encode at the desired size Blending with media is expensive Master Tip Let the media pipeline decide the best framerate
    24. 24. Media Rendering halo.wmv is 300x400. Which is least expensive? <MediaElement Source=“halo.wmv” a. Width= quot;225quot; Height=quot;300quot; /> b. Width=quot;300quot; Height=quot;400quot; /> c. Width=quot;303quot; Height=quot;404quot; /> d. Width=quot;450quot; Height=quot;600quot; />
    25. 25. Media Rendering halo.wmv is 300x400. Which is least expensive? <MediaElement Source=“halo.wmv” a. Width= quot;225quot; Height=quot;300quot; /> b. Width=quot;300quot; Height=quot;400quot; /> c. Width=quot;303quot; Height=quot;404quot; /> d. Width=quot;450quot; Height=quot;600quot; />
    26. 26. Shrinking video causes (Ex: 300x400 to 225x300) Extra bandwidth for extra 75x100px Decoding extra 75x100px Interpolation of every pixel in the 225x300 grid Pretty awesome interpolation, but never as good as native rendering
    27. 27. Profiling Silverlight Applications Steps: 1. Observe 2. Hypothesize 3. Develop Testing Protocol 4. Experiment 5. Make Conclusion
    28. 28. Debugging Settings Sys.Silverlight.createObjectEx({ source: quot;xaml/Scene.xamlquot;, parentElement: document.getElementById(quot;SilverlightControlHostquot;), id: quot;SilverlightControlquot;, properties: { width: quot;500quot;, height: quot;500quot;, isWindowless: false, background: quot;FF000000quot;, framerate: quot;10000quot; }, events: { onLoad:onLoadHandler} }); function onLoadHandler() { agControl = document.getElementById(quot;SilverlightControlquot;); /* To see the framerate displayed in the browser status bar */ agControl.settings.EnableFrameRateCounter = true; /* To see the redraw regions*/ agControl.settings.EnableRedrawRegions= true; }
    29. 29. Your Animation is stuttering What is the first step to debug? a. Decrease the framerate b. Identify the resource constraint c. Turn on Redraw Regions Master Tip While debugging render issues, always try to identify what is blocking the UI thread.
    30. 30. xperf ETW – Event Tracing for Windows Tracing mechanism for both user-mode & kernel- mode apps Silverlight & CLR have embedded ETW events Analyzes unmanaged callstack Describes CPU cycles over time
    31. 31. xperf Step 1: Install Microsoft Windows Performance Toolkit http://msdn.microsoft.com/en-us/performance/default.aspx Step 2: Admin-level CMD prompt Step 3: xperf –on base Step 4: Run scenario try to make all parts fully visible. Step 5: xperf –d myprofile.etl Step 6: xperfview myprofile.etl (or open Performance Analyzer) Step 7: set _NT_SYMBOL_PATH= srv*C:symbols*http://msdl.microsoft.com/downloads/symbols Step 8: Trace > Load Symbols Step 9: Select Graph, right-click and choose Summary Step 10: Run again to make sure results were sampled correctly
    32. 32. xperf
    33. 33. What happens on Navigation Download Create Navigate Download JS HTML Plug-in Load Extract Launch Control.Source is XAP Assemblies Manifest CLR Create Object Set Visual App Creates Root Object Tree
    34. 34. XAML Parsing Uncovered! URI-based resources are loaded when added to tree Asynch Cached via Browser Build unique tree for each Control Pull in Text Stack
    35. 35. Text Stack TextBlock & TextBox Glyph Capabilities Text Stack Cross-OS consistency Glyph rendering is optimized for reading Anti-aliasing, H/V dropout, Gamma Correction These paths can be hit each tick if one is not careful Accepted Fonts Cross-OS, common set already on OS EA fonts, only if installed on machine
    36. 36. Silverlight Spy View Visual Tree for Silverlight applications Along with .NET Reflector, can show you entire structure and code of Silverlight applications Master Tip Confidential stuff should always reside on server! ANYTHING on the client can be exposed.
    37. 37. Silverlight Spy
    38. 38. References Performance Bloggers http://blogs.msdn.com/seema http://blogs.microsoft.co.il/sasha http://blogs.msdn.com/tess/ http://blogs.technet.com/markrussinovich/ Silverlight Spy http://silverlightspy.com/
    39. 39. Session Resources Windows Performance Toolkit: http://msdn.microsoft.com/en-us/performance Silverlight http://www.silverlight.net More Advanced Sessions http://2009.visitmix.com
    40. 40. © 2009 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.
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×