DOM vs innerHTML based Templating

JavaScript performance comparison

Revision 483 of this test case created by

Preparation code

<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://documentcloud.github.com/underscore/underscore.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>
      
<script>
Benchmark.prototype.setup = function() {
  var domTemplate = function(target) {
  
      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);
  
  
      }

};
</script>

Preparation code output

<script src="http://beebole.com/pure/wp-content/themes/BeeBole-pure/libs/pure.js"> </script> <script src="http://documentcloud.github.com/underscore/underscore.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

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

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Mustache.js Template
target.innerHTML = Mustache.to_html(mustacheTemplate, sharedVariables);
pending…
Pure JS Template
target.innerHTML = pureJsTemplate;
$('.purejs_template').autoRender(sharedVariables);
pending…
Underscore.js Template
target.innerHTML = underscoreTemplate(sharedVariables);
pending…
DOM Manipulation
domTemplate(target)
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.

0 Comments