Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
NodeList loop iterator comparison
(version: 0)
Comparing performance of:
for ... of vs Array.from
Created:
3 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<ul> </ul> <ol> </ol>
Script Preparation code:
const ul = document.querySelector('ul'); const ol = document.querySelector('ul'); for (let i = 0; i < 1000; i++) { const li = document.createElement('li') li.classList.add(i % 2 === 0 ? 'even' : 'odd') ul.appendChild(document.createElement('li')); ol.appendChild(document.createElement('li')); } var oddListItems = document.querySelectorAll('li.odd'); var anything = [];
Tests:
for ... of
for (const item of oddListItems) { anything.push(item); }
Array.from
Array.from(oddListItems).forEach(item => anything.push(item));
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
for ... of
Array.from
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:131.0) Gecko/20100101 Firefox/131.0
Browser/OS:
Firefox 131 on Ubuntu
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=563536" width="100%" height="500px"></iframe>
for ... of
54.4M/s
Array.from
19.4M/s
View exact numbers
Test name
Executions per second
✓
for ... of
54,437,792 Ops/sec
Array.from
19,368,260 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the JavaScript microbenchmark on MeasureThat.net. **What is being tested?** The benchmark measures the performance of two approaches for iterating over an array or NodeList: `for ... of` and `Array.from()`. The test case creates 1000 NodeList items (even and odd) in both HTML unordered lists (`ul`) and ordered lists (`ol`). The goal is to push each item into a new empty array called `anything`. **Options compared** The two options being compared are: 1. **`for ... of`**: This syntax allows iterating over an iterable object, such as an array or NodeList, without explicitly indexing into it. 2. **`Array.from()`**: This method creates a new array from an iterable object. **Pros and Cons** * `For ... of`: * Pros: Easier to read, less verbose, and more intuitive for many developers. * Cons: May be slower in certain situations due to the overhead of the iterator protocol. * `Array.from()`: * Pros: Can be faster because it uses a single method call to create an array from an iterable object. * Cons: More verbose, and may require additional understanding of the `Array.prototype.forEach()` method. **Library/Function** In this test case, no specific JavaScript library is used. However, some basic HTML elements like `<ul>`, `<ol>`, and `<li>` are used to create the NodeList. **Special JS feature/Syntax** The benchmark uses the new `for ... of` syntax, which was introduced in ECMAScript 2015 (ES6). This syntax allows iterating over an iterable object without explicitly indexing into it. The `Array.from()` method is also a part of ES6 and has been widely adopted. **Other alternatives** If `for ... of` or `Array.from()` are not suitable for this use case, other alternatives could be: * Manual indexing (`while` loop): Push items into the array using an index variable. * `forEach()`: Similar to `Array.from()`, but uses a callback function instead of creating a new array. * Custom iterators: Create a custom iterator using the `Iterator` class or a generator function. These alternatives may have different performance characteristics and syntax requirements, so it's essential to evaluate them based on the specific use case.
Related benchmarks
jQuery .html() vs Element.innerHTML fixed
Array.from vs Spread with Node List DOM
Comments
Confirm delete:
Do you really want to delete benchmark?