<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://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
var $jq341 = $.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($jq1124);
tests($jq224);
tests($jq331);
tests($jq341);
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
$jq1124 | |
$jq224 | |
$jq331 | |
$jq341 |
Test name | Executions per second |
---|---|
$jq1124 | 14130.3 Ops/sec |
$jq224 | 18307.7 Ops/sec |
$jq331 | 19741.4 Ops/sec |
$jq341 | 20434.1 Ops/sec |
Let's break down what's being tested in the provided benchmark.
Benchmark Definition
The Script Preparation Code
defines a function tests($) { ... }
that takes jQuery as an argument, $
. The function performs several operations on an HTML document with a <ul>
element and its child elements. Specifically, it:
ul
element to red.ul
element.The Html Preparation Code
includes multiple versions of jQuery, each with $.noConflict(true)
called before it's assigned to a variable (e.g., $jq1124
, $jq224
, etc.).
Options Compared
There are four test cases that compare different versions of jQuery:
$jq1124
)$jq224
)$jq331
)$jq341
)These test cases aim to measure the performance difference between these four versions of jQuery.
Pros and Cons
Here are some pros and cons for each version of jQuery:
Libraries Used
None, but jQuery is used as a library in this benchmark.
Special JS Features/Syntax
There are no special JavaScript features or syntax mentioned in this benchmark. The focus is on comparing different versions of jQuery.
Other Alternatives
If you're interested in testing alternative libraries for DOM manipulation, some popular options include:
Keep in mind that each library has its own strengths and weaknesses, and this benchmark is specifically focused on comparing different versions of jQuery.
I hope this explanation helps!