jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

Flat Map

Benchmark created on March 18, 2024

Preparation HTML

<div data-js="slideshow" class="slideshow" data-interval="3000">
        <div class="hero__image slideshow-element slideshow-element--background" data-js="slideshow-element">



<picture class=" content-block" style="opacity: 1;">
        <source media="(max-width: 767px)" type="image/webp" srcset="/globalassets/66x7pov7yq.jpg?v=49c9bb&amp;format=webp">
        <source media="(max-width: 767px)" type="image/jpeg" srcset="/globalassets/66x7pov7yq.jpg?v=49c9bb">


    <source media="(min-width: 768px) and (max-width: 1199px)" srcset="/globalassets/66x7pov7yq.jpg?v=49c9bb&amp;format=webp" type="image/webp">
    <source media="(min-width: 768px) and (max-width: 1199px)" srcset="/globalassets/66x7pov7yq.jpg?v=49c9bb" type="image/jpeg">
    <source media="(min-width: 1200px)" srcset="/globalassets/66x7pov7yq.jpg?v=49c9bb&amp;format=webp" type="image/webp">
    <source media="(min-width: 1200px)" type="image/jpeg" srcset="/globalassets/66x7pov7yq.jpg?v=49c9bb">
    <img src="/globalassets/66x7pov7yq.jpg?v=49c9bb" width="1895" height="1033" title="wefwe" alt="This is some alt text" fetchpriority="high">
</picture>


<picture class=" content-block" style="opacity: 0;">
        <source media="(max-width: 767px)" type="image/webp" srcset="/globalassets/images/blog/2nd_hand_car_lady_with_keys.jpg?v=49ca02&amp;format=webp">
        <source media="(max-width: 767px)" type="image/jpeg" srcset="/globalassets/images/blog/2nd_hand_car_lady_with_keys.jpg?v=49ca02">


    <source media="(min-width: 768px) and (max-width: 1199px)" srcset="/globalassets/images/blog/2nd_hand_car_lady_with_keys.jpg?v=49ca02&amp;format=webp" type="image/webp">
    <source media="(min-width: 768px) and (max-width: 1199px)" srcset="/globalassets/images/blog/2nd_hand_car_lady_with_keys.jpg?v=49ca02" type="image/jpeg">
    <source media="(min-width: 1200px)" srcset="/globalassets/images/blog/2nd_hand_car_lady_with_keys.jpg?v=49ca02&amp;format=webp" type="image/webp">
    <source media="(min-width: 1200px)" type="image/jpeg" srcset="/globalassets/images/blog/2nd_hand_car_lady_with_keys.jpg?v=49ca02">
    <img src="/globalassets/images/blog/2nd_hand_car_lady_with_keys.jpg?v=49ca02" width="1140" height="641" title="boo" alt="boo">
</picture>


<picture class=" content-block" style="opacity: 0;">
        <source media="(max-width: 767px)" type="image/webp" srcset="/globalassets/images/blog/2nd_hand_car_saleyard.jpg?v=49ca03&amp;format=webp">
        <source media="(max-width: 767px)" type="image/jpeg" srcset="/globalassets/images/blog/2nd_hand_car_saleyard.jpg?v=49ca03">


    <source media="(min-width: 768px) and (max-width: 1199px)" srcset="/globalassets/images/blog/2nd_hand_car_saleyard.jpg?v=49ca03&amp;format=webp" type="image/webp">
    <source media="(min-width: 768px) and (max-width: 1199px)" srcset="/globalassets/images/blog/2nd_hand_car_saleyard.jpg?v=49ca03" type="image/jpeg">
    <source media="(min-width: 1200px)" srcset="/globalassets/images/blog/2nd_hand_car_saleyard.jpg?v=49ca03&amp;format=webp" type="image/webp">
    <source media="(min-width: 1200px)" type="image/jpeg" srcset="/globalassets/images/blog/2nd_hand_car_saleyard.jpg?v=49ca03">
    <img src="/globalassets/images/blog/2nd_hand_car_saleyard.jpg?v=49ca03" width="3072" height="2048" alt="boo">
</picture>        </div>
        <div class="container container--wide">
            <div class="hero__row">
                <div class="hero__content">
                    <div class="hero__aside hero__aside--sm slideshow-element" data-js="slideshow-element">
                        

                    </div>
                    

                    
<h1 class="title1">Goosebumps.<br>Made by fans.</h1>
                    <div class="lead hero__lead hero__lead--md">
                        
<p><span>We're proud to get behind the people who make a real <br>difference; to support the supporters of the Brisbane Lions.</span></p>
                    </div>
                    <div class="lead hero__lead hero__lead--sm">
                        
<p><span>We're proud to get behind the people who make a real difference; to support the supporters of the Brisbane Lions.</span></p>
                    </div>
                    <div class="hero__ctas cta cta--left">
                        

                    </div>
                        <div class="hero__awards">
                            


<div class="awards">
    <div class="awards__images">
        

<a href="/car-insurance">



<picture>
    <source type="image/webp" srcset="/contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=91&amp;format=webp, /contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=182&amp;format=webp 2x">
    <source srcset="/contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=91, /contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=182 2x">

    <img src="/contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=91" height="104" width="91" alt="Youi">
</picture></a>
<a href="/car-insurance">



<picture>
    <source type="image/webp" srcset="/contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=91&amp;format=webp, /contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=182&amp;format=webp 2x">
    <source srcset="/contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=91, /contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=182 2x">

    <img src="/contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=91" height="104" width="91" alt="Youi">
</picture></a>
<a href="/car-insurance">



<picture>
    <source type="image/webp" srcset="/contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=91&amp;format=webp, /contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=182&amp;format=webp 2x">
    <source srcset="/contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=91, /contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=182 2x">

    <img src="/contentassets/e35aab5648ca411d95f5e059c7d91d92/brisbane-lions.png?v=4947d0&amp;width=91" height="104" width="91" alt="Youi">
</picture></a>
    </div>
</div>
                        </div>

                </div>
                <div class="hero__aside hero__aside--md ">
                    <div class="slideshow-element" data-js="slideshow-element">
                        

                    </div>
                </div>

            </div>
        </div>
    </div>

Test runner

Ready to run.

Test Ops/sec

for of

Testing in
Test	Ops/sec
for of	`const elements = []; const container = document.querySelector('[data-js="slideshow"]'); for (let element of container.querySelectorAll('[data-js="slideshow-element"]')) {elements.push(...Array.from(element.children)); }`	ready
.flatMap	`const container = document.querySelector('[data-js="slideshow"]'); const elements = Array.from(container.querySelectorAll('[data-js="slideshow-element"]')) .map((_) => { return Array.from(_.children); // Casting from Array<Element> }).flat();`	ready

const elements = [];
const container = document.querySelector('[data-js="slideshow"]');
for (let element of container.querySelectorAll('[data-js="slideshow-element"]')) {elements.push(...Array.from(element.children));
}

ready

.flatMap

const container = document.querySelector('[data-js="slideshow"]');
const elements = Array.from(container.querySelectorAll('[data-js="slideshow-element"]'))
            .map((_) => {
                return Array.from(_.children); // Casting from Array<Element>
            }).flat();

ready

Revisions

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

Revision 1: published on March 18, 2024
Revision 2: published on March 18, 2024