MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

The yellow bars indicate execution of the app’s JavaScript—that is, time spent inside the renderer.
The beige bars indicate the time spent in DOM layout, and aqua bars indicate actual rendering to the
screen. As you can see, when elements are added one by one, there’s quite a bit of breakup in what
code is executing when, and the kicker here is that most display hardware refreshes only every 10–20
milliseconds (50–100Hz). As a result, there’s lots of choppiness in the visual rendering.
After making improvements, the chart can look like the one below, where the app’s work is
combined in one block, thereby significantly reducing the DOM layout process (the beige):
As for all the other little bits in these graphics, they come from the performance tool called XPerf
that’s part of the Windows SDK (see sidebar). Without studying the details, what ultimately matters is
that we understand the steps you can take to achieve these ends—namely, the different forms of
renderers that you can employ as demonstrated in the sample.
Sidebar: XPerf and msWriteProfilerMark
The XPerf tool in the Windows SDK, which is documented on Windows Performance Analysis
Tools, can very much help you understand how your app really behaves on a particular system.
Among other things, it logs calls you make to msWriteProfilerMark, as you’ll find sprinkled
throughout the WinJS source code itself. For these to show up in xperf, however, you need to start
logging with this command:
xperf –start user –on PerfTrack+Microsoft-IE:0x1300
and end logging with this one, where is any path and filename of your
choosing:
xperf –stop user –d .etl
Launching the .etl file you save will run the Windows Performance Analyzer and show a graph
of events. Right-click the graph, and then click “Summary Table”. In that table, expand
Microsoft-IE and then look for and expand the Mshtml_DOM_CustomSiteEvent node. The Field3
column should have the text you passed to msWriteProfilerMark, and the Time(s) column will
help you determine how long actions took.
227