grips-performance

JavaScript performance comparison

Revision 3 of this test case created by Kyle Simpson

Info

working on improving the render performance of grips templates

forked from: http://jsperf.com/javascript-templating-shootoff-extended/42

Preparation code

<script src="http://getify.github.com/grips/deploy_0.2.4-a/grips-full.min.js"></script>

<script>
window.tpl = {};
window.tpl.vars = {
   header: "Header",
   header2: "Header2",
   header3: "Header3",
   header4: "Header4",
   header5: "Header5",
   header6: "Header6",
   list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
};

// grips (0.2.4-a)

window.grips.compile({grips:"{$: '#main' }<div><h1 class='header'>{$= $.header $}</h1><h2 class='header2'>{$= $.header2 $}</h2><h3 class='header3'>{$= $.header3 $}</h3><h4 class='header4'>{$= $.header4 $}</h4><h5 class='header5'>{$= $.header5 $}</h5><h6 class='header6'>{$= $.header6 $}</h6><ul class='list'>{$* $.list }<li class='item'>{$= _.value $}</li>{$}</ul></div>{$}"},true);

(function(G){function __sort_fn__(a,b){ return a-b; }var partial = G.definePartial, clone = G.cloneObj, extend = G.extend, esc = G.strEscapes,unerr = new Error("Unknown error"),RLH = G.RangeLiteralHash,cID = "grips2";partial(function($,$$){$$ = clone($$) || {};var i, ret = "", ret2, _;ret += "<div><h1 class='header'>";ret += $.header;ret += "</h1><h2 class='header2'>";ret += $.header2;ret += "</h2><h3 class='header3'>";ret += $.header3;ret += "</h3><h4 class='header4'>";ret += $.header4;ret += "</h4><h5 class='header5'>";ret += $.header5;ret += "</h5><h6 class='header6'>";ret += $.header6;ret += "</h6><ul class='list'>";ret2 = (function(){function __iter__($,$$,value,key,index){var i, ret = "", ret2, _;if (value == null) return ret;$$ = clone($$);_ = {value: value,key: key,index: index,even: (index % 2) === 0,odd: (index % 2) === 1,first: (index === 0),last: (index === len - 1)};ret += "<li class='item'>";ret += _.value;ret += "</li>";return ret;}var i, j = 0, len, ret = "", it, tmp;it = $.list;if (it == null) {return "";}if (Array.isArray(it)) {len = it.length;for (i=0; i<len; i++) {ret2 = __iter__($,$$,it[i],""+i,i);ret += ret2;}} else if (typeof it === "object") {tmp = Object.keys(it);len = tmp.length;if (it instanceof RLH) {tmp.sort(__sort_fn__);}for (i=0; i<len; i++) {ret2 = __iter__($,$$,it[tmp[i]],tmp[i],i);ret += ret2;}} else {return unerr;}return ret;})();ret += ret2;ret += "</ul></div>";return ret;},"grips2#main");})(window.grips);

// use the partials directly from the cache
window.tpl.grips = window.grips.collections["grips"].partials["#main"];
window.tpl.grips2 = window.grips.collections["grips2"].partials["#main"];
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
direct partial, compiled
tpl.grips( tpl.vars );
pending…
render, compiled
grips.render( "grips#main", tpl.vars );
pending…
direct partial, pre-compiled
tpl.grips2( tpl.vars );
pending…
render, pre-compiled
grips.render( "grips2#main", tpl.vars );
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

0 comments

Add a comment