createDocumentFragment performance test (v2)

Revision 2 of this benchmark created on

Preparation HTML

<div id="sandbox"></div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.3.0/lodash.js"></script>

Setup

Benchmark.prototype.setup = function() {
        var $sandbox = $('#sandbox'),
            data = [{name:"test1"}, {name:"cheese"}, {name: "another"}],
        
            template = _.template('<li>Motherfucking <%= name %>!</li>'),
        
            singleTpl = _.template('<ul>\
                                     <% _.forEach(data, function(item) { %>\
                                       <li>Motherfucking<%- name %>!</li>\
                                     <% }); %>\
                                   </ul>');

Teardown


        $('#sandbox').empty()
      }
  };

  Benchmark.prototype.teardown = function() {
    $('#sandbox').empty()

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery re-append loop (bad)
var $list = $('<ul>');
$sandbox.append($list);

for (var i=0, l=data.length; i < l; i++) {
  $list.append(template(data[i]));
}
 
ready
Insert array of html strings
var $list = $('<ul>'),
    nodes = [];

$sandbox.append($list);

for (var i=0, l=data.length; i < l; i++) {
  nodes.push(template(data[i]));
}
$list.append(nodes);
ready
Insert fragment of nodes
var $list = $('<ul>'),
    fragment = document.createDocumentFragment();

$sandbox.append($list);

for (var i=0, l=data.length; i < l; i++) {
  fragment.append(template(data[i]));
}

$list.append(fragment);
 
ready

Revisions

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