To measure performance for Windows Store Apps, if you have no experience before, I would recommend you to look at this session first:
http://channel9.msdn.com/Events/Build/2012/4-103. He will explain the concepts to capture Windows Store Apps performance tips.
In short, XAML Operations are broken down into frames, and follows these 3 main steps:
1. Parsing: parse XAML for any objects
2. Layout: put objects, and determine their layout
3. Rendering: draw visible objects
To capture UI rendering time easier, think about the followings things:
1. Scenario: understand and know which parts that want to trace. Try to break down into atomic parts, it will be more clear for design scenario steps.
2. Steps of the trace scenario: it will notice us where our trace begins or ends in the trace file.
3. If in the same scenario contains sub parts such as loading items then scrolling down to the last items, try to make a self-marker (known by yourself) to separate sub tasks clearly.
4. When draw objects don't have to be re-draw, Frame will not be produced. Mouse interaction will produce frames only it trigger events on specific objects such as mouse over on objects then that object will have hover animation (re-draw frames).
Here is a command to capture UI Frame behavior:
@if %_echo%!==! echo off
set UserOptions=-BufferSize 1024 -MinBuffers 32 -MaxBuffers 32 -Buffering
set KernelOptions=-BufferSize 1024 -MinBuffers 64 -MaxBuffers 64 -Buffering
xperf -start xaml_user -on "Microsoft-Windows-XAML::5"+perftrack %UserOptions%
xperf -on base+cswitch %KernelOptions%
xperf -m BeginTrace
echo Event listeners started, run desired scenario then press any key
pause
xperf -m EndTrace
echo stopping xaml_kernel...
xperf -flush -f xaml_kernel.etl
xperf -stop
echo stopping xaml_user...
xperf -flush xaml_user -f xaml_user.etl
xperf -stop xaml_user
echo merging to xaml_merged.etl...
xperf -merge xaml_user.etl xaml_kernel.etl xaml_merged.etl
The command you see is a xperf command to capture XAML behavior which we can use it to monitor UI Frame Rendering time.
Now, let's see the real example. I will use
Kona project in codeplex to demonstrate how to trace UI Rendering time and FPS. You can install and follow the example scenario I given.
Example Scenario:
Capture UI rendering time of Bikes Category page, then scroll to the right and
left
Steps:
- Click at the header Bikes
category
- Waiting for all items are
loaded into the page
- Scroll page to the right
using mouse wheel
- Scroll page to the left using
mouse wheel
Open trace file
using WPA (Windows Performance Analyzer)
- On the left side select
System Activity, then there are more items expanded.
- Select Generics events, an
analysis tab will be shown.
- Select Provider Name Microsoft-Windows-XAML.
- Select Task Names that
related to the scenario e.g. Frame, PointerDown, PointerUp, PointerLeave,
PointerUpdate, PointerWheel.
- Right click, and select
filter selection.
Analyze trace file
- We know that scenario start
from the first click at Bikes category header, and page will be navigated
after mouse is up then we do long wait for UI rendering. So, we know
immediately when it starts and stops.
- Zoom in, and we know that
page is rendered after XAML is parsed. So, the Frame interval followed
ParseXaml is the UI rendering frames for drawing objects on the screen
(Duration 1.1 seconds).
- The next sub part is after we
do long wait and begin-end using mouse wheel. We can easily look at where
PointerWheel start and stop that is the interval for scrolling items to
right and left. To measure scrolling, it is difficult to measure in term
of finding the longest gap between frames or longest interval because of
UI thread will not produce frames when no re-draw objects (need to scroll
mouse wheel accurately and continuously), which lead to calculate using
FPS instead.
Calculate FPS UI
Thread
- In some scenarios, they don't
create or load any objects just move or animate around the page. In order
to measure it and detect UI glitch in overall using FPS (frames per
second) is may be a good choice.
- From scrolling, zoom in to
that part. And open Frame tab to see how many frames in that time
range.
- There are 300 frames during
6.77 seconds, so the scrolling FPS is 44.3.
In conclusion, I still don't know the best way to trace UI glitch or at least find out the root problem if it is glitched yet (to know it is glitched because of what). However, based on the link I gave above, we can adjust the number of elements shown on the screen and remove overdraw elements or animations to improve application performance.
Last but not least, information in this post, I have tried by myself and no guarantee that this is right or wrong. Please read and consider by yourself.
