<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script> var $jq171 = $.noConflict(true);</script><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script><script> var $jq1113 = $.noConflict(true);</script><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.3.1/jquery.min.js"></script><script> var $jq331 = $.noConflict(true);</script><script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script> var $jq341 = $.noConflict(true);</script><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script> var $jq360 = $.noConflict(true);</script><script src="https://code.jquery.com/jquery-4.0.0-beta.min.js"></script><script> var $jq400 = $.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> </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($jq171);tests($jq1113);tests($jq1124);tests($jq224);tests($jq331);tests($jq341);tests($jq360);tests($jq400);--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Test jQuery 1.7.1 | |
| Test jQuery 1.11.3 | |
| Test jQuery 1.12.4 | |
| Test jQuery 2.2.4 | |
| Test jQuery 3.3.1 | |
| Test jQuery 3.4.1 | |
| Test jQuery 3.6.0 | |
| Test jQuery 4.0.0 |
| Test name | Executions per second |
|---|---|
| Test jQuery 1.7.1 | 79595.6 Ops/sec |
| Test jQuery 1.11.3 | 85809.5 Ops/sec |
| Test jQuery 1.12.4 | 80845.8 Ops/sec |
| Test jQuery 2.2.4 | 102803.4 Ops/sec |
| Test jQuery 3.3.1 | 100902.0 Ops/sec |
| Test jQuery 3.4.1 | 92249.1 Ops/sec |
| Test jQuery 3.6.0 | 93390.2 Ops/sec |
| Test jQuery 4.0.0 | 91397.7 Ops/sec |
Let's dive into the explanation of the provided JSON benchmark data.
Benchmark Definition
The benchmark is designed to test the performance of different versions of jQuery, ranging from 1.7.1 to 4.0.0 beta. The script preparation code creates a specific HTML structure with a menu item and its closest parent and grandparent elements, which are then styled using CSS. This process involves creating multiple DOM elements, manipulating their styles, and removing them.
Options being compared
The benchmark compares the performance of each jQuery version in terms of executions per second (ExecutionsPerSecond) across various browser versions and devices. The options being compared include:
Performance metrics
The benchmark reports the following performance metrics for each test:
Interpretation
The benchmark data suggests that:
Overall, this benchmark provides insight into the performance characteristics of different jQuery versions across various browser and device configurations.
