jQuery selectors speed test (v28)

Revision 28 of this benchmark created on

Description

jQuery selectors speed test $ over .find

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<section class="sk-border-right grid-unit grid-col2">
    <div class="main">
        <div class="header header--top no-padding-left">
            <h2><span class="fa fa-user"></span>Kontakte</h2>
        </div>
        <div class="inner">
            <div class="header no-padding-left no-padding-right">
                <input type="text" placeholder="Search all contacts" value="" class="header search sk-main">
                <span class="fa search-ico fa--bigger fa-search"></span>
            </div>
        </div>
    </div>

    <div class="main">
        <div class="header no-padding-left sk-mod">
            <h2><span class="fa fa-envelope-o"></span>Mails</h2>
        </div>

        <div class="inner">
            <div class="header sk-mod">
                <h3>samplesample-private@sample.sample.com</h3>
                <div class="cell"><span class="label">0</span></div>
            </div>
            <div class="header sk-mod">
                <h3>sampletest@sample.sample.com</h3>
                <div class="cell"><span class="label">2</span></div>
            </div>
            <div class="header sk-mod">
                <h3>sampletest2@sample.sample.com</h3>
                <div class="cell"><span class="label">4</span></div>
            </div>
            <div class="header sk-mod">
                <h3>sampletest3@sample.sample.com</h3>
                <div class="cell"><span class="label">7</span></div>
            </div>
            <div class="header sk-mod">
                <h3>templatedevelopment@sample.sample.com</h3>
                <div class="cell"><span class="label">6</span></div>
            </div>
            <div class="header sk-mod">
                <h3>templatedevelopment2@sample.sample.com</h3>
                <div class="cell"><span class="label">13</span></div>
            </div>
            <div class="header">
                <a class="clr-light" href="#"><span class="fa fa--big fa-plus"></span>Add new mail account</a>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="header no-padding-left sk-mod">
            <h2><span class="fa fa-list-alt"></span>Sites</h2>
            <div class="header-cell"></div>
        </div>
        <div class="inner">
            <div class="header sk-mod">
                <h3>sample website</h3>
                <div class="header-cell"><span class="label">www.sample.com</span></div>
            </div>
            <div class="header  sk-mod">
                <h3>sample Messenger</h3>
                <div class="header-cell"><span class="label">www.sample.com</span></div>
            </div>
            <div class="header  sk-mod">
                <h3>sample Analytics</h3>
                <div class="header-cell"><span class="label">www.sample.com</span></div>
            </div>
            <div class="header ">
                <a class="clr-light" href="#"><span class="fa fa--big fa-plus"></span>Add new site</a>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="header no-padding-left sk-mod">
            <h2><span class="fa fa-compass"></span>Domains</h2>
            <div class="header-cell"></div>
        </div>
        <div class="inner">
            <div class="header  sk-mod">
                <h3>sample.com</h3>
                <div class="header-cell"><span class="label">Published</span></div>
            </div>
            <div class="header sk-mod">
                <h3>sample.com</h3>
                <div class="header-cell"><span class="label">Published</span></div>
            </div>
            <div class="header  sk-mod">
                <h3>sample.com</h3>
                <div class="header-cell"><span class="label">Not published</span></div>
            </div>
            <div class="header ">
                <a class="clr-light" href="#"><span class="fa fa--big fa-plus"></span>Add domain</a>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="header no-padding-left sk-mod">
            <h2><span class="fa fa-list-alt"></span>lorem Services</h2>
            <div class="header-cell"></div>
        </div>
        <div class="inner" id="inner">
            <div>
                <div class="header sk-mod headerClass" id="logo">
                    <h3>Logo</h3>
                </div>
                <div class="header sk-mod">
                    <div class="ib"><span class="label">lorem sample logo package is composed with intention to provide the clients with excellent and professional sample of their logo which will create the visual identity of every business with style.</span></div>
                </div>
                <div class="header sk-mod">
                    <h3><a href="#">Order</a></h3>
                </div>
                <div class="header sk-mod">
                    <div class="ib">
                        <span class="label">You have no orderings for Logo sample service</span>
                    </div>
                </div>
            </div>
            <div>
                <div class="header sk-mod headerClass" id="website">
                    <h3>Website</h3>
                </div>
                <div class="header sk-mod">
                    <div class="ib"><span class="label">lorem sample website package is composed with intention to provide the clients with excellent and professional sample of their websites.</span></div>
                </div>
                <div class="header sk-mod">
                    <h3><a href="#">Order</a></h3>
                </div>

                <div class="header sk-mod">
                    <div class="ib">
                        <span class="label">opala mala</span><br>
                        <span class="label">20.11.2013</span>
                    </div>
                    <div class="header-cell">
                        <span class="label">Status</span><br>
                        <span class="label">In progress</span>
                    </div>
                </div>
            </div>
            <div>
                <div class="header sk-mod headerClass" id="all">
                    <h3>All</h3>
                </div>
                <div class="header sk-mod">
                    <div class="ib"><span class="label">lorem sample website package is composed with intention to provide the clients with excellent and professional sample of their websites.</span></div>
                </div>
                <div class="header sk-mod">
                    <h3><a href="#">Order</a></h3>
                </div>

                <div class="header sk-mod">
                    <div class="ib">
                        <span class="label">opala mala</span><br>
                        <span class="label">20.11.2013</span>
                    </div>
                    <div class="header-cell">
                        <span class="label">Status</span><br>
                        <span class="label">In progress</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Test runner

Ready to run.

Testing in
TestOps/sec
Single ID-s
jQuery("#logo");
ready
Multiple ID-s
jQuery("#logo, #website, #all");
ready
Class
jQuery(".headerClass");
ready
ID first then siblings
jQuery("#logo").siblings();
ready
Class first then siblings
jQuery(".headerClass").siblings();
ready
Id then class
jQuery("#inner").find(".headerClass");
ready
simple
var $this = $('#website')
$('.headerClass');
$('.headerClass').not($this);
ready
sibling/parent
var $this = $('#website')
$this.parent().parent().siblings().children().children().hasClass('headerClass');
ready

Revisions

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