Benchmark: Arffrom - MeasureThat.net

HTML Preparation code:

<div>
  <ul>
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
  </ul>
</div>
<script>
  function toArray(collection) {
   var result = [],
       i = -1;
   while (result[++i] = collection[i]) {};
   result.length--;
   return result;
  }
  
  const liveList = document.getElementsByTagName('a');
  const statList = document.querySelectorAll('a');
  const liveArr = toArray(liveList);
  const liveArrFrom = Array.from(liveList);
  const statArrFrom = Array.from(statList);
</script>

Tests:

liveArr
for (var i = 0, length = liveArr.length; i < length; i++) { liveArr[i].nodeName; }
liveArrFrom
for (var i = 0, length = liveArrFrom.length; i < length; i++) { liveArrFrom[i].nodeName; }
statArrFrom
for (var i = 0, length = statArrFrom.length; i < length; i++) { statArrFrom[i].nodeName; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
liveArr
liveArrFrom
statArrFrom

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.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and benchmark preparation code.

**What is being tested?**

The test cases are comparing the performance of three different ways to iterate over HTML collections (lists) in JavaScript:

1. Using `document.getElementsByTagName('a')` to get a live collection, and then iterating over it using a traditional `for` loop (`liveArr`).
2. Converting the same live collection to an array using `Array.from()` and then iterating over it using a traditional `for` loop (`liveArrFrom`).
3. Using `document.querySelectorAll('a')` to get a static collection, converting it to an array using `Array.from()`, and then iterating over it using a traditional `for` loop (`statArrFrom`).

**What are the options being compared?**

The three test cases compare different ways to:

1. Get an HTML collection (list) of elements: `document.getElementsByTagName()` vs `document.querySelectorAll()`
2. Convert the collection to an array: `toArray()` (a custom function) vs `Array.from()`

**Pros and cons of each approach:**

* **`document.getElementsByTagName('a')`**: This method returns a live collection, which means it's connected to the DOM and can change dynamically if elements are added or removed. However, this also means that iterating over the collection using a traditional `for` loop (`liveArr`) can be slow because it needs to check for changes on every iteration.
* **`Array.from()`**: This method converts a live or static collection to an array, which is a snapshot of the elements at a given point in time. Iterating over an array is generally faster than iterating over a collection because there are no dynamic checks. However, converting the collection to an array incurs some overhead.
* **`document.querySelectorAll('a')`**: This method returns a static collection, which means it's not connected to the DOM and doesn't change dynamically. Converting this collection to an array using `Array.from()` is generally faster than iterating over the live collection because there are no dynamic checks.

**Other considerations:**

* The test cases use a custom function `toArray()` to convert the live collection to an array, which might not be the most efficient way to do so.
* The performance difference between the three approaches might vary depending on the size and complexity of the HTML collection, as well as other factors like browser optimization.

**What is the library used in this test case?**

None, the test cases use built-in JavaScript methods and functions only.

**What are the special JS features or syntax used in this test case?**

* `Array.from()`: This is a modern JavaScript method that converts an iterable (like a collection) to an array.
* `document.querySelectorAll()`: This is a modern JavaScript method that returns a static collection of elements matching a CSS selector.

**What are the other alternatives?**

Other ways to iterate over HTML collections include using:

* A traditional `for` loop with `element[i]`
* Modern iterator methods like `forEach()` or `entries()`
* Libraries like Lodash or Ramda, which provide additional utility functions for working with arrays and collections.

Related benchmarks:

Arffrom (version: 0)

Comparing performance of: liveArr vs liveArrFrom vs statArrFrom

Created: 6 years ago by: Guest

Jump to the latest result

liveArr

liveArrFrom

statArrFrom

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):