rendering time Backbone.View vs SimpleView vs Raw JQuery

JavaScript performance comparison

Test case created by Ricardo

Info

This experiment shows a slightly weird behavior (at least to me) about how rendering time time varies more according to the order of the statements and much less according to the way of rendering. It renders a simple input field wrapped inside:

It appears that rendering time decreases with order being the last object the one that consumes less time for rendering.

BBView takes longer to render when it executes first but if you cut the code snippet and past it at the end, the render time is gonna be the lower of the 3. Same thing happens for any of the 3 ways of rendering de input field.

I don't understand at this moment what's the reason for this. As I do more research I'be updating this description.

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

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Backbone View Rendering
renderBBView();
pending…
Raw JQuery Rendering
renderRawJQueryView();
pending…
SimpleView Rendering
renderSimpleView();
pending…

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

Compare results of other browsers

0 comments

Add a comment