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

dsDOM selection

3.8M/s

dsDOM remove element

2.7M/s

dsDOM add Single class

1.3M/s

dsDOM Clone

1.2M/s

dsDOM CSS Manipulation

1.2M/s

Jquery remove element

768K/s

Jquery selection

742K/s

dsDOM add Multiple classes

741K/s

jQuery add Single class

423K/s

Jquery CSS Manipulation

294K/s

jQuery add Multiple classes

251K/s

jQuery event

207K/s

JQuery Clone

80K/s

dsDOM event

4K/s

View exact numbers

Test name	Executions per second
✓ dsDOM selection	3,841,349 Ops/sec
dsDOM remove element	2,664,906 Ops/sec
dsDOM add Single class	1,256,086 Ops/sec
dsDOM Clone	1,197,113 Ops/sec
dsDOM CSS Manipulation	1,160,657 Ops/sec
Jquery remove element	767,786 Ops/sec
Jquery selection	742,133 Ops/sec
dsDOM add Multiple classes	740,581 Ops/sec
jQuery add Single class	422,891 Ops/sec
Jquery CSS Manipulation	294,447 Ops/sec
jQuery add Multiple classes	251,409 Ops/sec
jQuery event	207,118 Ops/sec
JQuery Clone	80,277 Ops/sec
dsDOM event	4,139 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'});