Zepto.js vs jQuery vs Sprint.js - selectors (v114)

Revision 114 of this benchmark created on


Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<script src="https://cdn.rawgit.com/bendc/sprint/master/sprint.min.js"></script>
<script>
        function $_(str){
                if(str[0] === '#') {
                        return document.getElementById(str.substring(1));
                } else if(str[0] === '.') {
                        return document.getElementsByClassName(str.substring(1));
                } else {
                        return document.getElementsByTagName(str);
                }
        }

</script>

<div id="rsvp" class="view" data-view-title="RSVPs">
    <div class="content"></div>
</div>
<div id="chapter_004" class="view" data-view-title="Splendid Corgi Consortium">
    <div class="content"></div>
<div>
        <div>
                <div>
                        <div>
                                <div>
                                        <div>
                                                <div>
                                                        <div>
                                                                <div>
                                                                        <div>
                                                                                <div>
                                                                                        <div>
                                                                                                <div>
                                                                                                        <div>
                                                                                                                <div>
                                                                                                                        <div>
                                                                                                                                <div>
                                                                                                                                        <div>
                                                                                                                                                <div>
                                                                                                                                                        <div>
                                                                                                                                                                <div>
                                                                                                                                                                        <div>
                                                                                                                                                                                <div>
                                                                                                                                                                                        <div>
                                                                                                                                                                                                <div>
                                                                                                                                                                                                        <div>
                                                                                                                                                                                                                <div>
                                                                                                                                                                                                                        <div>
                                                                                                                                                                                                                                <div>
                                                                                                                                                                                                                                        <div>
                                                                                                                                                                                                                                                <div>
                                                                                                                                                                                                                                                        <div id="ops" class="ops"></div>
                                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                </div>
                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                </div>
                                                                                                                                                                                                        </div>
                                                                                                                                                                                                </div>
                                                                                                                                                                                        </div>
                                                                                                                                                                                </div>
                                                                                                                                                                        </div>
                                                                                                                                                                </div>
                                                                                                                                                        </div>
                                                                                                                                                </div>
                                                                                                                                        </div>
                                                                                                                                </div>
                                                                                                                        </div>
                                                                                                                </div>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </div>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
Zepto ID
Zepto('#ops')
ready
jQuery ID
jQuery('#ops')
ready
getElementById
document.getElementById('ops')
ready
Zepto ClassName
Zepto('.ops')
ready
jQuery ClassName
jQuery('.ops')
ready
getElementsByClassName
document.getElementsByClassName('ops')
ready
querySelectorAll
document.querySelectorAll('.ops')
ready
querySelector
document.querySelector('.ops')
ready
jquery
jQuery('#ops .ops')
ready
Zepto
Zepto('#ops .ops')
ready
Vanilla first
document.querySelector('#ops .ops')
ready
Vanilla all
document.querySelectorAll('#ops .ops')
ready
Sprint ID
Sprint('#ops')
ready
Sprint ClassName
Sprint('.ops')
ready
Sprint
Sprint('#ops .ops')
ready
Query(document.getElementById('chapter_004'))
jQuery(document.getElementById('ops'))
ready
Sprint(document.getElementById('chapter_004'))
Sprint(document.getElementById('ops'))
ready
Zepto(document.getElementById('chapter_004'))
Zepto(document.getElementById('ops'))
ready
$_(id);
$_('#ops');
ready
Vanilla ID
document.querySelector('#ops')
ready
$_(Class);
$_('.ops');
ready
$_(DIV);
$_('div');
ready

Revisions

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