Marionette DocumentFragment CollectionView

JavaScript performance comparison

Revision 2 of this test case created

Preparation code

<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>
<script>
Benchmark.prototype.setup = function() {
    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);
};

Benchmark.prototype.teardown = function() {
    Marionette.CollectionView.prototype.appendHtml = originalAppendHtml;
    Marionette.CollectionView.prototype.showCollection = originalShowCollection;
   
    document.getElementById('target').innerHTML = '';
};
</script>

Preparation code output

    Test runner

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

    Java applet disabled.

    Testing in unknown unknown
    Test Ops/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();

    })();
    pending…
    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();

    })();
    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. Here’s a list of current revisions for this page:

    0 comments

    Add a comment