jQuery on attr selector vs class

JavaScript performance comparison

Test case created by Eliazer Braun

Info

Test if using the "on" selector and having the selector or the attr selector..

Preparation code

<a class="action" data-action="someAction"></a>
<a class="action" data-action="someAction"></a>
<a class="action" data-action="someAction"></a>
<a class="action" data-action="someAction"></a>
<a class="action" data-action="someAction"></a>
<a class="action" data-action="someAction"></a>
<a class="action" data-action="someAction"></a>
<a class="action" data-action="someAction"></a>
<a class="action" data-action="someAction"></a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
on - with class selector
$(document).on("click submit focusin focus change blur", ".action", function(e) {});

$("a").eq(Math.floor(Math.random() * 5)).trigger("click")
pending…
on - with attr selector
$(document).on("click submit focusin focus change blur", "[data-action]", function(e) {});
$("a").eq(Math.floor(Math.random() * 5)).trigger("click")
pending…

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

Compare results of other browsers

0 comments

Add a comment