Benchmark: Array.from vs Array.protptype.slice.call Performance

HTML Preparation code:

<ul class="variants__list">








    <li class="variants__block variants__block--active" data-value="14923067392052" data-sku="10082" data-variant-id="14923067392052" data-variant-price="$19.95" data-compare-at-price="$19.95" data-region-price="19.95">
        1-2 ft.


        <div class="variants__price region_variant_price">$19.95</div>




        <span id="PctOffPill-14923067392052" class="variants__discount region_discount_bubble" style="display: none;"><span class="pct-off region-pct-off"></span></span>



    </li>












    <li class="variants__block" data-value="13940743471156" data-sku="10083" data-variant-id="13940743471156" data-variant-price="$49.95" data-compare-at-price="$49.95" data-region-price="49.95">
        2-3 ft.


        <div class="variants__price region_variant_price">$49.95</div>




        <span id="PctOffPill-13940743471156" class="variants__discount region_discount_bubble" style="display:none;"></span>



    </li>












    <li class="variants__block" data-value="13940743503924" data-sku="10084" data-variant-id="13940743503924" data-variant-price="$69.95" data-compare-at-price="$69.95" data-region-price="69.95" data-region-compare-price="79.95" data-region-discount="12% Off">
        3-4 ft.


        <div class="variants__price region_variant_price">$69.95</div>




        <span id="PctOffPill-13940743503924" class="variants__discount region_discount_bubble">12% Off</span>



    </li>




































    <li class="variants__block" data-value="40025884917822" data-sku="16803" data-variant-id="40025884917822" data-variant-price="$399.95" data-compare-at-price="$399.95">
        5-6 ft. Jumbo


        <div class="variants__price">$399.95</div>




        <span id="PctOffPill-40025884917822" class="variants__discount region_discount_bubble" style="display:none;"></span>



    </li>




















    <li class="variants__block" data-value="14923075780660" data-sku="13270" data-variant-id="14923075780660" data-variant-price="$139.95" data-compare-at-price="$199.95" data-normal-percentage-off="30% Off" data-region-price="139.95" data-region-compare-price="199.95" data-region-discount="30% Off">
        10-Pack (1-2 ft.)


        <div class="variants__price region_variant_price">$139.95</div>




        <span id="PctOffPill-14923075780660" class="variants__discount region_discount_bubble">30% Off</span>



    </li>




















    <li class="variants__block" data-value="39561301033022" data-sku="13271" data-variant-id="39561301033022" data-variant-price="$599.95" data-compare-at-price="$699.50" data-normal-percentage-off="14% Off" data-region-price="599.95" data-region-compare-price="699.50" data-region-discount="14% Off">
        10-Pack (3-4 ft.)


        <div class="variants__price region_variant_price">$599.95</div>




        <span id="PctOffPill-39561301033022" class="variants__discount region_discount_bubble">14% Off</span>



    </li>




























    <li class="variants__block" data-value="40044376981566" data-sku="16902" data-variant-id="40044376981566" data-variant-price="$2,999.50" data-compare-at-price="$3,999.50" data-normal-percentage-off="25% Off">
        10-Pack (5-6 ft. Jumbo)


        <div class="variants__price">$2,999.50</div>




        <span id="PctOffPill-40044376981566" class="variants__discount region_discount_bubble" style="">25% Off</span>



    </li>













</ul>

Tests:

Array.from
Array.from(document.querySelectorAll('.variants__block[data-normal-percentage-off]'))
Array.prototype.slice.call
Array.prototype.slice.call(document.querySelectorAll('.variants__block[data-normal-percentage-off]'))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.from
Array.prototype.slice.call

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Browser/OS: Chrome 121 on Windows

View result in a separate tab

Test name	Executions per second
Array.from	35730.2 Ops/sec
Array.prototype.slice.call	37822.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested on MeasureThat.net.

The benchmark compares the performance of two JavaScript methods: `Array.from` and `Array.prototype.slice.call`.

**What are they doing?**

Both methods are used to convert an HTML collection (in this case, elements with the class `.variants__block[data-normal-percentage-off]`) into an Array. The main difference is how they achieve this:

* `Array.from()` takes an iterable (like a HTML collection) and converts it into an array.
* `Array.prototype.slice.call()`, on the other hand, uses the `slice` method to extract a subset of elements from an array-like object and then calls the `call` method to apply the function `slice` to that extracted subset.

**Why is this benchmark important?**

This benchmark might be useful for optimizing JavaScript performance in web applications, especially when dealing with large datasets or complex DOM structures. By comparing the execution times of these two methods, developers can determine which one is faster and more efficient for their specific use cases.

Now, let's take a look at the latest benchmark results:

* `Array.prototype.slice.call()` has an average execution time of approximately 35730 executions per second.
* `Array.from()` has an average execution time of approximately 37822 executions per second.

Based on these results, it appears that `Array.from()` is slightly faster than `Array.prototype.slice.call()`. However, the difference is not drastic, and other factors like JavaScript engine optimizations, browser version, and hardware might influence the actual performance.

Related benchmarks:

Array.from vs Array.protptype.slice.call Performance (version: 0)

Comparing performance of: Array.from vs Array.prototype.slice.call

Created: one year ago by: Registered User

Jump to the latest result

Array.from

Array.prototype.slice.call

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):