Benchmark: JQuery 1.11.1 vs 2.1.4 vs 3.3.1

HTML Preparation code:

<div id="idSelector"></div>
<div class="classSelector"></div>
<ul id="iteration">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div id="cssGetter" style="color: black;"></div>
<div id="cssSetter" style="color: black;"></div>
<div id="find">
    <span></span>
    <div>
        <strong></strong>
    </div>
</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
  var $jq111 = $.noConflict(true);
</script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
  var $jq214 = $.noConflict(true);
</script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
  var $jq331 = $.noConflict(true);
</script>

Script Preparation code:

function tests($) {
  // Filter Next
  $('#iteration li').filter(':first').next();
  
  // Filter Prev
  $('#iteration li').filter(':last').prev();
  
  // Non-existant Class
  $('.someClass');
  
  // Non-existant ID
  $('#someID');
  
  // Find
  $('#find').find('strong');
  
  // Set color
  $('#cssSetter').css('color', 'red');
  
  // Get color
  $('#cssGetter').css('color');
  
  // Iteration
  $('#iteration li').each(function(i, e) {
    i++;
  });
  
  // Class selector
  $('.classSelector');
  
  // ID selector
  $('#idSelector');
}

Tests:

1.11.1
tests($jq111);
2.1.4
tests($jq214);
3.3.1
tests($jq331);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
1.11.1
2.1.4
3.3.1

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; rv:138.0) Gecko/20100101 Firefox/138.0

Browser/OS: Firefox 138 on Windows

View result in a separate tab

Test name	Executions per second
1.11.1	17467.2 Ops/sec
2.1.4	26261.8 Ops/sec
3.3.1	27158.0 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 explanation of the provided benchmark.

**Overview**
The MeasureThat.net website allows users to create and run JavaScript microbenchmarks. In this specific case, we have a benchmark that compares the performance of different versions of jQuery (1.11.1, 2.1.4, and 3.3.1).

**Benchmark Definition JSON**
The benchmark definition is represented as a JSON object with three main sections:

*   **Script Preparation Code**: This section defines a function `tests($)` that contains the code for each test case. The `$` symbol is used to refer to the jQuery object, which is injected into the scope of the function.
*   **Html Preparation Code**: This section defines the HTML structure for the benchmark, including elements with IDs and classes that will be used in the tests.
*   **Benchmark Definition**: This section lists three individual test cases, each corresponding to a different version of jQuery.

**Options Compared**
The benchmark compares the performance of the following options:

*   **jQuery 1.11.1 vs 2.1.4 vs 3.3.1**: Each test case uses a different version of jQuery, and the benchmark measures their execution times.
*   **`.noConflict()`**: The `$.noConflict()` method is used to create a new scope for each test case, allowing us to compare the performance of different versions of jQuery without conflicts.

**Pros and Cons**

### jQuery Versions

*   **1.11.1 vs 2.1.4**
    *   Pros:
        *   Both versions are relatively old, so the differences in performance might be less noticeable.
    *   Cons:
        *   The older versions may have more compatibility issues or deprecated features compared to newer versions like 3.3.1.
*   **1.11.1 vs 3.3.1**
    *   Pros:
        *   Comparing an old version with a new one can highlight the performance improvements made in newer versions.
    *   Cons:
        *   The older version may have more compatibility issues or deprecated features compared to newer versions like 2.1.4.
*   **2.1.4 vs 3.3.1**
    *   Pros:
        *   This comparison highlights the performance improvements made in newer versions of jQuery, such as 3.3.1.
    *   Cons:
        *   There may be some compatibility issues or deprecated features in older versions like 2.1.4.

### `.noConflict()`

*   **Pros:**
    *   Allows for clean comparison between different versions of jQuery without conflicts.
*   **Cons:**
    *   May introduce additional overhead due to the creation of new scopes and variable renaming.

**Other Considerations**

*   **Browser Support**: The benchmark is run on Chrome 128, which may limit its usefulness for testing in other browsers or environments.
*   **Device Platform**: The benchmark is run on a desktop device, which may not accurately represent performance in mobile devices or other platforms.

**Alternatives**

There are several alternatives to MeasureThat.net for creating and running JavaScript microbenchmarks. Some popular options include:

*   **BenchmarkJS**: A Node.js-based benchmarking framework that allows for more customization and control over the benchmarking process.
*   **JsPerf**: A web-based benchmarking tool specifically designed for comparing the performance of JavaScript code.
*   **Benchpress**: An open-source benchmarking library that provides a simple way to create and run benchmarks in Node.js applications.

These alternatives offer different features, flexibility, and control over the benchmarking process, allowing users to choose the best fit for their specific needs.

Related benchmarks:

JQuery 1.11.1 vs 2.1.4 vs 3.3.1 (version: 0)

SImple benchmark of jQuery versions

Comparing performance of: 1.11.1 vs 2.1.4 vs 3.3.1

Created: 7 years ago by: Guest

Jump to the latest result

1.11.1

2.1.4

3.3.1

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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