Class attribute vs Data attribute selectors (jQuery 1.8) (v4)

Revision 4 of this benchmark created by nod_ on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<div class="field-name-body field-type-text edit-field viewmode-full" data-edit-id="node:1:body:und:full">
</div>
<div class="field-name-plaintext field-type-text edit-field viewmode-full" data-edit-id="node:1:field_plaintext:und:full">
</div>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
Class selector
$('.edit-field');
ready
Data- attribute selector
$('[data-edit-id]');
ready
qSA class
document.querySelectorAll('.edit-field');
ready
qSA data-
document.querySelectorAll('[data-edit-id]');
ready

Revisions

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