The speed of selectors with tag names (v3)

Revision 3 of this benchmark created by Matt Hinchliffe on

Description

Selecting by class name is slow. The DOM has no pre-indexed cache of elements by class name as there is for IDs, forms and names (no criticism of this decision, it makes some sense).

Preparation HTML

<div class="classnoise class1">Content</div>
<span class="class2 otherclass">Content</span>
<ul>
    <li>
        <a class="nested_class">Link</a>
    </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Test runner

Ready to run.

Testing in
TestOps/sec
Query selector
var test1 = document.querySelectorAll('.class1');
var test2 = document.querySelectorAll('.class2');
var test3 = document.querySelectorAll('.nested_class');
ready
Query selector (inc. tag name)
var test1 = document.querySelectorAll('div.class1');
var test2 = document.querySelectorAll('span.class2');
var test3 = document.querySelectorAll('a.nested_class');
ready
jQuery class selector
var test1 = $('.class1');
var test2 = $('.class2');
var test3 = $('.nested_class');
ready
jQuery element.class selector
var test1 = $('div.class1');
var test2 = $('span.class2');
var test3 = $('a.nested_class');
ready
getElementsByClassName shim
function getElementsByClassName(tagName, className)
{
        var elementList = [], Elements = document.getElementsByTagName(tagName), i = Elements.length;

        while (i--)
        {
                var classAttr = Elements[i].getAttribute('class') || Elements[i].getAttribute('className');

                if (classAttr && classAttr.indexOf(className) > -1)
                {
                        elementList.push(Elements[i]);
                }
        }
}

var test1 = getElementsByClassName('div', 'class1');
var test2 = getElementsByClassName('span', 'class2');
var test3 = getElementsByClassName('a', 'nested_class');
ready
getElementsByClassName
var test1 = document.getElementsByClassName('class1');
var test2 = document.getElementsByClassName('class2');
var test3 = document.getElementsByClassName('nested_class');
ready

Revisions

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

  • Revision 3: published by Matt Hinchliffe on