42 msdn magazine
In exploring how to build more effi cient Windows Store apps,
I fi rst looked at error handling. In this second article, I’ll examine sev-
eral techniques for improving a Windows Store app’s performance,
focusing on memory usage and HTML UI responsiveness. I’ll intro-
duce the new predictable object lifecycle model in the Windows
Library for JavaScript on Windows 8.1 (WinJS 2.0). Then, I’ll
examine Web Workers and the new Scheduler API in WinJS 2.0,
both of which complete background tasks without locking the UI.
As in the previous article, I’ll present both diagnostic tools for fi nd-
ing the problems and solutions for addressing the issues uncovered.
I’ll assume you’re fairly familiar with building Windows Store
apps using JavaScript. If you’re relatively new to the platform, I
suggest beginning with the basic “Hello World” example (bit.ly/
vVbVHC) or, for more of a challenge, the “Hilo” sample for JavaScript
(bit.ly/SgI0AA). If you haven’t read the previous article, you can fi nd
it at msdn.microsoft.com/magazine/dn519922.
Setting up the Example
Th roughout this article, I draw on specifi c examples you can test
in your own code. You can follow along or download the complete
code to peruse at your leisure.
I’m using diff erent test cases than in the previous article, so you’ll want
to add some new buttons to the global NavBar if you’re following along.
(You can just start a brand-new Navigation app project if you prefer—
that works, too.) Th e new NavBarCommands are shown in Figure 1.
For these test cases, I use the more realistic scenario of an app
that surfaces content from the Web. Th is app fetches data from the
United States Library of Congress Print & Photographs Online
Catalog Web service (1.usa.gov/1d8nEio). I’ve written a module that
wraps calls to the Web service in promise objects and defi nes classes
for storing the received data. Figure 2 shows the module, in a fi le
titled searchLOC.js (/js/searchLOC.js).
Remember to link to the searchLOC.js fi le from default.html at
the root of your project before you try to call into it.
Disposing of Objects
In JavaScript, an object remains in memory as long as it can be
reached through a lexical environment or chain of references.
Once all references to the object have been removed, the Gar-
bage Collector de-allocates memory from the object. As long as a
reference to the object remains, the object stays in memory. A
WINJS ON WINDOWS 8.1
Build More Effi cient
Windows Store Apps
Using JavaScript:
Performance
Eric Schmidt
This article discusses:
- Setting up a sample app that surfaces content from the Web
- Disposing of objects and checking for memory leaks
- Implementing the dispose pattern in WinJS
- Using the Scheduler and Web Worker APIs
Technologies discussed:
Windows 8.1, Windows Library for JavaScript 2 .0, Visual Studio 2013
Code download available at:
msdn.microsoft.com/magazine/msdnmag0 214