jQuery selectors speed test

JavaScript performance comparison

Revision 28 of this test case created

Info

jQuery selectors speed test $ over .find

Preparation code

<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>
 

Preparation code output

Kontakte

Mails

samplesample-private@sample.sample.com

0

sampletest@sample.sample.com

2

sampletest2@sample.sample.com

4

sampletest3@sample.sample.com

7

templatedevelopment@sample.sample.com

6

templatedevelopment2@sample.sample.com

13

Sites

sample website

www.sample.com

sample Messenger

www.sample.com

sample Analytics

www.sample.com

Domains

sample.com

Published

sample.com

Published

sample.com

Not published

lorem Services

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.
You have no orderings for Logo sample service

Website

lorem sample website package is composed with intention to provide the clients with excellent and professional sample of their websites.
opala mala
20.11.2013
Status
In progress

All

lorem sample website package is composed with intention to provide the clients with excellent and professional sample of their websites.
opala mala
20.11.2013
Status
In progress

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Single ID-s
jQuery("#logo");
pending…
Multiple ID-s
jQuery("#logo, #website, #all");
pending…
Class
jQuery(".headerClass");
pending…
ID first then siblings
jQuery("#logo").siblings();
pending…
Class first then siblings
jQuery(".headerClass").siblings();
pending…
Id then class
jQuery("#inner").find(".headerClass");
pending…
simple
var $this = $('#website')
$('.headerClass');
$('.headerClass').not($this);
pending…
sibling/parent
var $this = $('#website')
$this.parent().parent().siblings().children().children().hasClass('headerClass');
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