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: 4 days ago

Test name	Executions per second
JQuery Clone	78011.1 Ops/sec
dsDOM Clone	340434.7 Ops/sec
dsDOM event element -> child	1713778.0 Ops/sec
jQuery event element -> child	501784.8 Ops/sec
dsDOM add Single class	1385516.4 Ops/sec
jQuery add Single class	505399.6 Ops/sec
dsDOM add Multiple classes	794051.6 Ops/sec
jQuery add Multiple classes	252239.4 Ops/sec
dsDOM selection	4114659.2 Ops/sec
Jquery selection	728563.4 Ops/sec
dsDOM remove element	3272525.5 Ops/sec
Jquery remove element	762804.9 Ops/sec
dsDOM CSS Manipulation	898944.2 Ops/sec
Jquery CSS Manipulation	268165.0 Ops/sec
dsDOM event document -> element	2516110.5 Ops/sec
jQuery event document -> element	551252.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