jQuery Selector vs Backbone Events

Benchmark created on

Description

A comparison of repeatedly reselecting elements vs firing events. Though the two are unrelated, this test is to compare firing a lot of events vs the common task of selecting something in jQuery.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="//backbonejs.org/backbone-min.js"></script>
<div class="some-class" data-something="something"></div>
<div class="some-class" data-something="something"></div>
<div class="some-class" data-something="something"></div>

Setup

var fn = function() {},
        v = new Backbone.View(),
        numEventHandlers = 10,
        i;
    
    for (i = 0; i < numEventHandlers; i++) {
      v.on("view:event", fn);
    }

Test runner

Ready to run.

Testing in
TestOps/sec
Select some elements via class.
$(".some-class");
ready
Select some elements via tag.
$("div");
ready
Select some elements via data attribute.
$("[data-something]");
ready
Select some elements via data attribute value.
$("[data-something='something']");
 
ready
Select non-existent elements
$("li");
 
ready
Trigger an event with 10 callbacks.
v.trigger("view:event");
ready
Trigger an event with 0 callbacks.
v.trigger("view:event2");
ready

Revisions

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