DOM vs innerHTML based Templating

JavaScript performance comparison

Revision 3 of this test case created by Jeremy Ashkenas

Preparation code 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

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

<script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>

<script src="http://gist.github.com/raw/550881/29bb186167079c0b33ab6e9d50d779f37860cfa4/micro.js"></script>

<script src="http://github.com/creationix/haml-js/raw/master/lib/haml.js"></script>

<script src="http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/jade.js"></script>

<script src="http://github.com/hij1nx/JUP/raw/master/js/jup.js"></script>

<script>
  window.mustacheTemplate = "<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'>{{.}}</li>{{/list}}</ul></div>";
  
  window.micro = "<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'><% for (var i = 0, l = list.length; i < l; i++) { %><li class='item'><%= list[i] %></li><% } %></ul></div>";
  
  window.underscoreTemplate = _.template(micro);
  
  window.resigTemplate = tmpl(micro);
  
  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.jupTemplate = ['div', ['h1',
  {
   'class': 'header'
  }, "{{header}}"],
   ['h2',
   {
    'class': 'header2'
   }, "{{header2}}"],
   ['h3',
   {
    'class': 'header3'
   }, "{{header3}}"],
   ['h4',
   {
    'class': 'header4'
   }, "{{header4}}"],
   ['h5',
   {
    'class': 'header5'
   }, "{{header5}}"],
   ['h6',
   {
    'class': 'header6'
   }, "{{header6}}"],
   ['ul',
   {
    'class': 'list'
   }, ['li',
   {
    'class': 'item'
   }, '{{list}}'],
    ['li',
    {
     'class': 'item'
    }, '{{list}}'],
    ['li',
    {
     'class': 'item'
    }, '{{list}}'],
    ['li',
    {
     'class': 'item'
    }, '{{list}}'],
    ['li',
    {
     'class': 'item'
    }, '{{list}}'],
    ['li',
    {
     'class': 'item'
    }, '{{list}}'],
    ['li',
    {
     'class': 'item'
    }, '{{list}}'],
    ['li',
    {
     'class': 'item'
    }, '{{list}}'],
    ['li',
    {
     'class': 'item'
    }, '{{list}}'],
    ['li',
    {
     'class': 'item}'
    }, '{{list}}']
   ]
  ];
  
  window.jadeTemplate = "div\n  h1.header= header\n  h2.header2= header2\n  h3.header3= header3\n  h4.header4= header4\n  h5.header5= header5\n  h6.header6= header6\n  ul.list\n    - each item in list\n      li.item= item";
  
  window.hamlTemplate = Haml("%div\n  %h1.header= header\n  %h2.header2= header2\n  %h3.header3= header3\n  %h4.header4= header4\n  %h5.header5= header5\n  %h6.header6= header6\n  %ul.list\n    :each item in list\n      %li.item= item");
  
  jade.render(jadeTemplate, {
   locals: sharedVariables,
   filename: 'test.js',
   cache: true
  });
</script>

Preparation code output

<script src="http://documentcloud.github.com/underscore/underscore.js"></script> <script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script> <script src="http://gist.github.com/raw/550881/29bb186167079c0b33ab6e9d50d779f37860cfa4/micro.js"></script> <script src="http://github.com/creationix/haml-js/raw/master/lib/haml.js"></script> <script src="http://gist.github.com/raw/550723/12d176698628e30a1df398c7ac7aea93924e1294/jade.js"></script> <script src="http://github.com/hij1nx/JUP/raw/master/js/jup.js"></script> <script> window.mustacheTemplate = "<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'>{{.}}</li>{{/list}}</ul></div>"; window.micro = "<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'><% for (var i = 0, l = list.length; i < l; i++) { %><li class='item'><%= list[i] %></li><% } %></ul></div>"; window.underscoreTemplate = _.template(micro); window.resigTemplate = tmpl(micro); 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.jupTemplate = ['div', ['h1', { 'class': 'header' }, "{{header}}"], ['h2', { 'class': 'header2' }, "{{header2}}"], ['h3', { 'class': 'header3' }, "{{header3}}"], ['h4', { 'class': 'header4' }, "{{header4}}"], ['h5', { 'class': 'header5' }, "{{header5}}"], ['h6', { 'class': 'header6' }, "{{header6}}"], ['ul', { 'class': 'list' }, ['li', { 'class': 'item' }, '{{list}}'], ['li', { 'class': 'item' }, '{{list}}'], ['li', { 'class': 'item' }, '{{list}}'], ['li', { 'class': 'item' }, '{{list}}'], ['li', { 'class': 'item' }, '{{list}}'], ['li', { 'class': 'item' }, '{{list}}'], ['li', { 'class': 'item' }, '{{list}}'], ['li', { 'class': 'item' }, '{{list}}'], ['li', { 'class': 'item' }, '{{list}}'], ['li', { 'class': 'item}' }, '{{list}}'] ] ]; window.jadeTemplate = "div\n h1.header= header\n h2.header2= header2\n h3.header3= header3\n h4.header4= header4\n h5.header5= header5\n h6.header6= header6\n ul.list\n - each item in list\n li.item= item"; window.hamlTemplate = Haml("%div\n %h1.header= header\n %h2.header2= header2\n %h3.header3= header3\n %h4.header4= header4\n %h5.header5= header5\n %h6.header6= header6\n %ul.list\n :each item in list\n %li.item= item"); jade.render(jadeTemplate, { locals: sharedVariables, filename: 'test.js', cache: true }); </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 
Mustache.to_html(mustacheTemplate, sharedVariables);
 pending…
Resig Micro-Templating. 
resigTemplate(sharedVariables);
 pending…
Creationix's Haml-js Template 
hamlTemplate(sharedVariables);
 pending…
Jade Template 
jade.render(jadeTemplate, {
 locals: sharedVariables,
 filename: 'test.js',
 cache: true
});
 pending…
JUP Template 
JUP.html([sharedVariables], jupTemplate);
 pending…
Underscore.js Template 
underscoreTemplate(sharedVariables);
 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.

2 Comments

hij1nx commented : ∞

JUP is not really comparable here. While the others may be faster, JUP must obviously be slower because its a series of nested arrays and objects. The purpose of JUP is to avoid having large strings of HTML inside your JavaScript files. It’s the separation of concerns principal at work. When used judiciously, JUP performs fine. For hardcore performance scenarios you may want to look at simpler techniques with less sugar such as underscore.js template.