jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

Testing Data Atribute Selectors (v10)

Revision 10 of this benchmark created on July 16, 2014

Description

Test that shows how fast a query can be made via data atributes and how fast it is made via classes.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class="virtual-body">
<div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div>
<div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div></div></div><div class='classdeclaration1 component mycomponent' data-component='mycomponent'></div></div><div class='classdeclaration1 widget component mycomponent' data-component='mycomponent'></div>
</div>

Setup

ui.$virtualBody = $('.virtual-body');
    ui.virtualBody = ui.$virtualBody[0];

Test runner

Ready to run.

Testing in
Test		Ops/sec
jQuery Class Selector	`ui.$virtualBody.find(".mycomponent");`	ready
jQuery Data Attribute Selector	`ui.$virtualBody.find("[data-component='mycomponent']");`	ready
jQuery Data Attribute Selector (no value)	`ui.$virtualBody.find("[data-component]");`	ready
queryAll by class	`ui.virtualBody.querySelectorAll(".mycomponent");`	ready
queryAll by data-attr	`ui.virtualBody.querySelectorAll("[data-component='mycomponent']");`	ready
queryAll by data-attr (no value)	`ui.virtualBody.querySelectorAll("[data-component]");`	ready
getElementsByClassName	`ui.virtualBody.getElementsByClassName("mycomponent");`	ready
jQuery wrap getElementsByClassName	`$(ui.virtualBody.getElementsByClassName("mycomponent"));`	ready

Revisions

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

Revision 1: published by Vlad on September 19, 2012
Revision 3: published on August 22, 2013
Revision 4: published on September 8, 2013
Revision 5: published on November 19, 2013
Revision 6: published on March 21, 2014
Revision 7: published on March 21, 2014
Revision 8: published on July 16, 2014
Revision 9: published by Benjamin Hutchins on July 16, 2014
Revision 10: published on July 16, 2014