Benchmark: $.each vs for loop

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<select id="number"></select>

Script Preparation code:

function createOptions(number) {
  var options = [];

  for (var i = 0; i < number; i++) {
    var option = '<option value="' + i + '">Option ' + i + '</option>';
    options.push(option);
  }
  
  $('#number').append(options);
}

createOptions(1000);

var $options = $('#number').find('option');

Tests:

$.each
$options.each(function (index) { var $option = $(this); });
for loop
for (var i = 0, option; option = $options[i]; i++) { var $option = $(option); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
$.each
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 71 on Windows

View result in a separate tab

Test name	Executions per second
$.each	1788.9 Ops/sec
for loop	1776.5 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.

**Benchmark Definition and Script Preparation Code**

The benchmark tests the performance difference between using `$.each` (a jQuery method) versus a traditional `for` loop to iterate over an array of options and append them to an HTML select element. The script preparation code creates an array of 1000 options, appends it to a select element with an ID of "number", and then calls the `createOptions` function.

**Html Preparation Code**

The html preparation code includes a reference to jQuery version 3.1.1 and a basic HTML structure for a select element with an ID of "number".

**Individual Test Cases**

There are two test cases:

1. **$.each**: This test case uses the `$.each` method to iterate over the array of options. It iterates over the array, and for each option, it finds the corresponding HTML element using jQuery's `$()` method.
2. **For Loop**: This test case uses a traditional `for` loop to iterate over the array of options. It uses the `[i]` indexing syntax to access each option in the array.

**Pros and Cons**

Both approaches have their pros and cons:

* **$.each**:
	+ Pros: Concise, easy to read, and less error-prone than a traditional `for` loop.
	+ Cons: May be slower due to the overhead of jQuery's method calls.
* **For Loop**:
	+ Pros: Directly controls iteration speed, can be optimized for performance.
	+ Cons: Can be verbose and harder to read, especially for complex iterations.

**Library and Purpose**

The `$.each` method is a part of the jQuery library. It provides a convenient way to iterate over arrays or other iterable objects without exposing you to low-level details.

**Special JS Feature/Syntax**

None of the test cases utilize any special JavaScript features or syntax beyond standard ECMAScript syntax.

**Other Alternatives**

If you were to implement this benchmark yourself, here are some alternative approaches:

1. **Array.forEach**: Similar to `$.each`, but part of the standard ECMAScript API.
2. **For...of Loop**: A modern `for` loop variant that can be used for iteration without index variables.
3. **While Loop with Indexing**: Another traditional `for` loop approach that uses an indexing variable.

Keep in mind that these alternatives might not produce identical results due to differences in JavaScript engine optimizations, caching, or other factors.

Overall, the choice between `$.each` and a traditional `for` loop depends on your personal preference, the specific requirements of your project, and any performance optimization considerations you may have.

Related benchmarks:

$.each vs for loop (version: 7)

Comparing performance of: $.each vs for loop

Created: 7 years ago by: Registered User

Jump to the latest result

$.each

for loop

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