Run results for: querySelectorAll vs. querySelector+querySelectorAll

Run details:

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

Browser: Firefox 146

Operating system: Linux

Device Platform: Desktop

Date tested: 7 months ago

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

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