Saturday, November 17, 2012

jQuery Refresh Page Extension

There are three scenarios when a web page refreshes:

  1. Honors your cache (does not make resource requests).
  2. Verifies your cache (causes resources to generate 304s).
  3. Ignores your cache (causes resources to generate 200s).

For a simple page refresh you want your webpage to generate as few server requests as possible. There any many ways to refresh a page in JavaScript, however they can all have different and sometimes undesirable results. Let's look some code snippets of the aforementioned scenarios in reverse order.

3. Ignore Cache


This scenario is not usually necessary unless you know that the resources of your page have been updated. Also, using a good minification framework is probably a better way of ensuring that your clients always consume the latest resources with every request.

2. Verify Cache


This is obvious similar to the first call, only we are calling an override of the reload method that tells the browser to respect cache. However, this will still cause a series of 304 requests!

1. Honor Cache

window.location.href = window.location.href;

This is obviously a very simple way to refresh the page, and it will honor cache without forcing 304 requests. However, this will not work if your includes a hash tag.

jQuery Plugin

This little jQuery plugin will refresh the page and try to cause as few resource requests as possible.

(function($) {
    $.refreshPage = refreshPage;
    function refreshPage(reload) {
        if (reload === true) {
        var i = window.location.href.indexOf('#');
        if (i === -1) {
            // There is no hash tag, refresh the page.
            window.location.href = window.location.href;
        } else if (i === window.location.href.length - 1) {
            // The hash tag is at the end, just strip it.
            window.location.href = window.location.href.substring(i);
        } else {
            // There is a legit hash tag, reload the page.
Shout it


No comments:

Post a Comment

Real Time Web Analytics