Benchmark: jquery 1.12.4 vs 2.2.4 (w/ jQuery Migrate) vs 3.5.1 (w/ jQuery Migrate) v4

HTML Preparation code:

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script>
    var $jq1 = $.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.1.min.js" integrity="sha256-APllMc0V4lf/Rb5Cz4idWUCYlBDG3b0EcN1Ushd3hpE=" crossorigin="anonymous"></script>
<script>
    var $jq2 = $.noConflict(true);
</script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-migrate-3.3.1.min.js" integrity="sha256-APllMc0V4lf/Rb5Cz4idWUCYlBDG3b0EcN1Ushd3hpE=" crossorigin="anonymous"></script>
<script>
    var $jq3 = $.noConflict(true);
</script>
<div id="jQueryMigrate"></div>
<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>

Script Preparation code:

function tests($) {
	$(".menu-item").eq(2).closest("ul").css({
    	"background-color": "red"
    }).parent().css({
    	"border": "1px solid blue"
    }).append($("<p style='background-color: green;'>Text.</p>")).text('Text2.').css({
        'background-color': 'red'
    }).end().end().remove();
	console.log('tests' + $);
}

Tests:

jQuery 1
tests($jq1);
jQuery 2
tests($jq2);
jQuery 3
tests($jq3);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery 1
jQuery 2
jQuery 3

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.2 Safari/605.1.15

Browser/OS: Safari 15 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
jQuery 1	80099.5 Ops/sec
jQuery 2	70418.4 Ops/sec
jQuery 3	81290.0 Ops/sec

jquery 1.12.4 vs 2.2.4 (w/ jQuery Migrate) vs 3.5.1 (w/ jQuery Migrate) v4 (version: 4)

Comparing performance of: jquery 1.12.4 vs jquery 2.2.4 vs jquery 3.5.1

Comparing performance of: jQuery 1 vs jQuery 2 vs jQuery 3

Created: 3 years ago by: Registered User

Jump to the latest result

jQuery 1

jQuery 2

jQuery 3

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A