class vs data hooks combined with different filter mechanisms for the selected nodes

JavaScript performance comparison

Test case created by meinbrodt

Info

What is faster? Selecting elements using @class attribute values or @data-* attribute values as hooks and filtering them with the filter() or the is() function.

Preparation code

<div id="settings" class="m-page" data-role="page" style="display:none">
 Settings
</div>
<div id="home" class="m-page" data-role="page">
 Page
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Preparation code output

Page

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
@data-* values + filter is.()
var r = $("div[data-role='page']").is(":visible").length;
alert(r);
pending…
@data-* values + filter filter()
var r = $("div[data-role='page']").filter(":visible").length;
alert(r);
pending…
@class values + filter is()
var r = $(".m-page").is(":visible").length;
alert(r);
pending…
@class values + filter filter()
var r = $(".m-page").filter(":visible").length;
alert(r);
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