Abusing Javascript to speedup mobile web sites

Abusing Javascript to
speedup mobile web sites.

Mobile browsers are
dog slow
Only if they are used to render web
sites designed for desktop browsers.

One code for any browser and
device is actually a dream.

Bad code tends to have more impact
on mobile browsers.

Radio networks are
slow
The main issue is not speed but
latency.

4 Mb downloaded over a single
request: 2 seconds.

Same data downloaded as 20 small
ﬁles: 8 seconds.

A 304 reply code is nearly as bad as
a 200

404 replies are rarely cached. Kill
them all.

Proper caching of anything cacheable
is required

Don't overestimate the browser cache
and HTTP keep-alive.

HTML5 cache
manifest
Doesn't bring much over proper HTTP caching
for online apps.

Everything in the manifest is preloaded even
when useless for the current page. Double-
sided sword.

Requests from a cached page have no referrer.

No granularity: everything depends on the
freshness of the manifest.

Mobile browsers have
unpredicable caching
strategy

Even on the same operating system

iOS 4.1 on iPhone 3G doesn't cache
some tiny content that could really
be cached. And that the same OS on
other devices does.

JavaScript to the
rescue!

Slower may feel
faster
Mobile devices have small screens.

Load visible content ﬁrst, and use XHR to
load the rest.

Don't wait until the user scrolls, though.
Latency + tendency to scroll and zoom on
mobile devices would make the page feel
slow.

Provide feedback.

JS + HTTP caching
= not so bad

Don't repeat yourself: use static JS to
render common, static fragments.

Use XHR to render dynamic parts that
are not immediately visible.

Different parts can have different
expiration.

HTTP cache is quite
unpredictable
No control over actual eviction.

Might feel good, even for large
requests, until everything is evicted.

The server controls the cache, not
the client (which could come in
handy to avoid inconsistencies).

Localstorage is the
real shit
Seamlessly keeps over 2.5 Mb of data
per domain.

Mostly persistent.

Provides a ﬂexible client-controlled
cache for any resource.

Trivial to implement.

if (window.localStorage["geoapi_js-v5"]) {
window.eval(window.localStorage["geoapi_js-v5"]);
} else {
var xhr = new XMLHttpRequest;
xhr.onreadystatechange = function() {
  if (this.readyState != 4) {
    return;
  }
  if (this.status != 200) {
    alert("Erreur reseau: " + this.status);
    return;
  }
  try {
    window.localStorage["geoapi_js-v5"] = this.responseText;
  } catch (e) { }
  window.eval(this.responseText);
};
xhr.open("GET", "geoapi-v5.js", true);
xhr.send();
}

Client-side
fragment caching
Dramatically improves performance of a
non-AJAXiﬁed page with minor changes.

Use localstorage to store common
fragments.

Tell the server about known fragments so
that only identiﬁers from the previous
page are sent, in place of the actual
content.

<!doctype html>
<html>
<head>
<title>Transparent client-side fragment cache demo</title>
</head>
<body>

<nav>
Navigation bar
</nav>


<div id="ads">
Ads
</div>

<section id="hey">
I ain't no <a href="/">fragment</a>!
</section>
<script src="disco.js"></script>
</body>
</html>

<section id="hey">
</section>

gets dynamically rewritten as:

<section id="hey">
I ain't no <a href="/?
_fragments=navbar-290d996311209f1897516b2caa2cc611+ads-
bd779001f9cad4bfb74e563eb6bbf5c5">fragment</a>!
</section>

<!doctype html>
<html>
<head>
<title>Transparent client-side fragment cache demo</title>
</head>
<body>


<section id="hey">
</section>
<script src="disco.js"></script>
</body>
</html>

http://00f.net/2010/09/22/
transparent-client-side-
fragment-cache/

Abusing Javascript to speedup mobile web sites

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Similar to Abusing Javascript to speedup mobile web sites

Similar to Abusing Javascript to speedup mobile web sites (20)

More from Frank Denis

More from Frank Denis (6)

Recently uploaded

Recently uploaded (20)

Abusing Javascript to speedup mobile web sites