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

dsDOM remove element

2.6M/s

dsDOM add Single class

1.3M/s

dsDOM CSS Manipulation

1.2M/s

dsDOM Clone

1.1M/s

Jquery remove element

783K/s

dsDOM add Multiple classes

761K/s

Jquery selection

746K/s

jQuery add Single class

505K/s

jQuery event

487K/s

Jquery CSS Manipulation

291K/s

jQuery add Multiple classes

275K/s

JQuery Clone

77K/s

dsDOM event

4K/s

View exact numbers

Test name	Executions per second
✓ dsDOM selection	4,011,444 Ops/sec
dsDOM remove element	2,611,082 Ops/sec
dsDOM add Single class	1,331,716 Ops/sec
dsDOM CSS Manipulation	1,190,842 Ops/sec
dsDOM Clone	1,130,812 Ops/sec
Jquery remove element	782,718 Ops/sec
dsDOM add Multiple classes	761,087 Ops/sec
Jquery selection	745,981 Ops/sec
jQuery add Single class	504,992 Ops/sec
jQuery event	487,452 Ops/sec
Jquery CSS Manipulation	290,665 Ops/sec
jQuery add Multiple classes	274,790 Ops/sec
JQuery Clone	77,248 Ops/sec
dsDOM event	4,007 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++);