Mustache JS compiled functions

JavaScript performance comparison

Test case created by Joshua Peek

Preparation code

<script>
  window.source = "<div><h1 class='header'>{{header}}</h1><div class='a'>{{a}}</div><div class='b'>{{b}}<div class='c'>{{c}}<div class='d'>{{d}}<div class='e'>{{e}}<div class='f'>{{f}}</div></div></div></div></div></div>";
 
  window.template1 = function(obj) {
   var out, l1, l2, l3, l4, l5, l6, l7, stack, fetch, escape, isFunction;
   out = [];
   stack = [];
   stack.push(obj);
   fetch = function fetch(key) {
    var i, v;
    for (i = stack.length - 1; i >= 0; i -= 1) {
     v = stack[i][key];
     if (v) {
      return v;
     }
    }
   };
   escape = function escape(value) {
    return ('' + value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   };
   isFunction = function isFunction(obj) {
    return !!(obj && obj.constructor && obj.call && obj.apply);
   };
 
   out.push("<div><h1 class='header'>");
   l1 = fetch("header");
   if (isFunction(l1)) {
    l1 = l1.call(stack[stack.length - 1]);
   }
   out.push(escape(l1));
   out.push("</h1><div class='a'>");
   l2 = fetch("a");
   if (isFunction(l2)) {
    l2 = l2.call(stack[stack.length - 1]);
   }
   out.push(escape(l2));
   out.push("</div><div class='b'>");
   l3 = fetch("b");
   if (isFunction(l3)) {
    l3 = l3.call(stack[stack.length - 1]);
   }
   out.push(escape(l3));
   out.push("<div class='c'>");
   l4 = fetch("c");
   if (isFunction(l4)) {
    l4 = l4.call(stack[stack.length - 1]);
   }
   out.push(escape(l4));
   out.push("<div class='d'>");
   l5 = fetch("d");
   if (isFunction(l5)) {
    l5 = l5.call(stack[stack.length - 1]);
   }
   out.push(escape(l5));
   out.push("<div class='e'>");
   l6 = fetch("e");
   if (isFunction(l6)) {
    l6 = l6.call(stack[stack.length - 1]);
   }
   out.push(escape(l6));
   out.push("<div class='f'>");
   l7 = fetch("f");
   if (isFunction(l7)) {
    l7 = l7.call(stack[stack.length - 1]);
   }
   out.push(escape(l7));
   out.push("</div></div></div></div></div></div>");
   return out.join("");
  };
 
  window.template2 = function(obj) {
   var out, l1, l2, l3, l4, l5, l6, l7, stack, fetch, escape, isEmpty, isArray, isObject, isFunction;
   out = [];
   stack = [];
   stack.push(obj);
   fetch = function fetch(key) {
    var i, v;
    for (i = stack.length - 1; i >= 0; i -= 1) {
     v = stack[i][key];
     if (v) {
      return v;
     }
    }
   };
   escape = function escape(value) {
    return ('' + value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   };
   isEmpty = function isEmpty(obj) {
    var key;
 
    if (!obj) {
     return true;
    } else if (isArray(obj)) {
     return obj.length === 0;
    } else if (isObject(obj)) {
     for (key in obj) {
      if (obj.hasOwnProperty(key)) {
       return false;
      }
     }
     return true;
    } else {
     return false;
    }
   };
   isArray = Array.isArray ||
   function isArray(obj) {
    return Object.prototype.toString.call(obj) === '[object Array]';
   };
   isObject = function isObject(obj) {
    return (obj && typeof obj === 'object');
   };
   isFunction = function isFunction(obj) {
    return !!(obj && obj.constructor && obj.call && obj.apply);
   };
 
   out.push("<div><h1 class='header'>");
   l1 = fetch("header");
   if (isFunction(l1)) {
    l1 = l1.call(stack[stack.length - 1]);
   }
   if (!isEmpty(l1)) {
    out.push(escape(l1));
   }
   out.push("</h1><div class='a'>");
   l2 = fetch("a");
   if (isFunction(l2)) {
    l2 = l2.call(stack[stack.length - 1]);
   }
   if (!isEmpty(l2)) {
    out.push(escape(l2));
   }
   out.push("</div><div class='b'>");
   l3 = fetch("b");
   if (isFunction(l3)) {
    l3 = l3.call(stack[stack.length - 1]);
   }
   if (!isEmpty(l3)) {
    out.push(escape(l3));
   }
   out.push("<div class='c'>");
   l4 = fetch("c");
   if (isFunction(l4)) {
    l4 = l4.call(stack[stack.length - 1]);
   }
   if (!isEmpty(l4)) {
    out.push(escape(l4));
   }
   out.push("<div class='d'>");
   l5 = fetch("d");
   if (isFunction(l5)) {
    l5 = l5.call(stack[stack.length - 1]);
   }
   if (!isEmpty(l5)) {
    out.push(escape(l5));
   }
   out.push("<div class='e'>");
   l6 = fetch("e");
   if (isFunction(l6)) {
    l6 = l6.call(stack[stack.length - 1]);
   }
   if (!isEmpty(l6)) {
    out.push(escape(l6));
   }
   out.push("<div class='f'>");
   l7 = fetch("f");
   if (isFunction(l7)) {
    l7 = l7.call(stack[stack.length - 1]);
   }
   if (!isEmpty(l7)) {
    out.push(escape(l7));
   }
   out.push("</div></div></div></div></div></div>");
   return out.join("");
  };
 
  (function() {
   var escape, isEmpty, isArray, isObject, isFunction;
 
   escape = function escape(value) {
    return ('' + value).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
   };
   isEmpty = function isEmpty(obj) {
    var key;
 
    if (!obj) {
     return true;
    } else if (isArray(obj)) {
     return obj.length === 0;
    } else if (isObject(obj)) {
     for (key in obj) {
      if (obj.hasOwnProperty(key)) {
       return false;
      }
     }
     return true;
    } else {
     return false;
    }
   };
   isArray = Array.isArray ||
   function isArray(obj) {
    return Object.prototype.toString.call(obj) === '[object Array]';
   };
   isObject = function isObject(obj) {
    return (obj && typeof obj === 'object');
   };
   isFunction = function isFunction(obj) {
    return !!(obj && obj.constructor && obj.call && obj.apply);
   };
 
   window.template3 = function(obj) {
    var out, l1, l2, l3, l4, l5, l6, l7, stack, fetch;
    out = [];
    stack = [];
    stack.push(obj);
    fetch = function fetch(key) {
     var i, v;
     for (i = stack.length - 1; i >= 0; i -= 1) {
      v = stack[i][key];
      if (v) {
       return v;
      }
     }
    };
 
    out.push("<div><h1 class='header'>");
    l1 = fetch("header");
    if (isFunction(l1)) {
     l1 = l1.call(stack[stack.length - 1]);
    }
    if (!isEmpty(l1)) {
     out.push(escape(l1));
    }
    out.push("</h1><div class='a'>");
    l2 = fetch("a");
    if (isFunction(l2)) {
     l2 = l2.call(stack[stack.length - 1]);
    }
    if (!isEmpty(l2)) {
     out.push(escape(l2));
    }
    out.push("</div><div class='b'>");
    l3 = fetch("b");
    if (isFunction(l3)) {
     l3 = l3.call(stack[stack.length - 1]);
    }
    if (!isEmpty(l3)) {
     out.push(escape(l3));
    }
    out.push("<div class='c'>");
    l4 = fetch("c");
    if (isFunction(l4)) {
     l4 = l4.call(stack[stack.length - 1]);
    }
    if (!isEmpty(l4)) {
     out.push(escape(l4));
    }
    out.push("<div class='d'>");
    l5 = fetch("d");
    if (isFunction(l5)) {
     l5 = l5.call(stack[stack.length - 1]);
    }
    if (!isEmpty(l5)) {
     out.push(escape(l5));
    }
    out.push("<div class='e'>");
    l6 = fetch("e");
    if (isFunction(l6)) {
     l6 = l6.call(stack[stack.length - 1]);
    }
    if (!isEmpty(l6)) {
     out.push(escape(l6));
    }
    out.push("<div class='f'>");
    l7 = fetch("f");
    if (isFunction(l7)) {
     l7 = l7.call(stack[stack.length - 1]);
    }
    if (!isEmpty(l7)) {
     out.push(escape(l7));
    }
    out.push("</div></div></div></div></div></div>");
    return out.join("");
   }
  })();
 
  window.sharedVariables = {
   header: "Header",
   a: 'aaa',
   b: 'bbb',
   c: 'ccc',
   d: 'ddd',
   e: 'eee',
   f: 'fff'
  };
</script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
1
template1(sharedVariables);
pending…
2
template2(sharedVariables);
pending…
3
template3(sharedVariables);
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment