advanced silverlight
TRANSCRIPT
Advanced SilverlightDoing more with Silverlight
Pandurang NayakClient Platform EvangelistMicrosoft Corporation
Sumeet JindalSenior DeveloperVectorform
Why are we here?
Learn the inner workings of SilverlightUnderstand rendering pipelines
Find tips and techniques for building great SL applicationsLearn performance best practicesUnderstand how to profile your apps
Peek into few advanced features in the upcoming Silverlight 3
Information Sources
Silverlight Performance TeamSilverlight Product TeamTop Silverlight Bloggers and ExpertsInternal MS Silverlight CommunitiesMy Own Experience with Customers
Silverlight Architecture
Managed InteropCoreC
LRProperty System Layout Text Media Gfx Deep
Zoom Image
Controls
User Code
Interaction between pipelines via brushes
Graphics Pipeline
Cross-PlatformDevelop once, run anywhere
Retained Mode Graphics System
dirty rectangle
The UI Thread
On The UI Thread
User CodeControl CodeAnimationsLayout
On the Non-UI Thread
Frame RasterizationMedia Decoding
Master Tip
Silverlight is hosted in the browser. So, the (single) UI Thread belongs to the browser!
The Animate Loop
TickAny
Property Changes?
LayoutQueue up Rendering Changes
Rasterize in back buffer
Ask browser to show frame
Event Handlers
By default,
60fps
Animation Basics
Frequency is the plugin’s framerate Real-Time Animation (vs. Frame-based)Types of animations:
Interpolation AnimationsColorAnimation, PointAnimation, DoubleAnimation
Splines, KeyFramesObjectAnimation
http://silverlight.net/quickstarts/ blend_quickstart/part3_animations.aspx
Knowing Animations
We only redraw the dirty rectangleAvoid large scale animationsText redraw triggers the font hinting algorithm
Master Tip
When in doubt, use:agControl.settings.EnableRedrawRegions = true;
Using EnableRedrawRegionsDEMO
The Update Loop
TickAny
Property Changes?
LayoutQueue up Rendering Changes
Rasterize in back buffer
Ask browser to show frame
Event Handlers
Layout and Draw
Designed for NestingTwo Passes:
Measure & ArrangeExtensible
ListBox
ScrollViewer
Grid
ScrollBars
StackPanel
ListBoxItemSom
e Stuff
Master Tip
Nested flow layout that changes often is expensive.
The Update Loop
TickAny
Property Changes?
LayoutQueue up Rendering Changes
Rasterize in back buffer
Ask browser to show frame
Event Handlers
Rasterization
All changes for a frame are drawn at onceIdentify 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
Brushes
A brush maps a screen position to a colorBrushes in Silverlight
SolidColorBrushLinearGradientBrushRadialGradientBrush
ImageBrushVideoBrush
Master Tip
When mixing pipelines, brushes are cheap!
Image and Video Brushes in SilverlightDEMO
Rasterization and Anti-Aliasing
Vector Graphics - Anti-aliasedAnimation - Anti-aliased
Rasterization and Anti-Aliasing
Blurry Image RenderingCause: Interpolation
Rasterization and Anti-Aliasing
Blurry Thin LinesCause: non-int positions
Rasterization and Anti-Aliasing
SeamingCause: non-int positions
c = .5(.5*cbkgrd + .5*ctop) + .5(.5*cbkgrd + .5*cbottom)
Rasterization and Anti-Aliasing
In Silverlight 2 RTM,
•Already Correct BehaviorVector Graphics
•Already Correct BehaviorAnimation
•Layout Rounding NEW!!!Image Rendering
•Layout Rounding NEW!!!Sharp Lines•Overlap edges•Change Background ColorSeaming
Non-Integer positioning mainly arises from Text and “Center”
Media Rendering
halo.wmv is 300x400. Which is least expensive?
<MediaElement Source=“halo.wmv”
a. Width= "225" Height="300" />b. Width="300" Height="400" />c. Width="303" Height="404" />d. Width="450" Height="600" />
Decode
YUV Convert
Resize
(opt)
Blend
(opt)Draw
Rinse & Repeat, at the video framerate
Media: Every Pixel, Every frame!
Encode at the minimum framerate that you need.Encode at the desired sizeBlending with media is expensive
Master Tip
Let the media pipeline decide the best framerate
Media Rendering
halo.wmv is 300x400. Which is least expensive?
<MediaElement Source=“halo.wmv”
a. Width= "225" Height="300" />b. Width="300" Height="400" />c. Width="303" Height="404" />d. Width="450" Height="600" />
Media Rendering
halo.wmv is 300x400. Which is least expensive?
<MediaElement Source=“halo.wmv”
a. Width= "225" Height="300" />b. Width="300" Height="400" />c. Width="303" Height="404" />d. Width="450" Height="600" />
Shrinking video causes(Ex: 300x400 to 225x300)
Extra bandwidth for extra 75x100pxDecoding extra 75x100pxInterpolation of every pixel in the 225x300 grid
Pretty awesome interpolation, but never as good as native rendering
Profiling Silverlight Applications
Steps:1. Observe2. Hypothesize3. Develop Testing Protocol4. Experiment5. Make Conclusion
Debugging SettingsSys.Silverlight.createObjectEx({ source: "xaml/Scene.xaml", parentElement: document.getElementById("SilverlightControlHost"), id: "SilverlightControl", properties: { width: "500", height: "500",
isWindowless: false, background: "FF000000", framerate: "10000" }, events: { onLoad:onLoadHandler} }); function onLoadHandler() { agControl = document.getElementById("SilverlightControl"); /* To see the framerate displayed in the browser status bar */
agControl.settings.EnableFrameRateCounter = true; /* To see the redraw regions*/
agControl.settings.EnableRedrawRegions= true; }
Your Animation is stuttering What is the first step to debug?a. Decrease the framerateb. Identify the resource constraintc. Turn on Redraw Regions
Master Tip
While debugging render issues, always try to identify what is blocking the UI thread.
xperf
ETW – Event Tracing for WindowsTracing mechanism for both user-mode & kernel-mode appsSilverlight & CLR have embedded ETW events
Analyzes unmanaged callstackDescribes CPU cycles over time
xperfStep 1: Install Microsoft Windows Performance Toolkithttp://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
xperfDEMO
What happens on NavigationNavigate Download
HTMLDownload
JS
Create Plug-in
Control.Source is
XAP
Launch CLR
Extract Manifest
Load Assemblie
s
Create App
Object
Object Creates
Tree
Set Visual Root
XAML Parsing Uncovered!
URI-based resources are loaded when added to tree
AsynchCached via Browser
Build unique tree for each ControlPull in Text Stack
Text StackTextBlock & TextBoxGlyph CapabilitiesText Stack
Cross-OS consistencyGlyph rendering is optimized for readingAnti-aliasing, H/V dropout, Gamma Correction
These paths can be hit each tick if one is not carefulAccepted Fonts
Cross-OS, common set already on OSEA fonts, only if installed on machine
Silverlight Spy
View Visual Tree for Silverlight applicationsAlong 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.
Silverlight SpyDEMO
References
Performance Bloggershttp://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/
Session Resources
Windows Performance Toolkit: http://msdn.microsoft.com/en-us/performance
Silverlight http://www.silverlight.net
More Advanced Sessions http://2009.visitmix.com
धन्यवा�दઆભા�ર ধন্য�বা�দ
ਧੰ�ਨਵਾ�ਦ
ଧନ୍ୟ�ବା�ଦ
நன்றி�
ధన్య�వాదాలు� ಧನ್ಯ�ವಾ�ದಗಳು
നി�ങ്ങള്ക്ക്� നിന്ദി�
question & answer
© 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.