Dom search backbone

JavaScript performance comparison

Revision 2 of this test case created

Info

el.find() vs $('#')

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.3/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.9/backbone-min.js"></script>


<div id="1">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<p id="a">asdasd</p><p id="b">asdasd</p><p id="c">asdasd</p><p id="d">asdasd</p><p id="af">asdasd</p><p id="f">asdasd</p><p id="g">asdasd</p><p id="h">asdasd</p><p id="j">asdasd</p><p id="k">asdasd</p><p id="l">asdasd</p><p id="z">asdasd</p><p id="ac">asdasd</p><p id="ab">asdasd</p><p id="aaa">asdasd</p><p id="asada">asdasd</p><p id="q">asdasd</p><p id="w">asdasd</p><p id="e">asdasd</p><p id="r">asdasd</p><p id="t">asdasd</p><p id="qq">asdasd</p><p id="p">asdasd</p><p id="aqqqqq">asdasd</p><p id="aqwerfdsaqwerfdsaqwerfdsaqw">asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p><p>asdasd</p>
<div id="2">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="3">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="4">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="5">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="6">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="7">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="1">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="9">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="11">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="12">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="1000">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="13">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="1010">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="15">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="1">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="17">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="1333">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="176">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<div id="1121">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>

<div id="toolbar">
         </div id='button' class='btn'><h1> sadas</h1>
</div>
</div>

<form>
        <label>
                One
                <input type="radio" name="q" value="one">
        </label>
        <label>
                Two
                <input type="radio" name="q" value="two">
        </label>
        <label>
                Three
                <input type="radio" name="q" value="three">    
        </label>
        <br>
        <input type="submit">
        <br><br><br>

        <select name="r">
                <option value="1">the number one</option>
                <option>Two</option>
                <option>Three</option>

        <input type="submit">
</form>
 </div>
        <!-- ###########################Page sidebar################## -->
        <div id="sidebar">
        </div>
        <!-- ###########################Page typebar################## -->
        <!-- contains 3 types of slide object(text, img, video) -->
        <!-- will be used to select/change the type of the current selected slide -->
        <div id="typebar">
           
        </div>
        <!-- ###########################Page content################## -->
        <!-- contains the current selected slide in bigview -->
        <div id="content">
           
        </div>
        <div id="fix"></div>
        <!-- ###########################Spinner shows on loading ################## -->
        <div id="spinner"><img src="spinner.gif" alt="loading"></div>
        <!-- ###########################Test link valid image ################## -->
        <div id="testImg" style="display:none;">
                <img src="" width="10" height="10">
        </div>  
        <div id="slideshowMode">
            <!-- ###########################Slideshow  mode ################## -->
            <!-- becomes visible on slideshow -->
            Slideshow mode
        </div>
        <div id="notifBar">
            <!-- ###########################Notification bar################## -->
            <!-- becomes visible on save -->
        </div>
<script>
Benchmark.prototype.setup = function() {
    var  ToolbarView = Backbone.View.extend ({
         el : $("#toolbar")
           
    })
   
    t=new ToolbarView();
    console.log(t.el);
    console.log(t.$el.find('#button'));
};
</script>

Preparation code output

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

asdasd

sadas





loading
Slideshow mode

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Jquery selector
t.$('#button');
pending…
el.find
t.$el.find('#button');
pending…
No toolbar obj
$('#button');
pending…
get element by id
document.getElementById('toolbar')
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