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	101158.7 Ops/sec
dsDOM Clone	1273188.5 Ops/sec
dsDOM event element -> child	2425.4 Ops/sec
jQuery event element -> child	543530.9 Ops/sec
dsDOM add Single class	1379632.4 Ops/sec
jQuery add Single class	656715.9 Ops/sec
dsDOM add Multiple classes	843383.2 Ops/sec
jQuery add Multiple classes	258421.2 Ops/sec
dsDOM selection	4804389.0 Ops/sec
Jquery selection	1002997.1 Ops/sec
dsDOM remove element	2920749.8 Ops/sec
Jquery remove element	966159.0 Ops/sec
dsDOM CSS Manipulation	1302563.5 Ops/sec
Jquery CSS Manipulation	384567.4 Ops/sec
dsDOM event document -> element	3034581.8 Ops/sec
jQuery event document -> element	670348.2 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