52 msdn magazine WinJS on Windows 8.1
Desktop and then click Stop in the diagnostics session tab. Figure
14 displays the results.
I see the frame rate dropped to 3 FPS for roughly half a
second. I select the period of low frame rate to see more details
(see Figure 15).
At this point in the timeline (Figure 15), the UI thread is
absorbed in running scheduler.js. If you look closely at the
timeline details, you see several user marks (orange “tick”
marks). These indicate specific calls to performance.mark in the
code. In scheduler.js, the first call to performance.mark occurs
when scheduler.html loads. Populating each HubSection
control with content invokes a subsequent call. From the results,
more than half of the time spent evaluating scheduler.js occurred
between when I navigated to the
page (the first user mark) and
when the sixth HubSection was
populated with images (the last
user mark).
(Keep in mind results will vary
depending on your hardware. Th e
HTML UI responsiveness tests
shown in this article were run
on a Microsoft Surface Pro with
a third-generation Intel Core i5-
3317U processor, running at 1.7Ghz,
and Intel HD Graphics 400. )
To reduce lag, I might refactor
my code so the HubSection con-
trols are populated in a staggered
manner. Users see content in the
app soon after they navigate to
it. The content for the first one
to two hub sections should load
immediately after navigation
and the other HubSections can
load aft erward.
Scheduler
JavaScript is a single-threaded environment, meaning everything
is on the UI thread. In WinJS 2.0, Microsoft introduced the WinJS.
Utilities.Scheduler to organize work performed on the UI thread
(see bit.ly/1bFbpfb for more information).
Th e Scheduler creates a single queue of jobs to be run on the
UI thread in the app. Jobs are completed based on priority, where
higher priority jobs can preempt or postpone lower-priority jobs.
Jobs are scheduled around actual user interaction on the UI thread,
where the Scheduler slices up the time between calls and completes
as many of the queued jobs as it can.
As mentioned, the scheduler executes jobs based on their
priority, as set using the WinJS.Utilities.Scheduler.Priority
Figure 1 4 HTML UI Responsiveness for Scheduler.html
Figure 13 Populating the Hub Control Dynamically
(function () {
"use strict";var dataRequest;WinJS.UI.Pages.define("/pages/scheduler/scheduler.html", {
ready: function (element, options) {
performance.mark("navigated to scheduler");dataRequest = Data.featuredCollections.
then(function (collections) {
performance.mark("got collection");var hub = element.querySelector("#featuredHub");
if (!hub) { return; }var hubSections = hub.winControl.sections,
hubSection, collection;for (var i = 0; i < hubSections.length; i++) {
hubSection = hubSections.getItem(i);
collection = collections.getItem(i);
populateSection(hubSection, collection);
}
});},unload: function () {
dataRequest.cancel();
}// Other PageControl members ...
});function populateSection(section, collection) {
performance.mark("creating a hub section");
section.data.header = collection.data.title;var contentElement = section.data.contentElement;
contentElement.innerHTML = "";var pictures = collection.data.pictures;
for (var i = 0; i < 6; i++) {$(contentElement).append("<img src='" + pictures[i].pictureThumb + "' />");
(i % 2) && $(contentElement).append("<br/>")
}
}
})();