DOM vs innerHTML based Templating (v1066)

Revision 1066 of this benchmark created by cimot on

Description

A brief comparison of some JavaScript templating engines on a short template: 7 DOM nodes ... 7 interpolated values cimot edit.

Preparation HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://beebole.com/pure/wp-content/themes/BeeBole-pure/libs/pure.js">
</script>
<script src="http://underscorejs.org/underscore-min.js">
</script>
<script src="http://mustache.github.com/extras/mustache.js">
</script>
<div id="target">
</div>
<script>
  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'
  });

  var mustacheTemplate = "<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>";

  var pureJsTemplate = "<div class='purejs_template'><h1 class='header'></h1><div class='a'></div><div class='b'><div class='c'><div class='d'><div class='e'><div class='f'></div></div></div></div></div></div>";

  var sharedVariables = {
    header: "Header",
    a: 'aaa',
    b: 'bbb',
    c: 'ccc',
    d: 'ddd',
    e: 'eee',
    f: 'fff'
  };

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

Test runner

Ready to run.

Testing in
TestOps/sec
Mustache.js Template
target.innerHTML = Mustache.to_html(mustacheTemplate, sharedVariables);
ready
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
innerHTML String Manipulation
var htmlCode = '<div><h1 class="header">' + sharedVariables.header + '</h1><div class="a">' + sharedVariables.a + '<div class="b">' + sharedVariables.b + '<div class="c">' + sharedVariables.c + '<div class="d">' + sharedVariables.d + '<div class="e">' + sharedVariables.e + '<div class="f">' + sharedVariables.f + '</div></div></div></div></div></div></div>';
target.innerHTML = htmlCode;
ready

Revisions

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