Marionette DocumentFragment CollectionView (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.marionette/1.1.0-bundled/backbone.marionette.min.js"></script>

<ul id="target"></ul>

Setup

var originalAppendHtml = Marionette.CollectionView.prototype.appendHtml;
    var originalShowCollection = Marionette.CollectionView.prototype.showCollection;
    
    var repos = [];
    for (x=1; x<4000; x++) {
      repos.push({
        "name": "typeahead.js",
        "description": "A fast and fully-featured autocomplete library",
        "language": "JavaScript",
        "value": "typeahead.js",
        "tokens": [
          "typeahead.js",
          "JavaScript"
        ]
      })
    }
    var repositories = new Backbone.Collection(repos);

Teardown


    Marionette.CollectionView.prototype.appendHtml = originalAppendHtml;
    Marionette.CollectionView.prototype.showCollection = originalShowCollection;
    
    document.getElementById('target').innerHTML = '';

Test runner

Ready to run.

Testing in
TestOps/sec
Raw Marionette
(function() {

var MyItemView = Marionette.ItemView.extend({
  tagName: 'li',
  template: _.template('<h4><%= name %></h4><p><%= description %></p>')
});

var MyCollectionView = Marionette.CollectionView.extend({
  tagName: 'ul',
  itemView: MyItemView
});

var collectionView = new MyCollectionView({ collection: repositories, el: document.getElementById('target') });

collectionView.render();

})();
ready
Document Fragment
(function() {

Marionette.CollectionView.prototype.appendHtml = function() {};
Marionette.CollectionView.prototype.showCollection = function() {
  originalShowCollection.apply(this, arguments);
  
  var fragment = document.createDocumentFragment();

  this.children.each(function(view) {
    fragment.appendChild(view.el);
  });

  this.el.appendChild(fragment);
};

var MyItemView = Marionette.ItemView.extend({
  tagName: 'li',
  template: _.template('<h4><%= name %></h4><p><%= description %></p>')
});

var MyCollectionView = Marionette.CollectionView.extend({
  tagName: 'ul',
  itemView: MyItemView
});

var collectionView = new MyCollectionView({ collection: repositories, el: document.getElementById('target') });

collectionView.render();

})();
ready

Revisions

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