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

Test runner

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

Java applet disabled.

t.$('#button');

t.$el.find('#button');

$('#button');

document.getElementById('toolbar')

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:

• Revision 1: published by Radu on 16th January 2013
• Revision 2: published on 16th January 2013

0 comments