Also, remember that AJAX responses will benefit from many of the
same optimization techniques recommended for standard responses.
Be sure to apply cache headers, minification, gzip compression, resource
consolidation, among others, to your
AJAX responses.
Ease of implementation: Difficult to
quantify, as this technique is very application specific. Because of cross-domain issues, you would need to use
XHR2, as well as control the external
domain to make cross-domain XHR
requests.
Adapt to the Network Connection.
Especially with mobile networks that
may charge extra for using more bandwidth, certain techniques should be
used only when combined with code
to detect the type of connection. For
example, preloading resources in anticipation of future requests is usually
smart, but it may not be a responsible
strategy if the user’s bandwidth is metered and some of those resources may
never be needed.
On Android 2. 2+, the navigator.
connection.type property returns values that allow you to differentiate
Wi-Fi from 2G/3G/4G connections.
On Blackberry, blackberry.network
provides similar information. In addition, server-side detection of User-Agent header data or other information embedded in requests can alert
your application to the quality of the
connection in use.
Ease of implementation: Advanced.
The Network Information API has
changed recently. 11 Rather than defining the network as Wi-Fi, 3G, and so
on, it now gives information about
the bandwidth, with examples such as
“very-slow, slow, fast and very-fast.”
There is a property that tries to tell
the estimated MB/s, and a Boolean
“metered” measurement that does
its best to be correct, but this is very
difficult for a browser to determine.
Measuring somewhere and adapting
is probably still the best idea but is
quite challenging.
Use the HTML5 Web Worker Spec
for Multithreading. The Web Worker
specification in HTML5 introduces
multithreaded concurrent execution
to the world of JavaScript programming. In addition, this particular implementation of multithreading elim-
aJaX enables
a page to display
updated data
in a section
of a page without
reconstructing
the entire page.
inates problems that have plagued
developers working with multiple
threads on other platforms—
specifically, problems that occur when one
thread modifies a resource that is also
being used by another thread. In Web
Worker code, spawned threads cannot
access the resources of the main user-interface (UI) thread.
For improving the performance of
mobile sites, Web Worker code can
be valuable for preloading resources
that a user is likely to need to complete future actions, especially when
the user’s bandwidth is not metered.
With the limited processor capabilities of mobile devices, extensive preloading can interfere with UI responsiveness in the current page. Using
multithreaded code that employs
Web Worker objects (and possibly localStorage to cache the data), operations that preload resources can
execute on a separate thread without
impacting current UI performance.
Note that the Web Worker spec,
while implemented in Android since
2.0, was not supported on the iPhone
until iOS 5. On the desktop, Internet
Explorer was the laggard, adding support for Web Worker only in IE 10.
Ease of implementation: Moderate.
While this technique is not incredibly difficult to implement, there are
some restrictions to Web Workers that
make them difficult to find places for.
They do not have access to the page’s
DOM and cannot modify anything on
the page. Making this practice work
requires a very specific type of background calculation or process that fits
well as a background Web Worker.
Replace Click Events with Touch
Events. On touchscreen devices, the
onclick event does not fire immediately when a user taps the screen.
Instead, the device waits up to half a
second (300 milliseconds on most devices), giving the user a chance to initiate some other gesture rather than a
click. This delay, however, can significantly impede the responsive performance that users expect. To fix this,
use the touchend event instead. That
event fires immediately when the user
taps the screen.
To ensure the user does not experience unexpected behavior, you may
also want to use the touchstart and
touchmove events. For example, do