<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.6.1/jquery.min.js"></script>
<script>
var $jq361 = $.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($jq361);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
jquery 1.12.4 | |
jquery 2.2.4 | |
jquery 3.6.1 |
Test name | Executions per second |
---|---|
jquery 1.12.4 | 23127.7 Ops/sec |
jquery 2.2.4 | 30496.2 Ops/sec |
jquery 3.6.1 | 27834.8 Ops/sec |
Measuring the performance of different versions of jQuery can be an interesting task.
Benchmark Definition
The benchmark definition is comparing the performance of three different versions of jQuery: 1.12.4, 2.2.4, and 3.6.1. The script preparation code is a JavaScript function tests($)
that uses jQuery to modify a HTML element. The purpose of this function is to test the performance of each jQuery version when executing a specific task.
Individual Test Cases
There are three individual test cases:
Latest Benchmark Result
The latest benchmark result shows the performance of each test case, measured in executions per second. The results are:
Comparison
Based on the latest benchmark result, jQuery 2.2.4 is the fastest version among the three tested versions, followed closely by jQuery 3.6.1. jQuery 1.12.4 is the slowest version.
It's worth noting that these results may not reflect the performance of the benchmarks in real-world scenarios. Additionally, other factors such as browser version, device platform, and operating system can affect the performance of the benchmark.
Conclusion
The benchmarking result shows that jQuery 2.2.4 is the fastest version among the three tested versions, followed by jQuery 3.6.1. This suggests that newer versions of jQuery tend to be more performant than older versions. However, it's essential to consider other factors and test in different scenarios before making conclusions about performance differences between versions.