forEach vs querySelector (v11)

Revision 11 of this benchmark created on

Preparation HTML

<div class="component">
    <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 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 component = document.querySelector('.component');
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 component
const aPaymentMethodIsOpen = component.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
Con Array.prototype
const aPaymentMethodIsOpen = Array.prototype.some.call(paymentContents, (element) => !element.classList.contains(hiddenClass))
ready

Revisions

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