Benchmark: jquery 1 vs 2 vs 3

HTML Preparation code:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script>
  var $jq1124 = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
  var $jq224 = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  var $jq331 = $.noConflict(true);
</script>
<div>
  <ul id="menu">
    <li class="menu-item">1</li>
    <li class="menu-item">2</li>
    <li class="menu-item">3</li>
    <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li>      <li class="menu-item">4</li> 
  </ul>
</div>

Script Preparation code:

function tests($) {
    $(".menu-item").eq(2).closest("ul").css({
      "background-color": "red"
    }).parent().css({
      "border": "1px solid blue"
    }).append($("<p></p>").text("Text.").css({
      "background-color": "green"
    })).end().end().remove();
  console.log('tests' + $);
}

Tests:

jq1.12.4
tests($jq1124);
jq2.2.4
tests($jq224);
jq3.4.1
tests($jq331);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jq1.12.4
jq2.2.4
jq3.4.1

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 13 days ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
jq1.12.4	58641.7 Ops/sec
jq2.2.4	76454.0 Ops/sec
jq3.4.1	71545.6 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark compares the performance of three different versions of the jQuery library: 1.12.4, 2.2.4, and 3.4.1.

**What is being tested?**

The test code manipulates a simple HTML structure containing an unordered list (`<ul>`) with several list items (`<li>`).  It performs the following actions:

* Selects the third list item using `.eq(2)`.
* Finds its closest parent `<ul>` element.
* Sets the background color of the `ul` to red and a border around its parent.
* Appends a new paragraph (`<p>`) with green background color and the text "Text." within the parent.
* Finally, it removes the entire original `<ul>` structure.

**Options being compared:**

Each test case runs the above code using a different version of jQuery:

* `jq1.12.4`: Represents an older version of jQuery. 
* `jq2.2.4`: A more recent version than 1.12.4, likely with performance improvements.
* `jq3.4.1`: The most recent version at the time of this benchmark.

**Pros/Cons and Considerations:**

* **Performance:** This benchmark directly measures execution speed (executions per second) for each jQuery version. 
    * A faster execution time indicates better performance in terms of handling DOM manipulations.
    * However, real-world performance depends on various factors like the complexity of the website, browser optimization, and other running scripts.

* **Library Age:** Older libraries might have less efficient code compared to newer versions that benefit from ongoing optimizations.

**jQuery:**

* jQuery is a widely used JavaScript library known for simplifying DOM manipulation, event handling, animation, and AJAX requests. It provides a concise syntax and a vast ecosystem of plugins and extensions.

**Alternatives:**

While jQuery was once dominant, several alternatives exist:

* **Vanilla JavaScript:** Using native browser APIs directly can be more performant in simple cases and offers greater control.
* **Other Frameworks/Libraries:**  React, Vue, Angular offer component-based architectures and advanced features for larger applications.

Let me know if you have any more questions or want to dive deeper into a specific aspect!

Related benchmarks:

jquery 1 vs 2 vs 3 (version: 0)

Comparing performance of: jq1.12.4 vs jq2.2.4 vs jq3.4.1

Created: 4 years ago by: Guest

Jump to the latest result

jq1.12.4

jq2.2.4

jq3.4.1

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):