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: 4 months ago

Test name	Executions per second
querySelectorAll	55309.8 Ops/sec
querySelector + querySelectorAll	110200.1 Ops/sec
querySelectorAll again (in case of caching)	60130.3 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(() => {}); });

Run results for: querySelectorAll vs. querySelector+querySelectorAll

querySelectorAll

querySelector + querySelectorAll

querySelectorAll again (in case of caching)