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

Test name	Executions per second
JQuery Clone	107258.7 Ops/sec
dsDOM Clone	1219097.8 Ops/sec
dsDOM event	3636.6 Ops/sec
jQuery event	484478.6 Ops/sec
dsDOM add Single class	1248629.8 Ops/sec
jQuery add Single class	484697.2 Ops/sec
dsDOM add Multiple classes	681066.7 Ops/sec
jQuery add Multiple classes	237410.8 Ops/sec
dsDOM selection	3780074.8 Ops/sec
Jquery selection	607247.9 Ops/sec
dsDOM remove element	1980805.9 Ops/sec
Jquery remove element	714468.2 Ops/sec
dsDOM CSS Manipulation	958728.5 Ops/sec
Jquery CSS Manipulation	318912.3 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++);

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

JQuery Clone

dsDOM Clone

dsDOM event element -> child

jQuery event element -> child

dsDOM add Single class

jQuery add Single class

dsDOM add Multiple classes

jQuery add Multiple classes

dsDOM selection

Jquery selection

dsDOM remove element

Jquery remove element

dsDOM CSS Manipulation

Jquery CSS Manipulation

dsDOM event document -> element

jQuery event document -> element