Benchmark: each (jQuery 3.6.4) vs for

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/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:

each (jQuery)
$('link[href*=".min.css"]').each(function(){});
for
let test = $('link[href*=".min.css"]'); for(var i = 0, j = test.length; i < j; i += 1){ }
for without jQuery
let test = document.querySelectorAll('link[href*=".min.css"]'); for(var i = 0, j = test.length; i < j; i += 1){ }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
each (jQuery)
for
for without 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/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Windows

View result in a separate tab

Test name	Executions per second
each (jQuery)	502558.7 Ops/sec
for	515702.5 Ops/sec
for without jQuery	1279648.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Overview**

The `MeasureThat.net` website allows users to create and run JavaScript microbenchmarks, which is useful for comparing the performance of different approaches in various scenarios. The provided benchmark involves testing three approaches: using jQuery's `each()` method, a traditional `for` loop, and a variation without jQuery.

**Test Case 1: `each (jQuery)`**

This test case uses the `each()` function from jQuery to iterate over an array of elements that match a specific CSS selector (`link[href*="*.min.css"]`). The script preparation code includes the jQuery library, which is loaded before the benchmark code.

The purpose of this test case is to evaluate the performance of using jQuery's `each()` method for iterating over arrays of DOM elements.

**Test Case 2: `for`**

This test case uses a traditional `for` loop to iterate over an array of elements that match the same CSS selector as in Test Case 1. The script preparation code is empty, indicating that only the benchmark code is executed.

The purpose of this test case is to evaluate the performance of using a traditional `for` loop for iterating over arrays of DOM elements.

**Test Case 3: `for without jQuery`**

This test case uses the `querySelectorAll()` method from the DOM API to retrieve an array of elements that match the same CSS selector as in Test Cases 1 and 2. The script preparation code includes a link to load the necessary stylesheets, but only the benchmark code is executed.

The purpose of this test case is to evaluate the performance of using the `querySelectorAll()` method for iterating over arrays of DOM elements without relying on jQuery.

**Library: jQuery**

In Test Case 1, the `each()` function from jQuery is used. The library's primary purpose is to simplify DOM manipulation and event handling in web applications. In this benchmark, it's used as a way to iterate over arrays of DOM elements.

**JavaScript Features/Syntax: None**

There are no special JavaScript features or syntaxes used in these test cases. They focus on the performance comparison between different iteration methods.

**Benchmark Results**

The latest benchmark results show that:

* The `for without jQuery` approach is the fastest, with an average of 1279648.625 executions per second across all runs.
* The traditional `for` loop approach is slower, with an average of 515702.46875 executions per second.
* The `each (jQuery)` approach falls in between, with an average of 502558.6875 executions per second.

**Other Alternatives**

Some alternative iteration methods could be considered for future benchmarks:

* `forEach()` method: This is a more modern and concise way to iterate over arrays in JavaScript. Its performance might be comparable to or even better than the traditional `for` loop.
* `map()`, `filter()`, and other array methods: These methods can be used in combination with iteration techniques like `for...of` loops to create efficient and readable code.

Keep in mind that these alternative approaches would require adjustments to the benchmark setup and script preparation code.

Related benchmarks:

each (jQuery 3.6.4) vs for (version: 0)

Comparing performance of: each (jQuery) vs for vs for without jQuery

Created: one year ago by: Guest

Jump to the latest result

each (jQuery)

for

for without jQuery

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