Benchmark: forEach vs for vs Query each

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){ console.log(el); });
for (Native)
var linkEls = document.querySelectorAll('link[href*=".min.css"]'); for(var i = 0; i < linkEls.length; i++) { var el = linkEls[i]; console.log(el); }
each (jQuery)
$('link[href*=".min.css"]').each(function(){ console.log(this); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
forEach (Native)	16235.0 Ops/sec
for (Native)	16620.3 Ops/sec
each (jQuery)	14370.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

The provided benchmark definition json represents a comparison of three methods to iterate over an HTML collection of link elements: `forEach` (native), `for` (native), and `each` (jQuery). The goal is to determine which approach is the fastest in this specific scenario.

**Options Compared**

We have three options:

1. **forEach (Native)**: This method uses a callback function to iterate over each element in the collection.
2. **for (Native)**: This method uses a traditional `for` loop to iterate over each element in the collection.
3. **each (jQuery)**: This method is specific to jQuery and uses its `each` function to iterate over each element in the collection.

**Pros and Cons**

Here's a brief overview of each approach:

* **forEach (Native)**:
	+ Pros: Easy to understand, concise code. No additional dependencies required.
	+ Cons: May not be optimized for performance, as it relies on the browser's internal iteration mechanism.
* **for (Native)**:
	+ Pros: Can be more efficient than `forEach`, as it allows for direct access to the elements being iterated over.
	+ Cons: More verbose code, requires manual indexing and bounds checking.
* **each (jQuery)**:
	+ Pros: Optimized for performance by jQuery's internal iteration mechanism. No additional dependencies required.
	+ Cons: Limited to use with jQuery, may not be familiar to non-JQuery developers.

**Library and Purpose**

In this case, the `each` method is part of the jQuery library, which provides a convenient way to manipulate HTML documents and elements. The `$.each` function takes two arguments: the first is an array-like object (in this case, a collection of link elements), and the second is a callback function that will be executed for each element in the collection.

**Special JS Features**

None are explicitly mentioned in the benchmark definition or results.

**Benchmark Preparation Code**

The provided HTML preparation code includes links to external CSS files, which are not necessary for the benchmark itself. The script preparation code is empty, indicating that no custom JavaScript functions or variables are being tested.

**Other Alternatives**

In addition to the three methods listed above, other iteration approaches could be used in this scenario, such as:

* Using `Array.prototype.forEach` (ECMAScript standard)
* Utilizing a library like Lodash's `each` function
* Implementing a custom iterator using Web Workers or WebAssembly

However, these alternatives are not part of the original benchmark definition and would require additional modifications to the test cases.

**In Summary**

The MeasureThat.net benchmark compares three methods for iterating over an HTML collection: `forEach` (native), `for` (native), and `each` (jQuery). Each approach has its pros and cons, with `foreach (Native)` being easy to understand but potentially less optimized, `for (Native)` offering more control but requiring more verbose code, and `each (jQuery)` providing a convenient, performance-optimized solution limited to use with jQuery.

Related benchmarks:

forEach vs for vs Query each (version: 0)

with <link>

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

Created: 8 years ago by: Registered User

Jump to the latest result

forEach (Native)

for (Native)

each (jQuery)

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