<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.5.0/jquery.min.js"></script><script> var $jq350 = $.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">5</li> <li class="menu-item">6</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> <li class="menu-item">7</li> </ul></div>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($jq1124);tests($jq224);tests($jq350);--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| jquery 1.12.4 | |
| jquery 2.2.4 | |
| jquery 3.5.0 |
| Test name | Executions per second |
|---|---|
| jquery 1.12.4 | 17520.5 Ops/sec |
| jquery 2.2.4 | 22572.3 Ops/sec |
| jquery 3.5.0 | 22719.6 Ops/sec |
I'll break down the benchmark and explain what's being tested, compared, and some of the considerations.
Benchmark Overview
The benchmark is designed to compare the performance of three different versions of jQuery: 1.12.4, 2.2.4, and 3.5.0. The tests are run using Firefox 112 on a desktop Windows platform.
Test Cases
There are three test cases:
jquery 1.12.4jquery 2.2.4jquery 3.5.0Each test case has a single benchmark definition, which is the same: tests($jqX);, where $jqX is replaced with the version number of jQuery.
Script Preparation Code
The script preparation code sets up the HTML and JavaScript environment for each test case. It creates a basic HTML structure with a <div> element containing an unordered list (<ul>) with 14 identical items (using 7 times of <li>) and uses jQuery to manipulate the DOM.
Individual Test Cases
Each test case has its own set of instructions, which are executed by the tests($jqX); function. The $jqX variable is replaced with the version number of jQuery for each test case.
Here's a breakdown of what happens in each test case:
jquery 1.12.4: The script uses $jq1124 to manipulate the DOM, which should be slower than newer versions.jquery 2.2.4: The script uses $jq224 to manipulate the DOM, which is faster than version 1.12.4 but may still be slower than version 3.5.0.jquery 3.5.0: The script uses $jq350 to manipulate the DOM, which should be the fastest.Raw UA String
The Raw UA String is a string that indicates the browser's user agent (UA) string. In this case, it's the same for all three test cases: "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/112.0". This means that the tests are run on a specific version of Firefox.
Executions Per Second
The Executions Per Second value indicates how many times each test case is executed per second. The values are:
jquery 3.5.0: 22,719jquery 2.2.4: 22,572jquery 1.12.4: 17,520This suggests that version 3.5.0 is the fastest, followed by version 2.2.4, and then version 1.12.4.
Considerations
Some potential considerations when interpreting these results include:
Overall, this benchmark provides a comparison of the performance of three different versions of jQuery on a specific browser and platform.
