<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script><script> var $jq1110 = $.noConflict(true);</script><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script><script> var $jq1120 = $.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.7.0/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 $jq340 = $.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($jq1120);tests($jq224);tests($jq331);tests($jq340);tests($jq1110);--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| Test jQuery 1.12.0 | |
| Test jQuery 2.2.4 | |
| Test jQuery 3.3.1 | |
| Test jQuery 3.4.0 | |
| Test jQuery 1.11.0 |
| Test name | Executions per second |
|---|---|
| Test jQuery 1.12.0 | 22090.7 Ops/sec |
| Test jQuery 2.2.4 | 30013.8 Ops/sec |
| Test jQuery 3.3.1 | 27343.7 Ops/sec |
| Test jQuery 3.4.0 | 27522.7 Ops/sec |
| Test jQuery 1.11.0 | 16192.1 Ops/sec |
Let's dive into the details of this benchmark.
Overview
MeasureThat.net is a platform for JavaScript microbenchmarks, allowing users to create and run small benchmarks to compare the performance of different versions of jQuery. The provided benchmark definition includes:
Benchmark Definition
The Benchmark Definition JSON object contains the following information:
Name: The name of the benchmark, which is "JQuery version speed test jQuery 3.4.1 all 1".Description: A brief description of the benchmark.Script Preparation Code: A JavaScript function named tests that takes a $ parameter, which represents the jQuery object.Html Preparation Code: The HTML code used to prepare the environment for the test.The script preparation code is interesting because it:
$.noConflict(true).<ul>) containing four menu items (<li>) with different classes.css() method.The script preparation code is executed in a specific order, and each subsequent test case uses a previously created instance of jQuery.
Individual Test Cases
Each individual test case has its own Benchmark Definition and Test Name:
Each test case runs the tests function with its corresponding instance of jQuery, and measures the performance of the script.
Library: jQuery
jQuery is a popular JavaScript library for DOM manipulation and event handling. In this benchmark, jQuery is used to:
The use of $.noConflict(true) creates separate instances of jQuery, allowing each test case to run with its own instance.
Special JS Features/Syntax
None are mentioned in this specific benchmark. However, some notes on related features:
.css() method is used extensively in the script preparation code.$.noConflict(true) creates separate instances of jQuery, which can be useful for isolating tests or ensuring compatibility with older browsers.Other Alternatives
If you wanted to recreate this benchmark, you could consider using alternative libraries or approaches:
webkitAnimation API).Keep in mind that recreating this benchmark would likely require significant changes to the script preparation code, as well as potentially rewriting the test cases themselves.
