JavaScript Legacy — Optimization through Conditional Compilation

This might be an ultimate optimization weapon. And it might even be considered as a non-hack, not-a-trick, etc.

As an good and simple example, in jQuery there is a function to make and return XHR, depending on which is the current browser host.

// Create the request object; 
// Microsoft failed to properly implement the XMLHttpRequest in IE7, 
// so we use the ActiveXObject when it is available
// This function can be overriden by calling jQuery.ajaxSetup
 xhr: function() {
          return window.ActiveXObject ? 
                    new ActiveXObject("Microsoft.XMLHTTP") 
                   : new XMLHttpRequest();

Good logic, simple implementation. Yes, but… This function is called a lot and each time , precious microseconds are wasted to find out which version is to be used, made and returned.
And. Each time the result is the same, because this keeps on being called in the same browser session. What first springs out as an obvious optimization is this :
// Create the request object.
// Decide upon first pass which version is to be used.
// This function can be overriden by calling jQuery.ajaxSetup
 xhr: window.ActiveXObject ?
                // IE browsers 
            function() {  return new ActiveXObject("Microsoft.XMLHTTP") ; }
            :  // non IE browsers
            function() {  return  new XMLHttpRequest(); }

The condition above is evaluated only when the whole object in which ‘xhr’ resides gets evaluated and made. In jQuery case, this is hopefully only once, when jQuery is made in its closure.

But there is one more “ultimate” version I can think of. Even more optimized version we can write. This time we will use Microsoft JavaScript conditional compilation feature. It is part of javascript


when IE is the host browser.

ajaxSettings = {
xhr: function() { return new XMLHttpRequest(); }
//@cc_on , xhr: function() { return new ActiveXObject("Microsoft.XMLHTTP"); } 
/* in IE shows :
function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
in FF, Chrome, etc. shows:
function() { return new new XMLHttpRequest();  }

What is happening here? First we defined xhr() version for all the browsers but IE
xhr: function() { return new XMLHttpRequest(); }

Then comes the comment bellow it , which contains Microsoft JavaScript syntax that switches
on, the conditional compilation : “//@cc_on”. This also works inside another comment syntax and if in IE, uitside of comments, anywhere in javascript code.
So, if this comment is inside IE javascript, it will be made part of the source code, effectively overriding the previous version of xhr(). In IE the code will now look like this:
xhr: function() { return new XMLHttpRequest(); }
xhr: function() { return new ActiveXObject("Microsoft.XMLHTTP"); } 

The second version of xhr() will overwrite (aka override) the first version. The first version is erased, the second now exist, and is being used when called.

There you have it: an example of ultimate optimization. I very much doubt I have invented this. But neverhelles I will suggest it as an very effective mehanism for cross browser libraries.

Update 2009 Nov 25

There is one very elegant way to use condtional “compilation” to distinguish between IE and non-IE code:

if (/*@cc_on!@*/false ) {
        // IE code
} else {
      // non IE code

Simple and effective. In IE the above is parsed into :
// what IE sees
if (! false ) {
        // IE code always 
} else {
      // non IE code, never

While everywhere else code is parsed as :
// what everybody else sees
if ( false ) {
        // never reached : IE code 
} else {
      // non IE code: always reached

Arguably this is more code and also, this is if/else which is always executed but still in some situations this is very valid, and maybe not a “trick”.
Alternatively, you are wellcome to use the ultimate in JS conditional “compilation” :
  @if (@_jscript_version > 5.7)
  document.write("You are using IE8+");
@elif (@_jscript_version == 5.7 )

          if ( window.XMLHttpRequest )
            document.write("You are using IE7");
            document.write("You are using IE6");

  @elif (@_jscript_version == 5.6 )
    document.write("You are using IE6");

  @elif (@_jscript_version == 5.5)
    document.write("You are using IE5.5");

@else @*/
      document.write("This text is seen by: Firefox, IE 4.x, Chrome, Opera, Safari, etc)");

Enjoy ;)

Mask of Happines
Mask of Happines

6 thoughts on “JavaScript Legacy — Optimization through Conditional Compilation”

Comments are closed.