Question

just wondering what selector performance is like for [data=”what”] pseudo performance if anyone has a good article/benchmark for this or any personal experience?

Basically I’ve peppered my HTML with data-eid, data-mid, data-sid with HTML5 elements like:

<section data-mid="1">
    <article data-eid="1">
        <a data-sid="1"></a>
        <a data-sid="2"></a>
        <a data-sid="3"></a>
    </article>
    <article data-eid="2">
        <a data-sid="4"></a>
        <a data-sid="5"></a>
        <a data-sid="6"></a>
    </article>
</section>
<section data-mid="2">
    <article data-eid="3">
        <a data-sid="7"></a>
        <a data-sid="8"></a>
        <a data-sid="9"></a>
    </article>
    <article data-eid="4">
        <a data-sid="10"></a>
        <a data-sid="11"></a>
        <a data-sid="12"></a>
    </article>
</section>

Pretty much wanted to use it in jQuery for selecting particular m e and s things on my page. I know atm that an m is a section, that an e is an article and an s is an anchor.

I would usually select in jQuery using something like $('.m[mid="1"]') but is it much quicker than: $('section[mid="1"]')… I guess not?

I just don’t want to make the user download a load of extra class=”m” in my code. I know currently I’m tying my front-end with my JS-end code by forcing the elements to be a certain type where class=”m” would decouple it to be anything in the future.

What do you think?

Answer 1

When I write HTML that’s intended to communicate something to unobtrusive JavaScript that’s going to control behavior, I do this:

<div class='some-behavior' data-param-for-behavior='whatever' data-another-param='12'>

Then the code can apply itself based on class name, which is (in modern browsers) pretty fast, and get the parameters with “.data()”.

Fetching by class name:

var elementsToControl = $('.some-behavior');

in modern browsers is way faster than

var elementsToControl = $('[data-param-for-behavior]');

edit — wow mind blown – the by-attribute method, with a tag name, is faster than by-class in Chrome. I’ll try by-class with a tag name too … edit again nope. Boy, sometimes I just wonder 🙂