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

siblings

Benchmark created on July 18, 2023

Preparation HTML

<div class="foo">
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar target">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
  <span class="bar">test</span>
</div>

Setup

const elem = document.querySelector('.target');
let getSiblings = function(e) {
    let siblings = [];
    if (!e.parentNode) {
        return siblings;
    }
    let sibling = e.parentNode.firstChild;

    while (sibling) {
        if (sibling.nodeType === 1 && sibling !== e) {
            siblings.push(sibling);
        }
        sibling = sibling.nextSibling;
    }
    return siblings;
};

Test runner

Ready to run.

Test Ops/sec

parentNode.children

Testing in
Test	Ops/sec
parentNode.children	`let siblings1 = Array.from(elem.parentNode.children).filter(el => el !== elem);`	ready
previousElementSibling and nextElementSibling	`let siblings2 = []; let prevSibling = elem.previousElementSibling; while (prevSibling) { siblings2.push(prevSibling); prevSibling = prevSibling.previousElementSibling; } let nextSibling = elem.nextElementSibling; while (nextSibling) { siblings2.push(nextSibling); nextSibling = nextSibling.nextElementSibling; }`	ready
parentNode.firstChild	`let siblings3 = getSiblings(elem);`	ready

let siblings1 = Array.from(elem.parentNode.children).filter(el => el !== elem);

ready

previousElementSibling and nextElementSibling

let siblings2 = [];
let prevSibling = elem.previousElementSibling;
while (prevSibling) {
  siblings2.push(prevSibling);  
  prevSibling = prevSibling.previousElementSibling;
}
let nextSibling = elem.nextElementSibling;
while (nextSibling) {
  siblings2.push(nextSibling);  
  nextSibling = nextSibling.nextElementSibling;
}

ready

parentNode.firstChild

let siblings3 = getSiblings(elem);

ready

Revisions

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

Revision 1: published on July 18, 2023