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

Jump 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

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

Related benchmarks: