Wednesday, 27 April 2011

HTML5: Prefetching

It was just a few days ago that I felt like building an app using HTML5 features. Yes I myself feel it funny- sometimes we want to do something to 'use' a particular technology....It becomes the case of 'app for technology' rather than ideal technology for app! I decided to use HTML5 Prefetch along with some other HTML5 features.

Currently FireFox and Chrome support this feature. While the browser is idle content gets downloaded in the background...no special triggers and no ajax requests! It applies to http as well as https. You can prefetch just an image or even a whole web page, simply add rel="prefetch" to link tag. Also no blown up figures in case of analytics based on JS like Google Analytics.

<!-- Only image -->
<link rel="prefetch" href="/images/flower.jpg" />

<!-- Whole web page -->
<link rel="prefetch" href="http://code.google.com/more/table/" />

Mozilla gifts us with sweet dish of rel="prefetch alternate stylesheet". It also gives us permission to stop prefetching.
user_pref("network.prefetch-next", false);

How nice it would be if site (usually like the online shopping ones which are heavier with product images) prefetches next page data while we are busy gazing at current page images! When we navigate to next page we don't have to wait for it to load. I'm impressed (even though I could not test performance increase foolproof using Firebug or Developer Tools :) ). Now my only concern is open issues being logged related to prefetching for Chrome.....and my favorite browser is Chrome! It starts prefetching even when network stack is busy. But I'm quiet optimistic that these issues will be closed soon( plus Chrome will gives its users some more additional gifts of prefetching).

What do you think prefetching will bring revolution in next gen websites?

No comments:

Post a Comment