Benchmark: Array like to array convertion

HTML Preparation code:

<section>
    <p>Lobo-cinzento (nome científico:Canis lupus) é uma espécie de mamífero canídeo do gênero Canis. É um sobrevivente
      da Era do Gelo, originário do Pleistoceno Superior, cerca de 300 mil anos atrás. É o maior membro remanescente
      selvagem da família canidae.</p>
    <p>Os lobos-cinzentos são tipicamente predadores ápice nos ecossistemas que ocupam. Embora não sejam tão adaptáveis
      à
      presença humana como geralmente ocorre com as demais.</p>
    <p>O peso e tamanho dos lobos variam muito em todo o mundo, tendendo a aumentar proporcionalmente com a latitude.</p>
    <p>Os lobos são capazes de percorrer longas distâncias com uma velocidade média de 10 quilômetros por hora e são
      conhecidos por.</p>
  </section>

Tests:

slice.call
const paragrafos = document.querySelectorAll('section p'); const arrayParagrafos = Array.prototype.slice.call(paragrafos);
Array.from
const paragrafos = document.querySelectorAll('section p'); const arrayParagrafos = Array.from(paragrafos);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice.call
Array.from

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript microbenchmarks can be a complex task, as it depends on various factors such as the JavaScript engine, browser version, and system configuration.

The provided benchmark definition json represents two test cases:

1. `slice.call()`
2. `Array.from()`

Both tests are designed to measure the performance of converting an HTML collection of paragraph elements to an array using different methods.

**Options compared:**

* `slice.call()`:
	+ This method uses the `slice()` function from the `Array.prototype` and calls it with the `call()` method to convert the HTML collection to an array.
	+ The `slice()` function returns a new array with the specified elements, effectively "cutting" the original collection into an array.
* `Array.from()`: 
	+ This method uses the `from()` function from the `Array` constructor and passes the HTML collection as an argument. It creates a new array with all elements from the collection.

**Pros and cons of each approach:**

* `slice.call()`
	+ Pros:
		- Wide support across browsers and JavaScript engines.
		- Typically faster, as it uses built-in functions and is optimized for performance.
	+ Cons:
		- Can be less readable due to the use of `call()` method.
		- May require more memory allocations if the collection is large.
* `Array.from()`
	+ Pros:
		- More concise and expressive than `slice.call()`.
		- Better support for async iteration (e.g., using `for...of` loop).
	+ Cons:
		- Slightly slower due to additional function call overhead.
		- May not work in older browsers or JavaScript engines that don't support modern `Array` methods.

**Library and its purpose:**

* No explicit library is used in this benchmark. However, it relies on the browser's built-in functionality for working with HTML collections.

**Special JS feature/syntax:**

There are no special JavaScript features or syntaxes used in these benchmarks. The focus is solely on comparing the performance of two array conversion methods.

**Other alternatives:**

Other array conversion methods that could be considered as alternatives include:

* Using `Array.prototype.map()` and collecting the results into an array.
* Utilizing `Promise.all()` with a promise for each element in the collection.
* Employing a custom loop or recursion to convert the HTML collection to an array.

Keep in mind that these alternative approaches might have different performance characteristics, readability, and compatibility issues depending on the specific use case.

Related benchmarks:

Array like to array convertion (version: 0)

Comparing performance of: slice.call vs Array.from

Created: 7 years ago by: Registered User

Jump to the latest result

slice.call

Array.from

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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