Create mobile apps with HTML5, JavaScript and Visual Studio

46 msdn magazine WinJS on Windows 8.1

2. With the app project running, navigate to the dis-

pose page, then switch to the desktop. In Visual

Studio, in the current diagnostic session (a tab titled

“Report*.diagsession”), click Take Heap Snapshot.

3. Switch back to the running app. In the search

box, enter a query (for example, “Lincoln”) and

then press Enter. A ListView control appears that

displays the image search results.

4. Switch back to the desktop. In Visual Studio,

in the current diagnostic session (a tab titled

“Report*.diagsession”), click Take Heap Snapshot.

5. Switch back to the running app. Click the Dis-

pose button. The custom control disappears

from the page.

6. Switch back to the desktop.

In Visual Studio, in the cur-

rent diagnostic session (a tab

titled “Report*.diagsession”)

click Take Heap Snapshot and

then click Stop. Th ere are now

three snapshots listed in the

diagnostic session, as shown

in Figure 6.

With the diagnostics data in hand,

I can analyze the memory usage of

the custom control. From a quick

glance at the diagnostics session, I

suspect that “disposing” the control

didn’t free up all of the memory

associated with it.

In the report, I can examine the

JavaScript objects on the heap for

each snapshot. I want to know what

remained in memory aft er the cus-

tom control was removed from the

DOM. I’ll click the link associated

with the number of objects on the

heap in the third snapshot (Snapshot

#3 in Figure 6).

First I’ll look at the Dominators

view, which shows a sorted list of the

objects by retained size. Th e objects

consuming the most memory that are

potentially easiest to free are listed

at the top. In the Dominators view,

I see a reference to the