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.8M/s

dsDOM event document -> element

3.0M/s

dsDOM remove element

2.9M/s

dsDOM add Single class

1.4M/s

dsDOM CSS Manipulation

1.3M/s

dsDOM Clone

1.3M/s

Jquery selection

1.0M/s

Jquery remove element

966K/s

dsDOM add Multiple classes

843K/s

jQuery event document -> element

670K/s

jQuery add Single class

657K/s

jQuery event element -> child

544K/s

Jquery CSS Manipulation

385K/s

jQuery add Multiple classes

258K/s

JQuery Clone

101K/s

dsDOM event element -> child

2K/s

View exact numbers

Test name	Executions per second
✓ dsDOM selection	4,804,389 Ops/sec
dsDOM event document -> element	3,034,582 Ops/sec
dsDOM remove element	2,920,750 Ops/sec
dsDOM add Single class	1,379,632 Ops/sec
dsDOM CSS Manipulation	1,302,564 Ops/sec
dsDOM Clone	1,273,188 Ops/sec
Jquery selection	1,002,997 Ops/sec
Jquery remove element	966,159 Ops/sec
dsDOM add Multiple classes	843,383 Ops/sec
jQuery event document -> element	670,348 Ops/sec
jQuery add Single class	656,716 Ops/sec
jQuery event element -> child	543,531 Ops/sec
Jquery CSS Manipulation	384,567 Ops/sec
jQuery add Multiple classes	258,421 Ops/sec
JQuery Clone	101,159 Ops/sec
dsDOM event element -> child	2,425 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++);