0
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 a...
Radio networks are
       slow
The main issue is not speed but
latency.

4 Mb downloaded over a single
request: 2 seconds....
A 304 reply code is nearly as bad as
a 200

404 replies are rarely cached. Kill
them all.

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

Everything in the manifest is ...
Mobile browsers have
   unpredicable caching
         strategy


Even on the same operating system

iOS 4.1 on iPhone 3G d...
JavaScript to the
     rescue!
Slower may feel
       faster
Mobile devices have small screens.

Load visible content first, and use XHR to
load the rest....
JS + HTTP caching
   = not so bad

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

Use XHR to re...
HTTP cache is quite
  unpredictable
No control over actual eviction.

Might feel good, even for large
requests, until ever...
Localstorage is the
     real shit
Seamlessly keeps over 2.5 Mb of data
per domain.

Mostly persistent.

Provides a flexibl...
if (window.localStorage["geoapi_js-v5"]) {
 window.eval(window.localStorage["geoapi_js-v5"]);
} else {
 var xhr = new XMLH...
Client-side
fragment caching
Dramatically improves performance of a
non-AJAXified page with minor changes.

Use localstorag...
<!doctype html>
<html>
<head>
 <title>Transparent client-side fragment cache demo</title>
</head>
<body>
<!--fragment navb...
<section id="hey">
   I ain't no <a href="/">fragment</a>!
 </section>


gets dynamically rewritten as:


 <section id="he...
<!doctype html>
<html>
<head>
 <title>Transparent client-side fragment cache demo</title>
</head>
<body>
<!--cached navbar...
http://00f.net/2010/09/22/
 transparent-client-side-
     fragment-cache/
Frank
@jedisct1
Upcoming SlideShare
Loading in...5
×

Abusing Javascript to speedup mobile web sites

5,900

Published on

A few ways to speedup mobile web sites using different caching techniques.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,900
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
96
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Abusing Javascript to speedup mobile web sites"

  1. 1. Abusing Javascript to speedup mobile web sites.
  2. 2. 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.
  3. 3. 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 files: 8 seconds.
  4. 4. 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.
  5. 5. 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.
  6. 6. 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.
  7. 7. JavaScript to the rescue!
  8. 8. Slower may feel faster Mobile devices have small screens. Load visible content first, 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.
  9. 9. 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.
  10. 10. 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).
  11. 11. Localstorage is the real shit Seamlessly keeps over 2.5 Mb of data per domain. Mostly persistent. Provides a flexible client-controlled cache for any resource. Trivial to implement.
  12. 12. 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(); }
  13. 13. Client-side fragment caching Dramatically improves performance of a non-AJAXified page with minor changes. Use localstorage to store common fragments. Tell the server about known fragments so that only identifiers from the previous page are sent, in place of the actual content.
  14. 14. <!doctype html> <html> <head> <title>Transparent client-side fragment cache demo</title> </head> <body> <!--fragment navbar-290d996311209f1897516b2caa2cc611--> <nav> Navigation bar </nav> <!--/fragment--> <!--fragment ads-bd779001f9cad4bfb74e563eb6bbf5c5--> <div id="ads"> Ads </div> <!--/fragment--> <section id="hey"> I ain't no <a href="/">fragment</a>! </section> <script src="disco.js"></script> </body> </html>
  15. 15. <section id="hey"> I ain't no <a href="/">fragment</a>! </section> gets dynamically rewritten as: <section id="hey"> I ain't no <a href="/? _fragments=navbar-290d996311209f1897516b2caa2cc611+ads- bd779001f9cad4bfb74e563eb6bbf5c5">fragment</a>! </section>
  16. 16. <!doctype html> <html> <head> <title>Transparent client-side fragment cache demo</title> </head> <body> <!--cached navbar-290d996311209f1897516b2caa2cc611--> <!--cached ads-bd779001f9cad4bfb74e563eb6bbf5c5--> <section id="hey"> I ain't no <a href="/">fragment</a>! </section> <script src="disco.js"></script> </body> </html>
  17. 17. http://00f.net/2010/09/22/ transparent-client-side- fragment-cache/
  18. 18. Frank @jedisct1
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×