Run results for: dsDOM vs JQuery

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	80277.1 Ops/sec
dsDOM Clone	1197113.4 Ops/sec
dsDOM event	4139.0 Ops/sec
jQuery event	207118.3 Ops/sec
dsDOM add Single class	1256086.4 Ops/sec
jQuery add Single class	422891.0 Ops/sec
dsDOM add Multiple classes	740580.8 Ops/sec
jQuery add Multiple classes	251408.7 Ops/sec
dsDOM selection	3841349.0 Ops/sec
Jquery selection	742133.0 Ops/sec
dsDOM remove element	2664906.0 Ops/sec
Jquery remove element	767786.2 Ops/sec
dsDOM CSS Manipulation	1160656.9 Ops/sec
Jquery CSS Manipulation	294446.7 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@2bd5700/lib/dsDOM.js'></script>
</head>

<body>
    <!-- Test Elements -->
    <div id="testDiv" class="box original">Test Div</div>
    <button id="testButton">Click Me</button>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
    </div>
</body>

</html>

Script Preparation code:

/*your preparation JavaScript code goes here
To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/
async function globalMeasureThatScriptPrepareFunction() {
    // This function is optional, feel free to remove it.
    // await someThing();
}

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
new dsDOM('#testButton').listen('click', null, () => dsCounter++);
jQuery event
$('#testButton').on('click', () => 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'});

Run results for: dsDOM vs JQuery

JQuery Clone

dsDOM Clone

dsDOM event

jQuery event

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