Benchmark: jQuery addClass vs jQuery classList.add vs querySelector classList.add111

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="el"></div>

Script Preparation code:

document.getElementById("el").classList.remove("test");

Tests:

jQuery addClass
$("#el").addClass("test");
jQuery classList.add
$("#el")[0].classList.add("test");
querySelector classList.add
document.querySelector("#el").classList.add("test");
getElementById classList.add
document.getElementById("el").classList.add("test");

Rendered benchmark preparation results:

Previous results

Test case name	Result
jQuery addClass
jQuery classList.add
querySelector classList.add
getElementById classList.add

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

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36

Browser/OS: Chrome 78 on Windows 7

Test name	Executions per second
jQuery addClass	459264.4 Ops/sec
jQuery classList.add	753642.2 Ops/sec
querySelector classList.add	1155389.0 Ops/sec
getElementById classList.add	1588467.0 Ops/sec

jQuery addClass vs jQuery classList.add vs querySelector classList.add111 (version: 0)