Benchmark: dsDOM vs JQuery - MeasureThat.net

dsDOM vs JQuery (version: 1)

Comparing performance of: `JQuery Clone vs dsDOM Clone vs dsDOM event vs jQuery event vs dsDOM add Single class vs jQuery add Single class vs dsDOM add Multiple classes vs jQuery add Multiple classes vs dsDOM selection vs Jquery selection vs dsDOM remove element vs Jquery remove element vs dsDOM CSS Manipulation vs Jquery CSS Manipulation`

Created: one year ago by: Guest

Go to the latest result

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'});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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/OS: Chrome 135 on Windows

View result in a separate tab

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