Benchmark: forEach vs jQuery each vs for-of

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.min.css" type="text/css">
<link rel="stylesheet" href="style.min.css" type="text/css">
<link rel="stylesheet" href="style.min.css" type="text/css">
<link rel="stylesheet" href="style.min.css" type="text/css">
<link rel="stylesheet" href="style.min.css" type="text/css">

Tests:

forEach (Native)
var linkEls = document.querySelectorAll('link[href*=".min.css"]'); [].forEach.call(linkEls,function(el){});
each (jQuery)
$('link[href*=".min.css"]').each(function(){});
for-of
var linkEls = document.querySelectorAll('link[href*=".min.css"]'); for (let link of linkEls){ link == link }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach (Native)
each (jQuery)
for-of

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0

Browser/OS: Firefox 82 on Windows

View result in a separate tab

Test name	Executions per second
forEach (Native)	394489.7 Ops/sec
each (jQuery)	219571.3 Ops/sec
for-of	367844.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing three different approaches to iterate over an array of elements:

1. **Native `forEach`**: Using the native JavaScript `forEach` method, which calls a callback function for each element in the array.
2. **jQuery `.each`**: Using the jQuery library's `.each` method, which also iterates over an array of elements and calls a callback function for each one.
3. **ECMAScript 2015 (ES6) `for-of` loop**: Using the new `for-of` loop syntax introduced in ECMAScript 2015, which allows iterating directly over arrays without using `forEach` or indexing.

**Pros and Cons of Each Approach**

1. **Native `forEach`**:
	* Pros: Efficient and easy to use.
	* Cons: May not be as efficient as other methods on modern browsers, since it uses a callback function that can lead to slower execution.
2. **jQuery `.each`**:
	* Pros: Widely supported by older browsers, including Internet Explorer, due to jQuery's polyfills.
	* Cons: Adds unnecessary overhead due to the use of jQuery and its event loop, which can slow down performance.
3. **ECMAScript 2015 (ES6) `for-of` loop**:
	* Pros: Modern browsers support this syntax natively, making it efficient and easy to use.
	* Cons: May not work in older browsers that don't support ECMAScript 2015.

**Library and Syntax**

The benchmark uses jQuery for the `.each` method. The `forEach` method is native JavaScript, while the `for-of` loop is a modern syntax introduced in ECMAScript 2015.

**Special JS Feature or Syntax**

None of these examples use any special JavaScript features or syntax beyond what's already mentioned.

**Other Alternatives**

If you want to test other iteration methods, here are some alternatives:

* Array.prototype.reduce()
* Array.prototype.map()
* Array.prototype.filter()

For example, you could add a fourth test case using the `reduce` method:
```javascript
"Benchmark Definition": "var sum = 0;\r\nlinkEls.forEach(function(el) {\r\n  sum += parseInt(el.href);\r\n});\r\nconsole.log(sum);"
```
This would compare the performance of the `forEach`, `.each`, and `for-of` loops to the `reduce` method.

Related benchmarks:

forEach vs jQuery each vs for-of (version: 0)

with <link>

Comparing performance of: forEach (Native) vs each (jQuery) vs for-of

Created: 4 years ago by: Guest

Jump to the latest result

forEach (Native)

each (jQuery)

for-of

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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