Benchmark: querySelectorAll vs. querySelector+querySelectorAll

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

function createTestElement(threshold = 0.5) {
    const element = document.createElement('div');
    if (Math.random() > 0.8) {
        element.setAttribute('data-test', 'foo');
    }

    while (Math.random() > threshold) {
        element.append(createTestElement(threshold + 0.1));
    }

    return element;
}

const testElements = Array.from({
    length: 100
}, () => createTestElement());

Tests:

querySelectorAll
testElements.forEach((el) => { const matches = el.querySelectorAll('[data-test]'); matches.forEach(() => {}); });
querySelector + querySelectorAll
testElements.forEach((el) => { if (el.querySelector('[data-test]')) { const matches = el.querySelectorAll('[data-test]'); matches.forEach(() => {}); } });
querySelectorAll again (in case of caching)
testElements.forEach((el) => { const matches = el.querySelectorAll('[data-test]'); matches.forEach(() => {}); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
querySelector + querySelectorAll
querySelectorAll again (in case of caching)

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:146.0) Gecko/20100101 Firefox/146.0

Browser/OS: Firefox 146 on Linux

View result in a separate tab

querySelector + querySelectorAll

110K/s

querySelectorAll again (in case of caching)

60K/s

querySelectorAll

55K/s

View exact numbers

Test name	Executions per second
✓ querySelector + querySelectorAll	110,200 Ops/sec
querySelectorAll again (in case of caching)	60,130 Ops/sec
querySelectorAll	55,310 Ops/sec

querySelectorAll vs. querySelector+querySelectorAll (version: 1)

Comparing performance of: `querySelectorAll vs querySelector + querySelectorAll vs querySelectorAll again (in case of caching)`

Created: one year ago by: Guest

Go to the latest result

querySelectorAll

querySelector + querySelectorAll

querySelectorAll again (in case of caching)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

querySelectorAll vs. querySelector+querySelectorAll (version: 1)

Comparing performance of: querySelectorAll vs querySelector + querySelectorAll vs querySelectorAll again (in case of caching)

Created: one year ago by: Guest

Go to the latest result

querySelectorAll

querySelector + querySelectorAll

querySelectorAll again (in case of caching)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `querySelectorAll vs querySelector + querySelectorAll vs querySelectorAll again (in case of caching)`