MICROSOFT_PRESS_EBOOK_PROGRAMMING_WINDOWS_8_APPS_WITH_HTML_CSS_AND_JAVASCRIPT_PDF

Comparing the Results
The Image Manipulation example in this chapter’s companion content contains equivalent code in
JavaScript, C#, and C++ to perform a grayscale conversion on image pixels. Taking a timestamp with
new Date() around the code of each routine, I’ve compiled a table of performance numbers below. 77
Average Milliseconds (five samples; dual-core 2.5GHz processor)
Image Size JavaScript C# C++
14.8K 8.4 7.2 6.4
231K 45.2 40 33.8
656K 76.6 65.8 54.4
1.98MB 798 728 598
4.57MB 796 750 637
A couple of notes and observations about these numbers and measuring them:
• When doing performance tests like this, be sure to set the build target to Release instead of
Debug. This makes a tremendous difference in the performance of C++ code, because the
compiler inserts all kinds of extra run-time checks in a debug build.
• When taking measurements, also be sure to run the Release app outside of the debugger (in
Visual Studio select Debug > Start Without Debugging). If you’ve enabled script debugging,
JavaScript will run considerably slower even with a Release build and could lead you to think that
the language is far less efficient than it really is.
• If you run similar tests in the app itself, you’ll notice that the time reported for the conversion is
considerably shorter than the time it takes for the app to become responsive again. This is
because the canvas element’s putImageData method takes a long time to copy the converted
pixels. Indeed, the majority of the time for the whole process is spent in putImageData and not
the grayscale conversion.
• Assuming the CPU load for the grayscale conversion is roughly identical between the
implementations, you can see that a higher performance component reduces the amount of
time that the CPU is carrying that load. Over many invocations of such routines, this can add up
to considerable power savings.
• The first time you use a WinRT component for any reason, it will take a little extra time to load
the component and its metadata. The numbers above do not include first-run timings. Thus, if
you’re trying to optimize a startup process in particular, this extra overhead could mean that it’s
best to just do the job in JavaScript.
With these numbers we can see that C# runs between 6–21% faster than the equivalent JavaScript
and C++ 25–46% faster. C++ also runs 13–22% faster than C#. This shows that for noncritical code,
77 You might be interested in a series of blog posts by David Rousset about building a camera app using HTML and
JavaScript. In Part 4 of that series he offers much more in-depth performance analysis for a variety of devices, using pixel
manipulation components much like we’ve been working with here.
729