yet another template test

JavaScript performance comparison

Test case created by Josh Vermaire

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://github.com/olado/doT/raw/master/doT.js"></script>
<script src="https://github.com/olado/doT/raw/master/doU.js"></script>
<script>
Benchmark.prototype.setup = function() {
    window.sharedVariables = {
       header: "Header",
       header2: "Header2",
       header3: "Header3",
       header4: "Header4",
       header5: "Header5",
       header6: "Header6",
       list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
      };
   
    window.doTtemplate = doT.template("<div><h1 class='header'>{{= it.header }}</h1><h2 class='header2'>{{= it.header2 }}</h2><h3 class='header3'>{{= it.header3 }}</h3><h4 class='header4'>{{= it.header4 }}</h4><h5 class='header5'>{{= it.header5 }}</h5><h6 class='header6'>{{= it.header6 }}</h6><ul class='list'>{{ for (var i = 0, l = it.list.length; i < l; i++) { }}<li class='item'>{{= it.list[i] }}</li>{{ } }}</ul></div>");
     
    window.doUtemplate = doU.template("<div><h1 class='header'>{{= it.header }}</h1><h2 class='header2'>{{= it.header2 }}</h2><h3 class='header3'>{{= it.header3 }}</h3><h4 class='header4'>{{= it.header4 }}</h4><h5 class='header5'>{{= it.header5 }}</h5><h6 class='header6'>{{= it.header6 }}</h6><ul class='list'>{{ for (var i = 0, l = it.list.length; i < l; i++) { }}<li class='item'>{{= it.list[i] }}</li>{{ } }}</ul></div>");
   
    window.functionTemplate = function(it) {
    return "<div><h1 class='header'>" + it.header + "</h1><h2 class='header2'>" + it.header2 + "</h2><h3 class='header3'>" + it.header3 + "</h3><h4 class='header4'>" + it.header4 + "</h4><h5 class='header5'>" + it.header5 + "</h5><h6 class='header6'>" + it.header6 + "</h6><ul class='list'>" + (((function() {
      var _i, _len, _ref, _results;
      _ref = sharedVariables.list;
      _results = [];
      for (_i = 0, _len = _ref.length; _i < _len; _i++) {
        i = _ref[_i];
        _results.push('<li class=\'item\'>' + i + '</li>');
      }
      return _results;
    })()).join('')) + "</ul></div>"
    }
};
</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
doTtemplate
temp = doTtemplate(sharedVariables)
$(temp)
pending…
doUtemplate
temp = doUtemplate(sharedVariables)
$(temp)
pending…
functionTemplate
temp = functionTemplate(sharedVariables)
$(temp)
pending…
innerHTML
div = document.createElement('div')
div.className = 'pure'
div.innerHTML = "<h1 class='header'></h1><h2 class='header2'></h2><h3 class='header3'></h3><h4 class='header4'></h4><h5 class='header5'></h5><h6 class='header6'></h6><ul class='list'><li class='item'>1</li><li class='item'>2</li><li class='item'>3</li><li class='item'>4</li><li class='item'>5</li><li class='item'>6</li><li class='item'>7</li><li class='item'>8</li><li class='item'>9</li><li class='item'>10</li></ul>"
pending…
fragments
div = document.createElement('div')
div.innerHTML = "<h1 class='header'></h1><h2 class='header2'></h2><h3 class='header3'></h3><h4 class='header4'></h4><h5 class='header5'></h5><h6 class='header6'></h6><ul class='list'><li class='item'>1</li><li class='item'>2</li><li class='item'>3</li><li class='item'>4</li><li class='item'>5</li><li class='item'>6</li><li class='item'>7</li><li class='item'>8</li><li class='item'>9</li><li class='item'>10</li></ul>"
fragment = document.createDocumentFragment()

while (div.firstChild) {
  fragment.appendChild(div.firstChild);
}
return fragment.firstElementChild
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