Benchmark: fors vs for..of vs NodeList.forEach vs Array.forEach vs jQuery.each

HTML Preparation code:

<content id="demo">Hello World!</content>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

Script Preparation code:

let content = '';
for (let i=0; i<10000; i+=1) {
    content += '<div class="component" data-component="component' + i + '">Content ' + i + '</div>';
}
document.getElementById("demo").innerHTML = content;

Tests:

for
let components = []; let values = []; const queryComponentsFor = document.querySelectorAll('[data-component]'); for (let i = 0; i < queryComponentsFor.length; ++i) { values.push(queryComponentsFor[i].getAttribute('data-component')); components.push(queryComponentsFor[i]); }
for..of
let components = []; let values = []; for (let el of document.querySelectorAll('[data-component]')) { values.push(el.getAttribute('data-component')); components.push(el); }
NodeList.forEach
let components = []; let values = []; document.querySelectorAll('[data-component]').forEach(el => { values.push(el.getAttribute('data-component')); components.push(el); });
Array.forEach
let components = []; let values = []; [...document.querySelectorAll('[data-component]')].forEach(el => { values.push(el.getAttribute('data-component')); components.push(el); });
jQuery.each
let components = []; let values = []; $('[data-component]').each((i, el) => { values.push(el.getAttribute('data-component')); components.push(el); });
for 2
let components = []; let values = []; const queryComponentsFor = document.querySelectorAll('[data-component]'); for (let i = 0, e; e = queryComponentsFor[i]; ++i) { values.push(queryComponentsFor[i].getAttribute('data-component')); components.push(queryComponentsFor[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
for
for..of
NodeList.forEach
Array.forEach
jQuery.each
for 2

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll do my best to break down the provided benchmark and its various test cases in a clear and concise manner.

**Benchmark Overview**

The benchmark measures the performance of different approaches for iterating over HTML elements. The test case creates 10,000 HTML elements with a unique data attribute, and then uses each approach to extract the value of that attribute from all elements.

**Approaches Compared**

The benchmark compares the following four approaches:

1. **For loop**: A traditional loop using an index variable `i` to iterate over the elements.
2. **For...of loop**: A modern loop using the `for...of` syntax, which iterates directly over the elements without needing an index variable.
3. **NodeList.forEach**: Using the `forEach` method on a NodeList (a collection of DOM elements).
4. **Array.forEach**: Converting the NodeList to an array and then using the `forEach` method.
5. **jQuery.each**: Using jQuery's `each` method, which is similar to Array.prototype.forEach but designed specifically for iterating over DOM elements.

**Pros and Cons of Each Approach**

Here are some general pros and cons of each approach:

* **For loop**: Simple and well-known, but can be slower due to the overhead of indexing.
* **For...of loop**: Modern and efficient, as it avoids the need for an index variable. However, older browsers may not support this syntax.
* **NodeList.forEach**: Efficient and modern, as it leverages the native iteration capabilities of NodeLists. However, requires a NodeList object to be created first.
* **Array.forEach**: Converts the NodeList to an array, which can add overhead. However, widely supported across all browsers.
* **jQuery.each**: Designed specifically for iterating over DOM elements, but may have additional overhead due to the jQuery library.

**Library and Special JS Features**

The benchmark uses jQuery's `each` method, which is a wrapper around Array.prototype.forEach. This allows us to leverage the efficiency of Array.prototype.forEach while still providing a familiar API for working with DOM elements.

There are no special JavaScript features used in this benchmark (e.g., async/await, Promises, Web Workers).

**Alternative Approaches**

Other approaches that could be considered but are not included in this benchmark:

* Using `requestAnimationFrame` or `setInterval` to iterate over the elements, which can provide more fine-grained control over iteration.
* Using a library like Lodash or Ramda for functional programming approaches, which can simplify the code and potentially improve performance.
* Using Web Workers or Worker_threads to parallelize the iteration process, which could significantly reduce overall execution time.

Overall, this benchmark provides a useful comparison of different approaches for iterating over HTML elements, highlighting the trade-offs between simplicity, efficiency, and compatibility.

Latest run results:

Run details: (Test run date: 6 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36

Browser/OS: Chrome 69 on Mac OS X 10.14.0

View result in a separate tab

Test name	Executions per second
for	272.4 Ops/sec
for..of	195.8 Ops/sec
NodeList.forEach	236.6 Ops/sec
Array.forEach	200.3 Ops/sec
jQuery.each	255.3 Ops/sec
for 2	267.4 Ops/sec

Related benchmarks:

fors vs for..of vs NodeList.forEach vs Array.forEach vs jQuery.each (version: 0)

Comparing performance of: for vs for..of vs NodeList.forEach vs Array.forEach vs jQuery.each vs for 2

Created: 6 years ago by: Guest

Jump to the latest result

for

for..of

NodeList.forEach

Array.forEach

jQuery.each

for 2

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):