forEach vs querySelector (v2)

Revision 2 of this benchmark created on

Preparation HTML

<div class="root">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div class="payments-container">
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
        <div class="h-hidden" data-js-payment-content=""></div>
        <div data-js-payment-content=""></div>
    </div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Setup

const root = document.querySelector('.root');
const paymentContents = document.querySelectorAll('[data-js-payment-content]');
const hiddenClass = 'h-hidden';
const paymentsContainer = document.querySelector('.payments-container');

Test runner

Ready to run.

Testing in
TestOps/sec
forEach
let aPaymentMethodIsOpen = false;
paymentContents.forEach(element => {
            if (!element.classList.contains(hiddenClass)) {
                aPaymentMethodIsOpen = true;
            }
        });
ready
querySelector en root
const aPaymentMethodIsOpen = root.querySelector(`div[data-js-payment-content]:not(.${hiddenClass})`) !== null;
ready
querySelector en parent de los paymentContents
const aPaymentMethodIsOpen = paymentsContainer.querySelector(`div[data-js-payment-content]:not(.${hiddenClass})`) !== null;
ready

Revisions

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