Run results for: querySelectorAll vs. querySelector+querySelectorAll

Run details:

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

Browser: Firefox 132

Operating system: Ubuntu

Device Platform: Desktop

Date tested: one year ago

querySelector + querySelectorAll

54K/s

querySelectorAll again (in case of caching)

34K/s

querySelectorAll

33K/s

View exact numbers

Test name	Executions per second
✓ querySelector + querySelectorAll	54,224 Ops/sec
querySelectorAll again (in case of caching)	34,063 Ops/sec
querySelectorAll	32,685 Ops/sec

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(() => {}); });