56 msdn magazine WinJS on Windows 8.1
Workers can access the Windows Runtime APIs, which means they
can write to app data, issue toasts and tile updates, or even save fi les.
Th ey’re well-suited for background tasks that require no input from
the user, are computationally expensive or require multiple calls to a
Web service. If you want more information about the Web Worker
API, see the Worker reference documentation at bit.ly/1fl lmip.
Th e benefi t of using a Worker
thread is that UI responsiveness
won’t be affected by the back-
ground work. The UI remains
responsive and practically no
frames are dropped. Also, Work-
ers can import other JavaScript
libraries that don’t rely on the
DOM, including the fundamental
library for WinJS (base.js). So, you
can, for instance, create promises
in a Worker thread.
On the other hand, Workers
aren’t a cure-all for performance
issues. Th e cycles for the Worker
threads are still being allocated
from the total CPU cycles avail-
able on the machine, even if they
aren’t coming from the UI thread.
You need to be judicious about
using Workers.
For the next test case, I’ll use
a Worker thread to retrieve a
collection of images from the Library of Congress and populate
a ListView control with those pictures. First, I’ll add a new script
to store the Worker thread named LOC-worker.js to my project,
as follows:
(function () {
"use strict";
self.addEventListener("message", function (message) {
importScripts("//Microsoft.WinJS.2.0/js/base.js", "searchLoC.js");
LOCPictures.getCollection(message.data).
then(
function (response) {
postMessage(response);
});
});
})();I use the importScripts function to bring base.js from the WinJS
library and seachLOC.js scripts into the Worker’s context, making
them available for use.
Next, I add a new Page Control item named worker.html to my
project (/pages/worker/worker.html). I add a little markup within
the
and defi ne its layout. Th e control will be created dynamically when
the Worker returns:
<div id="collection" class='searchList'>
<progress class="win-ring"></progress>
</div>
<div id='searchResultsTemplate' data-win-control='WinJS.Binding.Template'>
<div class='searchResultsItem'>
<img src='#' data-win-bind='src: pictureThumb' />
<div class='details'>
<p data-win-bind='textContent: title'></p>
<p data-win-bind='textContent: date'></p>
</div>
</div>
</div>Finally, I add the code to worker.js that creates a new Worker
thread and then populates the HTML based on the response. Th e
code in worker.js is shown in Figure 18.
When you run the app and navigate to the page, you’ll notice
minimal lag between navigation and populating the ListView
Figure 17 HTML UI Responsiveness After Using Scheduler.js
Adding new elements to the DOM on an HTML page
can hurt performance, particularly if you’re adding more than a
handful of new elements. The page needs to recalculate the
positions of the other items on the page, then reapply styles, and,
fi nally, repaint the page. For example, a CSS instruction that sets
the top, left, width, height, or display style for an element will cause
the page to be recalculated. (I recommend using either the built-in
animation features in WinJS or the animation transforms available
in CSS3 for manipulating the position of HTML elements instead.)
Yet injecting and displaying dynamic content is a common
app design. Your best option for performance, when possible, is
to use the data binding provided by the platform. Data binding in
WinJS is optimized for a quick and responsive UX.
Otherwise, you’ll need to decide between injecting raw HTML
as a string into another element with innerHTML, or adding
individual elements one at a time using createElement and
appendChild. Using innerHTML will most often provide better
performance, but you might not be able to manipulate the HTML
once it’s been inserted.
In my examples, I chose the $.append method in jQuery. With
append, I can pass along raw HTML as a string and get immediate
programmatic access to the new DOM nodes. (It also provides
pretty good performance.)
Manipulating the DOM
Affects UI Responsiveness