Run results for: querySelectorAll vs query

Run details:

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.89 Safari/537.36

Browser: Chrome 62

Operating system: Windows 8.1

Device Platform: Other

Date tested: 7 years ago

Test name	Executions per second
query	38379.0 Ops/sec
querySelectorAll	43677.4 Ops/sec
getElementByTagName	3511095.5 Ops/sec

HTML Preparation code:

<html>
<body>
    <ul style="list-style: none outside none;">
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      <li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      	<li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      	<li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 2</li>
        <li style="float: left;display: block;width: 100px;height: 40px;">Field 3</li>
      	<li style="float: left;display: block;width: 100px;height: 40px;">Field 1</li>
    </ul>
</body>
</html>

Script Preparation code:

function query(selector, context) {
    context = context || document;
    // Redirect simple selectors to the more performant function
    if (/^(#?[\w-]+|\.[\w-.]+)$/.test(selector)) {
        switch (selector.charAt(0)) {
            case '#':
                // Handle ID-based selectors
                return [context.getElementById(selector.substr(1))];
            case '.':
                // Handle class-based selectors
                // Query by multiple classes by converting the selector 
                // string into single spaced class names
                var classes = selector.substr(1).replace(/\./g, ' ');
                return [].slice.call(context.getElementsByClassName(classes));
            default:
                // Handle tag-based selectors
                return [].slice.call(context.getElementsByTagName(selector));
        }
    }
    // Default to `querySelectorAll`
    return [].slice.call(context.querySelectorAll(selector));
}

Tests:

query
query("li", document)
querySelectorAll
document.querySelectorAll("li")
getElementByTagName
document.getElementsByTagName("li")

Run results for: querySelectorAll vs query

100 Li elements using querySelectorAll and custom query function got from http://ryanmorr.com/abstract-away-the-performance-faults-of-queryselectorall/

query

querySelectorAll

getElementByTagName