Benchmark: dsDOM vs JQuery (clone, event, add clsss, remove class, selection, remove element, css)

dsDOM vs JQuery (clone, event, add clsss, remove class, selection, remove element, css) (version: 5)

Comparing performance of: `JQuery Clone vs dsDOM Clone vs dsDOM event element -> child vs jQuery event element -> child 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 vs dsDOM event document -> element vs jQuery event document -> element`

Created: one year ago by: Registered User

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@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++);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

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

4.1M/s

dsDOM remove element

3.3M/s

dsDOM event document -> element

2.5M/s

dsDOM event element -> child

1.7M/s

dsDOM add Single class

1.4M/s

dsDOM CSS Manipulation

899K/s

dsDOM add Multiple classes

794K/s

Jquery remove element

763K/s

Jquery selection

729K/s

jQuery event document -> element

551K/s

jQuery add Single class

505K/s

jQuery event element -> child

502K/s

dsDOM Clone

340K/s

Jquery CSS Manipulation

268K/s

jQuery add Multiple classes

252K/s

JQuery Clone

78K/s

View exact numbers

Test name	Executions per second
✓ dsDOM selection	4,114,659 Ops/sec
dsDOM remove element	3,272,526 Ops/sec
dsDOM event document -> element	2,516,110 Ops/sec
dsDOM event element -> child	1,713,778 Ops/sec
dsDOM add Single class	1,385,516 Ops/sec
dsDOM CSS Manipulation	898,944 Ops/sec
dsDOM add Multiple classes	794,052 Ops/sec
Jquery remove element	762,805 Ops/sec
Jquery selection	728,563 Ops/sec
jQuery event document -> element	551,252 Ops/sec
jQuery add Single class	505,400 Ops/sec
jQuery event element -> child	501,785 Ops/sec
dsDOM Clone	340,435 Ops/sec
Jquery CSS Manipulation	268,165 Ops/sec
jQuery add Multiple classes	252,239 Ops/sec
JQuery Clone	78,011 Ops/sec