Client Caching

I work for a design company that has implemented this on multiple sites. We've been looking at the performance hit on the server for having every cached page call back to the server, and it's not something we like. It's certainly better than running totally uncached pages, but it could be better.

I should explain our use case so our usage makes sense. We tend to run page_cache on, then ajaxblocks replaces one single block, maybe two blocks on the page with something specific to the user. In our case, it's often 'weather in your area' or 'your closest retailer'. They don't change between pages, and are prime candidates for caching per user. The code I've worked up for you to review won't work if it's cache_per_page or no cache blocks, but for cache_per_user and cache_global blocks, it should be a solid performance increase.

I spent a few hours and scraped together a small fork for you to review. It uses json2.js, jquery.cookie.js, and jquery.jsoncookies.js. These likely should be library level requirements, rather than included directly in this module, but for demo purposes it works. The idea is pretty simple:

1. Hit the server via ajaxblocks standards.
2. Keep a list of all blocks eligible to be cached cookie: ajaxBlocks
3. Write each cachable block's data object to a cookie using jquery.JSONcookie()
   Note that each data object is being stored seperately due to cookie byte size limitations. It's possible that the full data object would not fit in browser cookies as the JSONcookie encoding increases byte size considerably.
4. On the next page load, ajaxblocks.js checks if the ajaxBlocks cookie exists. If it does, it loads each block's data out of the cookies, and sends along to be replaced in the html, without hitting the server again.

It's a skeleton right now, as I know there's fringe cases and logic to consider for things I've not thought of. But, I thought you might appreciate a look, and I might be given some time to work with you to get this into the a future release of ajax blocks. So, what does the community think?

Most of the changes went into the js file, so I'm putting it up here for easy review, and a full zip of the project.

Note: I added jquery.cookie.js into the project at the very end. The logic should be adjusted to remove the extra functions if they are not used. However I left them, in case you want to somehow get around adding jquery plugins instead.

/**
 * @file
 * Loads content of blocks via AJAX just after page loading, updates Drupal.settings, reattaches behaviors.
 */

Drupal.settings.ajaxblocks_cookie = 1;

(function ($) {

Drupal.ajaxblocksSendRequest = function (request, delay) {
  if (delay) {
    setTimeout(function () {Drupal.ajaxblocksSendRequest(request, 0);}, delay);
    return;
  }
  var ajaxBlocksCookie = null;
  var ajaxCookieContent = null;
  
  console.log('Drupal.ajaxblocksSendRequest');
  // Check if the response is already stored in a cookie
  var ajaxCookie = Drupal.ajaxblocksReadCookie('ajaxBlocks');
  console.log(ajaxCookie);
  
  if( Drupal.settings.ajaxblocks_cookie && ajaxCookie != null ){
    console.log('Used cookie data');
    // Use the stored object
    var ids = ajaxCookie.split(',');
    console.log(ids);
    jQuery.each(ids, function(index, value){
      var ajaxCookieData = jQuery.JSONCookie('ajaxBlocks-' + value);
      console.log(value);
      console.log(ajaxCookieData);
      Drupal.ajaxblocksSetBlockContent(value, ajaxCookieData);
    });
  } else {
    // Go back to the server
    $.ajax({
      url: ((typeof Drupal.settings.ajaxblocks_path !== 'undefined') ? Drupal.settings.ajaxblocks_path : (Drupal.settings.basePath + "ajaxblocks")),
      type: "GET",
      dataType: "json",
      data: request + '&nocache=1',
      cache: false,
      success: function (data) {
        // Store the results of the response
        //Drupal.ajaxblocksCreateCookie( 'ajaxBlocks', data, 1 );
        //console.log(data);
        //console.log(data.toSource(), data.toString().length);
          //console.debug(data.toSource());
        //
      
        // Replaces the placeholder divs by the actual block contents returned by the AJAX call,
        // executes the extra JavaScript code and attach behaviours if the apply to the blocks.
        Drupal.freezeHeight();
        var ajaxCookie = [];
        for (var id in data) {
          Drupal.ajaxblocksSetBlockContent(id, data[id]);
          if(  Drupal.settings.ajaxblocks_cookie ) {
            ajaxCookie.push(id);
            console.log(data[id]);
            jQuery.JSONCookie('ajaxBlocks-' + id, data[id], {path: '/'});
            console.log('Created cookie: ' + 'ajaxBlocks-' + id);
          } 
        }
        if(  Drupal.settings.ajaxblocks_cookie ) {
          Drupal.ajaxblocksCreateCookie( 'ajaxBlocks', ajaxCookie.toString(), 1 );
        }
        Drupal.unfreezeHeight();
        console.log('Retrieved from server.');
      }
    });
  }
}

Drupal.ajaxblocksSetBlockContent = function (id, data) {
  console.log('ajaxblocksSetBlockContent');
  console.log(data);
  if (data['delay']) {
    setTimeout(function () {data['delay'] = 0; Drupal.ajaxblocksSetBlockContent(id, data);}, data['delay']);
    return;
  }
  var wrapper = $('#block-' + id + '-ajax-content');
  if (!wrapper) return;
  var context = wrapper.parent();
  Drupal.detachBehaviors(context);
  if (!context) return;
  $('#block-' + id).addClass('ajaxblocks-loaded');
  context.html(data['content']);
  if (data['ajaxblocks_settings']) $.extend(true, Drupal.settings, data['ajaxblocks_settings']);
  Drupal.attachBehaviors(context);
}

Drupal.ajaxblocksCreateCookie = function(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}


Drupal.ajaxblocksReadCookie = function(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

$(document).ready(function () {
  if (typeof Drupal.settings.ajaxblocks !== 'undefined') {
    // Drupal.settings.ajaxblocks = "blocks=custom-nearest_location&path=node/4"
    // Drupal.settings.ajaxblocks_delay = 3000
    Drupal.ajaxblocksSendRequest(Drupal.settings.ajaxblocks, Drupal.settings.ajaxblocks_delay);
  }
});

$(window).load(function () {
  if (typeof Drupal.settings.ajaxblocks_late !== 'undefined') {
    Drupal.ajaxblocksSendRequest(Drupal.settings.ajaxblocks_late, Drupal.settings.ajaxblocks_late_delay);
  }
});

})(jQuery);