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

3.8M/s

dsDOM remove element

2.0M/s

dsDOM add Single class

1.2M/s

dsDOM Clone

1.2M/s

dsDOM CSS Manipulation

959K/s

Jquery remove element

714K/s

dsDOM add Multiple classes

681K/s

Jquery selection

607K/s

jQuery add Single class

485K/s

jQuery event

484K/s

Jquery CSS Manipulation

319K/s

jQuery add Multiple classes

237K/s

JQuery Clone

107K/s

dsDOM event

4K/s

View exact numbers

Test name	Executions per second
✓ dsDOM selection	3,780,075 Ops/sec
dsDOM remove element	1,980,806 Ops/sec
dsDOM add Single class	1,248,630 Ops/sec
dsDOM Clone	1,219,098 Ops/sec
dsDOM CSS Manipulation	958,728 Ops/sec
Jquery remove element	714,468 Ops/sec
dsDOM add Multiple classes	681,067 Ops/sec
Jquery selection	607,248 Ops/sec
jQuery add Single class	484,697 Ops/sec
jQuery event	484,479 Ops/sec
Jquery CSS Manipulation	318,912 Ops/sec
jQuery add Multiple classes	237,411 Ops/sec
JQuery Clone	107,259 Ops/sec
dsDOM event	3,637 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++);