attr vs class

JavaScript performance comparison

Test case created

Preparation code

<ul>
    <li class="someclass js-someclass" data-ui-role="someattrvalue">
        <a class="" href="#">
            <span class="module-bd">
                <img class="module-img" src="../some_file.jpg" alt="" />
            </span>
        </a>
    </li>

    <li class="someclass js-someclass" data-ui-role="someattrvalue">
        <a class="" href="#">
            <span class="module-bd">
                <img class="module-img" src="../some_file.jpg" alt="" />
            </span>
        </a>
    </li>

    <li class="someclass js-someclass" data-ui-role="someattrvalue">
        <a class="" href="#">
            <span class="module-bd">
                <img class="module-img" src="../some_file.jpg" alt="" />
            </span>
        </a>
    </li>

    <li class="someclass js-someclass" data-ui-role="someattrvalue">
        <a class="" href="#">
            <span class="module-bd">
                <img class="module-img" src="../some_file.jpg" alt="" />
            </span>
        </a>
    </li>

    <li class="someclass js-someclass" data-ui-role="someattrvalue">
        <a class="" href="#">
            <span class="module-bd">
                <img class="module-img" src="../some_file.jpg" alt="" />
            </span>
        </a>
    </li>

    <li class="someclass js-someclass" data-ui-role="someattrvalue">
        <a class="" href="#">
            <span class="module-bd">
                <img class="module-img" src="../some_file.jpg" alt="" />
            </span>
        </a>
    </li>

    <li class="someclass js-someclass" data-ui-role="someattrvalue">
        <a class="" href="#">
            <span class="module-bd">
                <img class="module-img" src="../some_file.jpg" alt="" />
            </span>
        </a>
    </li>

    <li class="someclass js-someclass" data-ui-role="someattrvalue">
        <a class="" href="#">
            <span class="module-bd">
                <img class="module-img" src="../some_file.jpg" alt="" />
            </span>
        </a>
    </li>

    <li class="someclass js-someclass" data-ui-role="someattrvalue">
        <a class="" href="#">
            <span class="module-bd">
                <img class="module-img" src="../some_file.jpg" alt="" />
            </span>
        </a>
    </li>

    <li class="someclass js-someclass" data-ui-role="someattrvalue">
        <a class="" href="#">
            <span class="module-bd">
                <img class="module-img" src="../some_file.jpg" alt="" />
            </span>
        </a>
    </li>
</ul>
 

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
data attr
var slides = document.querySelectorAll('[data-ui-role="someattrvalue"]');
pending…
class
var slides = document.querySelectorAll('.js-someclass');
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