Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
for vs foreach DOM elements
(version: 0)
Comparing performance of:
for vs forEach
Created:
6 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<span id="democlass"> <h1 class="ob-recIdx-0">Hello World</h1> <h1 class="ob-recIdx-1">Hello World</h1> <h1 class="ob-recIdx-2">Hello World</h1> <h1 class="ob-recIdx-3">Hello World</h1> <h1 class="ob-recIdx-4">Hello World</h1> </span>
Tests:
for
var count = document.querySelectorAll('#democlass h1').length; for (var i = 0; i < count; i++) { //let currentIndex = String(i); var currentElement = document.querySelector('.ob-recIdx-' + i); currentElement.style.visibility = "hidden"; currentElement.classList.add('playerPlay'); }
forEach
var arr = document.querySelectorAll('#democlass h1'); arr.forEach(function(element){ element.style.visibility = "hidden"; element.classList.add('playerPlay'); });
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
for
forEach
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6.1 Safari/605.1.15
Browser/OS:
Safari 17 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=589306" width="100%" height="500px"></iframe>
forEach
474K/s
for
359K/s
View exact numbers
Test name
Executions per second
✓
forEach
473,955 Ops/sec
for
358,582 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and its test cases. **What is being tested?** The provided benchmark tests two approaches to iterate over a set of DOM elements: `for` loop and `forEach` method. **Options compared** In this benchmark, we have two options: 1. **For Loop**: This is a traditional, manual approach to iterating over an array-like object (in this case, the DOM elements). The loop variable `i` is incremented manually using `i++`. 2. **ForEach Method**: This is a built-in method in JavaScript that iterates over an array-like object and executes a callback function for each element. **Pros and Cons of each approach** **For Loop:** Pros: * More control over the iteration process * Can be used with arrays or any other iterable objects Cons: * Manual loop variable management can lead to bugs * May require more code than using `forEach` **ForEach Method:** Pros: * Convenient and easy to use * Automatic loop variable management * Less prone to bugs compared to manual loops Cons: * Limited control over the iteration process * Can be slower due to the overhead of method calls **Library Used** In this benchmark, the `document.querySelectorAll` function is used to retrieve an array-like object representing the DOM elements. This is a built-in JavaScript library. **Special JS Feature or Syntax** There doesn't seem to be any special JavaScript features or syntax being tested in this benchmark. However, it's worth noting that the use of the `let` keyword for variable declaration (e.g., `let currentIndex = String(i);`) is a modern JavaScript feature introduced in ECMAScript 2015. **Benchmark Preparation Code** The provided HTML code creates a container element with multiple child elements (`h1` tags), which are used as the test subjects. The `Script Preparation Code` field is empty, but it's likely that any scripts or libraries required for the benchmark will be loaded separately. **Other Alternatives** Some alternative approaches to iterating over DOM elements might include: * Using a `for...of` loop (which is similar to `forEach`, but more concise) * Using an arrow function (`=>`) with `forEach` * Creating a custom iterator using `Array.prototype[Symbol.iterator]` * Using a library like Lodash or Ramda for iteration and manipulation of DOM elements However, these alternatives are not tested in this benchmark.
Related benchmarks
for vs for..of vs NodeList.forEach vs Array.forEach vs jQuery.each
querySelectorAll foreach vs getElementsByClassName [].forEach.call() 2
Array.prototype.forEach.call vs. Array.from(getElementsByClassName).forEach - remove(
Comments
Confirm delete:
Do you really want to delete benchmark?