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: 17 days 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: 17 days 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

Autogenerated LLM Summary (model gpt-4o-mini, generated 17 days ago):

LLMs can make mistakes. Check important info.

The benchmark you've provided focuses on testing the performance differences between **dsDOM** and **jQuery**, two popular JavaScript libraries for manipulating the Document Object Model (DOM). Below, I will explain what is being tested in the benchmark, compare the options, and outline the pros and cons of each approach.

### Overview of Tested Options
1. **dsDOM**:
   - This library is a lightweight alternative to jQuery designed for DOM manipulation. It provides a simple API for creating, selecting, and modifying HTML elements.
   
2. **jQuery**:
   - A well-established JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. It is renowned for its extensive functionality and cross-browser compatibility.

### Individual Test Cases and Their Purpose

#### DOM Manipulation and Cloning
- **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();`

These tests measure the speed of creating and cloning DOM elements using both libraries. The purpose is to determine which approach is faster for handling DOM element duplication.

#### Event Handling
- **dsDOM event**: `new dsDOM('#testButton').listen('click', null, () => dsCounter++);`
- **jQuery event**: `$('#testButton').on('click', () => jQueryCounter++);`

These tests evaluate the performance of attaching event listeners to elements. Event handling performance can influence user experience, especially in applications with multiple interactive components.

#### Adding Classes
- **Add Single Class**:
    - **dsDOM**: `new dsDOM('#testDiv').addClass('highlight');`
    - **jQuery**: `$('#testDiv').addClass('highlight');`
  
- **Add Multiple Classes**:
    - **dsDOM**: `new dsDOM('.item').addClass('active', 'selected');`
    - **jQuery**: `$('.item').addClass('active selected');`
  
These tests compare how quickly each library can add classes to elements, facilitating styling changes dynamically.

#### Selecting Elements
- **dsDOM selection**: `const dsSelection = new dsDOM('.item').elements;`
- **jQuery selection**: `const jQuerySelection = $('.item');`

This evaluates how quickly each library can select elements from the DOM. Selection speed can significantly impact the performance of applications that frequently manipulate many elements.

#### Removing Elements
- **Remove Element**:
    - **dsDOM**: `new dsDOM('.item:first-child').remove();`
    - **jQuery**: `$('.item:first-child').remove();`
  
This tests the efficiency of removing elements from the DOM, which is crucial for applications that need to manipulate lists of items.

#### CSS Manipulation
- **dsDOM CSS Manipulation**: `new dsDOM('#testDiv').css({color: 'red', fontSize: '20px'});`
- **jQuery CSS Manipulation**: `$('#testDiv').css({color: 'red', 'font-size': '20px'});`

These tests assess the performance of applying CSS styles to elements, which can be frequent in responsive web design scenarios.

### Performance Results Summary
From the benchmark results:
- **dsDOM** generally outperforms **jQuery** across multiple test scenarios, especially in selection and removal operations.
- **jQuery's** performance is significantly slower in cases like cloning and event handling.
- The results indicate that **dsDOM** may be more efficient for basic DOM manipulations due to its lighter footprint and straightforward API.

### Pros and Cons
- **dsDOM Pros**:
  - Lightweight and faster for basic tasks.
  - Simple API structure. 
  - May be more efficient for certain operations.

- **dsDOM Cons**:
  - Less feature-rich compared to jQuery.
  - Smaller community and fewer resources available for troubleshooting.

- **jQuery Pros**:
  - Comprehensive and well-documented.
  - Broad community support.
  - Extensive plugins and integrations.

- **jQuery Cons**:
  - Heavier library, which can lead to slightly slower performance.
  - Can be overkill for simple applications due to its size and feature set.

### Other Alternatives
Beyond **dsDOM** and **jQuery**, other libraries for DOM manipulation include:
- **Vanilla JavaScript**: Using native JavaScript APIs can often yield the best performance because there is no additional overhead from libraries.
- **React**: A library focused on building user interfaces, leveraging a virtual DOM for optimal performance and rendering efficiency.
- **Vue.js**: Similar to React, Vue provides an efficient way to interact with the DOM using a reactive and component-based architecture.

In summary, developers can choose between these libraries based on their project requirements, weighing speed, size, feature set, and community support. This benchmark provides valuable insights that can guide these choices.

Related benchmarks:

dsDOM vs JQuery (version: 1)

Created: 17 days ago by: Guest

Jump to the latest 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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 17 days ago):