DOM vs innerHTML based Templating (v497)

Revision 497 of this benchmark created on

Description

Underscore Templates vs. raw DOM manipulation.

Preparation HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>

<div id="target"></div>

<script>  
  window.target = document.getElementById("target");

  window.underscoreTemplate = _.template("<div><h1 class='header'><%= data.header %></h1><div class='a'><%= data.a %></div><div class='b'><%= data.b %><div class='c'><%= data.c %><div class='d'><%= data.d %><div class='e'><%= data.e %><div class='f'><%= data.f %></div></div></div></div></div></div>", null, {variable: 'data'});

window.simpleCoffeeTemplates3 = {
    example: function(a) {
      return "<div>      <h1 class='header'>" + a.header + "</h1>      <h2 class='header2'>" + a.header2 + "</h2>      <h3 class='header3'>" + a.header3 + "</h3>      <h4 class='header4'>" + a.header4 + "</h4>      <h5 class='header5'>" + a.header5 + "</h5>      <h6 class='header6'>" + a.header6 + "</h6>      <ul>        " + (simpleCoffeeTemplates3.loop(a.list, 'li')) + "      </ul>      </div>";
    },
    li: function(a) {
      return "<li class='item'>" + a + "</li>";
    },
    loop: function(data, template) {
      var a, out, _i, _len;
      out = "";
      for (_i = 0, _len = data.length; _i < _len; _i++) {
        a = data[_i];
        out += simpleCoffeeTemplates3[template](a);
      }
      return out;
    }
  };
  
  window.sharedVariables = {
   header: "Header",
   a: 'aaa',
   b: 'bbb',
   c: 'ccc',
   d: 'ddd',
   e: 'eee',
   f: 'fff'
  };
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Underscore.js Template
target.innerHTML = underscoreTemplate(sharedVariables);
 
ready
DOM Manipulation
var template = document.createElement('div');
var header = document.createElement('h1');
header.className = 'header';
header.textContent = sharedVariables.header;
var a = document.createElement('div');
a.className = 'a';
a.textContent = sharedVariables.a;
var b = document.createElement('div');
b.className = 'b';
b.textContent = sharedVariables.b;
var c = document.createElement('div');
c.className = 'c';
c.textContent = sharedVariables.c;
var d = document.createElement('div');
d.className = 'd';
d.textContent = sharedVariables.d;
var e = document.createElement('div');
e.className = 'e';
e.textContent = sharedVariables.e;
var f = document.createElement('div');
f.className = 'f';
f.textContent = sharedVariables.f;

template.appendChild(header);
template.appendChild(a);
a.appendChild(b);
b.appendChild(c);
c.appendChild(d);
d.appendChild(e);
e.appendChild(f);

while (target.firstChild) {
  target.removeChild(target.firstChild);
}
target.appendChild(template);
ready
Raw CoffeeScript
simpleCoffeeTemplates3.example(sharedVariables);
ready

Revisions

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