rendering time Backbone.View vs SimpleView vs Raw JQuery

JavaScript performance comparison

Revision 2 of this test case created by Guru

Preparation code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>

<p class="prueba" id="elid"></p>
<p class="prueba" id="elid2"></p>
<p class="prueba" id="elid3"></p>
      
<script>
Benchmark.prototype.setup = function() {
  //BackboneView
  var BBView = Backbone.View.extend({
    render: function() {
  
      var myinput = '<input type="text" value=""/>';
      this.$el.append(myinput);
  
      return this;
    }
  });
  
  //Simple View
  var SimpleView = function(options) {
    this.$el = $(options.el);
  }
  SimpleView.prototype.render = function() {
  
    var myinput = '<input type="text" value=""/>';
    this.$el.append(myinput);
  
    return this;
  }
  
  
  
  //RENDERING Simple Experiment.
  //It appears that rendering time depends on the order of execution more than the rendering technique used.
  //The last View has almost always the lower rendering time.
  //You can cut and paste the 3 view rendering snippets to modify its order
  //and see it by yourself in the browser console.
  
  
  //RAW JQuery Rendering
  
  function renderRawJQueryView() {
  
    var myinput = '<input type="text" value=""/>';
    $("#elid2").append(myinput);
  
  }
  
  //Simple View Rendering
  
  function renderSimpleView() {
    var mySimpleView = new SimpleView({
      el: "#elid3"
    });
    mySimpleView.render();
  }
  //Backbone View Rendering
  
  function renderBBView() {
    var myView = new BBView({
      el: "#elid"
    });
    myView.render();
  }
  
  

};
</script>

Preparation code output

<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script> <script src="http://documentcloud.github.io/backbone/backbone-min.js"></script> <p class="prueba" id="elid"></p> <p class="prueba" id="elid2"></p> <p class="prueba" id="elid3"></p>

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
Backbone View Rendering
renderBBView();
pending…
Raw JQuery Rendering
renderRawJQueryView();
pending…
SimpleView Rendering
renderSimpleView();
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