jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

query string vs search

Benchmark created by tenbits on October 5, 2013

Description

query string vs target search, query should be faster even though, '.x' selector is much less specific then '.item'

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div class='x'></div>
<div class='container'>
  <div class='x'></div>
  <div class='wrapper'>
        <div class='x'></div>
    <div class='list'>
    </div></div></div>

<div class='container'>
  <div class='x'></div>
  <div class='wrapper'>
        <div class='x'></div>
    <div class='list'>
    </div></div></div>

<div class='container'>
        <div class='x'></div>
  <div class='wrapper'>
        <div class='x'></div>
    <div class='list'>
    </div></div></div>
<div class='x'></div>
<div class='container'>
  <div class='wrapper'>
    <div class='list'>
    </div></div></div>
<div class='x'></div>
<div class='container'>
  <div class='x'></div>
  <div class='wrapper'>
        <div class='x'></div>
    <div class='list'>
        <div class='item'>
                <div class='y'></div>
                <div class='y'></div>
                <div class='x'></div>
        </div>
        <div class='item'>
                <div class='y'></div>
                <div class='y'></div>
                <div class='x'></div>
        </div>
        <div class='item'>
                <div class='y'></div>
                <div class='y'></div>
                <div class='x'></div>
        </div>
        <div class='item'>
                <div class='y'></div>
                <div class='y'></div>
                <div class='x'></div>
        </div>
        <div class='item'>
                <div class='y'></div>
                <div class='y'></div>
                <div class='x'></div>
        </div>
        <div class='item'>
                <div class='y'></div>
                <div class='y'></div>
                <div class='x'></div>
        </div>
        <div class='item'>
                <div class='y'></div>
                <div class='y'></div>
                <div class='x'></div>
        </div>
        <div class='item'>
                <div class='y'></div>
                <div class='y'></div>
                <div class='x'></div>
        </div>
        <div class='x'></div>
    </div>
  </div>
</div>
<div class='x'></div>

Test runner

Ready to run.

Testing in
Test		Ops/sec
query	`$('.item:first-child > .x')`	ready
search	`$('.item').first().children('.x')`	ready

Revisions

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

Revision 1: published by tenbits on October 5, 2013