Benchmark: forEach vs jQuery 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){});
each (jQuery)
$('link[href*=".min.css"]').each(function(){});

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 19 runs

forEach (Native)

703K/s

each (jQuery)

501K/s

Fastest: forEach (Native) (1.4x faster)

View exact numbers

✓ forEach (Native): 702,614 ops/sec
• each (jQuery): 500,611 ops/sec

Firefox 5 runs

forEach (Native)

927K/s

each (jQuery)

713K/s

Fastest: forEach (Native) (1.3x faster)

View exact numbers

✓ forEach (Native): 927,215 ops/sec
• each (jQuery): 713,257 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

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

Browser/OS: Chrome 140 on Windows

View result in a separate tab

forEach (Native)

713K/s

each (jQuery)

501K/s

View exact numbers

Test name	Executions per second
✓ forEach (Native)	712,809 Ops/sec
each (jQuery)	500,611 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks and explore what's tested on MeasureThat.net.

**Benchmark Overview**

The provided benchmark compares two approaches to iterate over an array of HTML elements in jQuery: `forEach` (Native) and `each` (jQuery). The test case uses the `link` element with a specific attribute (`href*="min.css"`), which is likely related to CSS files, as indicated by the presence of multiple links with this class.

**Options Compared**

The two options being compared are:

1. **forEach (Native)**: This approach uses the native JavaScript `forEach` method to iterate over an array of elements.
2. **each (jQuery)**: This approach uses the jQuery library's `each` function to iterate over an array of elements.

**Pros and Cons**

**forEach (Native)**

Pros:

* Lightweight: This approach doesn't require loading the entire jQuery library, making it a more lightweight option.
* Native performance: As native JavaScript, this method is likely to have better performance since it doesn't introduce additional overhead from a library.

Cons:

* Limited functionality: `forEach` only provides basic iteration functionality and might not offer advanced features like event handling or manipulation of elements.

**each (jQuery)**

Pros:

* Convenience: This approach leverages the jQuery library, which is widely used and familiar to many developers. It also offers more features and capabilities than native `forEach`.
* Easier to use: The `each` function provides a simple and intuitive way to iterate over an array of elements.

Cons:

* Additional overhead: Loading the entire jQuery library can introduce additional overhead and slower performance compared to native `forEach`.

**Library Considerations**

The test case uses the jQuery library, which is a popular JavaScript library for DOM manipulation and event handling. The `each` function in jQuery provides a convenient way to iterate over an array of elements while also offering more features like event handling and manipulation.

**Special JS Feature/Syntax**

This benchmark doesn't mention any special JavaScript features or syntax that would require additional explanation. It only uses standard JavaScript and jQuery functions.

**Alternatives**

Other alternatives for iterating over arrays of HTML elements in JavaScript include:

1. `for` loop: A basic, lightweight approach that can be used when the array size is small.
2. `map()`, `filter()`, and `reduce()` methods: These higher-order functions provide more advanced iteration capabilities but may have different performance characteristics depending on the use case.

Keep in mind that the choice of iteration method depends on the specific requirements of your project, such as performance, simplicity, or feature set.

In summary, MeasureThat.net's benchmark compares two approaches to iterate over an array of HTML elements: native `forEach` and jQuery's `each`. The choice between these options depends on factors like performance, library usage, and desired features.

forEach vs jQuery each (version: 0) Benchmark.js

with <link>

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

Created: 10 years ago by: Registered User

Go to the latest result

forEach (Native)

each (jQuery)

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 19 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

forEach vs jQuery each (version: 0) Benchmark.js

with <link>

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

Created: 10 years ago by: Registered User

Go to the latest result

forEach (Native)

each (jQuery)

Historical Performance Data aggregated from 24 community runs

Desktop Results:

Chrome 19 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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