Run results for: dsDOM vs JQuery (clone, event, add clsss, remove class, selection, remove element, css)

Run details:

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

Browser: Chrome 135

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

dsDOM selection

4.1M/s

dsDOM remove element

3.3M/s

dsDOM event document -> element

2.5M/s

dsDOM event element -> child

1.7M/s

dsDOM add Single class

1.4M/s

dsDOM CSS Manipulation

899K/s

dsDOM add Multiple classes

794K/s

Jquery remove element

763K/s

Jquery selection

729K/s

jQuery event document -> element

551K/s

jQuery add Single class

505K/s

jQuery event element -> child

502K/s

dsDOM Clone

340K/s

Jquery CSS Manipulation

268K/s

jQuery add Multiple classes

252K/s

JQuery Clone

78K/s

View exact numbers

Test name	Executions per second
✓ dsDOM selection	4,114,659 Ops/sec
dsDOM remove element	3,272,526 Ops/sec
dsDOM event document -> element	2,516,110 Ops/sec
dsDOM event element -> child	1,713,778 Ops/sec
dsDOM add Single class	1,385,516 Ops/sec
dsDOM CSS Manipulation	898,944 Ops/sec
dsDOM add Multiple classes	794,052 Ops/sec
Jquery remove element	762,805 Ops/sec
Jquery selection	728,563 Ops/sec
jQuery event document -> element	551,252 Ops/sec
jQuery add Single class	505,400 Ops/sec
jQuery event element -> child	501,785 Ops/sec
dsDOM Clone	340,435 Ops/sec
Jquery CSS Manipulation	268,165 Ops/sec
jQuery add Multiple classes	252,239 Ops/sec
JQuery Clone	78,011 Ops/sec

HTML Preparation code:

<!DOCTYPE html>
<html>

<head>
    <title>dsDOM vs jQuery Benchmark</title>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js'></script>
    <script src='https://cdn.jsdelivr.net/gh/Dianka05/dsDOM@v0.1.2/lib/dsDOM.js'></script>
</head>

<body>
    <!-- Test Elements -->
    <div id="testDiv" class="box original">Test Div</div>
    <button id="testButton"><span class="spanbtn">Click Me</span></button>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
    </div>
</body>

</html>

Script Preparation code:

let dsCounter = 0, jQueryCounter = 0;
const button = document.getElementById('testButton');
for (let i = 0; i < 1000; i++) { // Simulate 1000 clicks
  button.click();
}

Tests:

JQuery Clone
const div = $('<div class="new">Hello</div>') const div2 = div.clone()
dsDOM Clone
const div = new dsDOM('<div class="new">Hello</div>') const div2 = div.clone()
dsDOM event element -> child
new dsDOM('#testButton').listen('click','.spanbtn', () => dsCounter++);
jQuery event element -> child
$('#testButton').on('click','.spanbtn', () => jQueryCounter++);
dsDOM add Single class
new dsDOM('#testDiv').addClass('highlight');
jQuery add Single class
$('#testDiv').addClass('highlight');
dsDOM add Multiple classes
new dsDOM('.item').addClass('active', 'selected');
jQuery add Multiple classes
$('.item').addClass('active selected');
dsDOM selection
const dsSelection = new dsDOM('.item').elements;
Jquery selection
const jQuerySelection = $('.item');
dsDOM remove element
new dsDOM('.item:first-child').remove();
Jquery remove element
$('.item:first-child').remove();
dsDOM CSS Manipulation
new dsDOM('#testDiv').css({color: 'red', fontSize: '20px'});
Jquery CSS Manipulation
$('#testDiv').css({color: 'red', 'font-size': '20px'});
dsDOM event document -> element
new dsDOM(document).listen('click','#testButton', () => dsCounter++);
jQuery event document -> element
$(document).on('click','#testButton', () => jQueryCounter++);