querySelectorAll vs jquery

Benchmark created by Andrew Shansky on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div>
<link rel="shortcut icon" href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png">
  <ul>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
    <li><a href="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2016/06/ae-favicon-green-bg.png" name="name" class="classname">item 1</a></li>
  </ul>
  
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
    <img src="https://storage.googleapis.com/ae-prod-website-1349.appspot.com/2017/03/managed-chat-images-340x340-1.jpg" class="classname"/>
</div>

Test runner

Ready to run.

Testing in
TestOps/sec
querySelectorAll
document.querySelectorAll("img[src*=ae-prod-website]");
ready
querySelectorAll
document.querySelectorAll("a[href*=ae-prod-website], link[href*=ae-prod-website], img[src*=ae-prod-website]");
ready
jquery
$("a[href*=ae-prod-website], link[href*=ae-prod-website], img[src*=ae-prod-website]")
ready
suggestion
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));
}
query("a[href*=ae-prod-website], link[href*=ae-prod-website], img[src*=ae-prod-website]");
ready

Revisions

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

  • Revision 1: published by Andrew Shansky on