jQuery selectors VS jQuery + Javascript native selectors (by conversion) (v382)

Revision 382 of this benchmark created on

Description

Comparing the performance difference of varied jQuery 2.1.1 selectors. And specifficaly comparing jQuery selectors VS jQuery + Javascript selectors by conversion like $(document.getElementById("foo"));

This test page contains some dummy HTML (from html-ipsum.com) just to give the page some weight, make the selectors work a little bit.

Note that the "Tag" selector is selecting a tag that happens to be unique in the page just to be fair.

Preparation HTML

<style type="text/css">
        .bar { display: none; }
</style>
<h1>
        HTML Ipsum Presents
</h1>

<p>
        <strong>
                Pellentesque habitant morbi tristique
        </strong>
        senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam,
        feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
        egestas semper.
        <em>
                Aenean ultricies mi vitae est.
        </em>
        Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
        Vestibulum erat wisi, condimentum sed,
        <code>
                commodo vitae
        </code>
        , ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros
        ipsum rutrum orci, sagittis tempus lacus enim ac dui.
        <a href="#">Donec non enim</a>
        in turpis pulvinar facilisis. Ut felis.
</p>

<h2>
        Header Level 2
</h2>
<ol>
        <li>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </li>
        <li>
                Aliquam tincidunt mauris eu risus.
        </li>
</ol>
<blockquote id="foo" class="bar" name="baz">
        <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in
                mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa.
                Donec eleifend, libero at <span style="display: none">iquet congue. Ut a est </span> sagittis mollis, tellus est malesuada tellus, at luctus
                turpis elit sit amet quam. Vivamus pretium ornare est.
        </p>
</blockquote>
<h3>
        Header Level 3
</h3>
<ul>
        <li name="koshka">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </li>
        <li>
                Aliquam tincidunt mauris eu risus.
        </li>
        <li>
                Aliquam tincidunt mauris eu risus.
        </li>
        <li name="koshka">
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </li>
</ul>
<pre>
  <code>
          #header h1 a { display: block; width: 300px; height: 80px; }
  </code>
</pre>
<form action="#" method="post">
        <div id="foo2"><div>
                <label for="name">Text Input:</label>
                <input type="text" name="name" id="name" value="" tabindex="1" />
                <label for="name2">Text Input #2:</label>
                <input type="text" name="name2" id="name2" value="" tabindex="1" />
        </div>

                <div id="foo-radio-group">
                        <h4>Radio Button Choice</h4>

                        <label class="bare smile" for="radio-choice-1">Choice 1</label>
                        <input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />

                        <label for="radio-choice-2">Choice 2</label>
                        <input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" checked="checked" value="choice-2" />

                        <label class="bare smile" for="radio-choice-2">Choice 3</label>
                        <input type="radio" name="radio-choice-3" id="radio-choice-3" tabindex="4" value="choice-3" />
                </div></div>
        <div>
                <label for="select-choice">Select Dropdown Choice:</label>
                <select name="select-choice" id="select-choice">
                        <option value="Choice 1">Choice 1</option>
                        <option value="Choice 2">Choice 2</option>
                        <option value="Choice 3">Choice 3</option>
                </select>
        </div>

        <div>
                <label for="textarea">Textarea:</label>
                <textarea cols="20" rows="2" name="textarea" id="textarea"></textarea>
        </div>

        <div>
                <label for="checkbox">Checkbox:</label>
                <input type="checkbox" name="checkbox" id="checkbox" />
        </div>

        <div>
                <input type="submit" value="Submit" />
        </div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script></script>

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery ID
$("#foo");
ready
jQuery Tag
$("blockquote");
ready
jQuery Class
$(".bar");
ready
jQuery attribute
$("[name='koshka']");
ready
jQuery Pseudo-selector
$("li[name='koshka']");
ready
jQuery Pseudo-selector with Id
$(":checked");
ready
jQuery Pseudo-selector with Id 2
$("#foo :checked");
ready
find()
$("#foo2").find(".bare");
ready
filter()
$("div").filter(".bare");
ready
Without find or filter
$("#foo2 .bare");
ready
Conversion 1
$(document.getElementById("foo"));
ready
Conversion 2
$(document.getElementsByTagName("blockquote"));
ready
Conversion 3
$(document.getElementsByClassName("bar"));
ready
Attribute
$('input[type="radio"]:checked');
ready
Attribute + Filter
$('input').filter('[type="radio"]:checked');
ready
Attribute + Filter 2
$('input[type="radio"]').filter(':checked');
ready
Two Clasess
$(".bare.smile");
ready
One Class
$(".bare");
ready
Conversion 4
$(document.getElementsByName('koshka'));
ready

Revisions

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