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: 17 days ago by: Registered User

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@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: 4 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	78011.1 Ops/sec
dsDOM Clone	340434.7 Ops/sec
dsDOM event element -> child	1713778.0 Ops/sec
jQuery event element -> child	501784.8 Ops/sec
dsDOM add Single class	1385516.4 Ops/sec
jQuery add Single class	505399.6 Ops/sec
dsDOM add Multiple classes	794051.6 Ops/sec
jQuery add Multiple classes	252239.4 Ops/sec
dsDOM selection	4114659.2 Ops/sec
Jquery selection	728563.4 Ops/sec
dsDOM remove element	3272525.5 Ops/sec
Jquery remove element	762804.9 Ops/sec
dsDOM CSS Manipulation	898944.2 Ops/sec
Jquery CSS Manipulation	268165.0 Ops/sec
dsDOM event document -> element	2516110.5 Ops/sec
jQuery event document -> element	551252.3 Ops/sec

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

LLMs can make mistakes. Check important info.

In the provided benchmark, the performance of two different JavaScript libraries—**dsDOM** and **jQuery**—is compared across various common DOM manipulation tasks. The benchmark specifically evaluates their efficiency in performing cloning, event handling, class manipulation, element selection, and CSS manipulation. Each approach has its pros and cons, which we'll explore along with other considerations.

### Libraries Used

1. **jQuery**: A widely-used JavaScript library designed to simplify HTML DOM manipulation, event handling, and CSS manipulation. It provides methods that abstract away differences in browser implementations, making it easier to handle complex tasks in a way that is cross-browser compatible.

2. **dsDOM**: A less-known library that aims to provide a simpler and potentially lighter-weight alternative to jQuery for DOM manipulation. Its purpose is to handle similar tasks as jQuery but with a possibly more efficient approach for modern use cases.

### Test Cases

Here’s a breakdown of the specific test cases and what each evaluates:

1. **jQuery Clone vs dsDOM Clone**:
   - **Test**: Clone a div element.
   - **Pros jQuery**: Well-established and optimized.
   - **Pros dsDOM:** A potentially more efficient cloning mechanism.
   - **Cons**: jQuery might introduce more overhead if used extensively compared to dsDOM.

2. **Event Handling**:
   - **Test**: Listening for click events (jQuery vs dsDOM).
   - **Pros jQuery**: Robust and well-optimized for various events; supports a wide range of browsers.
   - **Pros dsDOM**: May offer a simpler event attachment model.
   - **Cons**: jQuery's complexity might be unwarranted for simple use cases.

3. **Adding a Single and Multiple Classes**:
   - **Test**: Add classes to elements (both single and multiple).
   - **Pros jQuery**: Quick and easy syntax for class manipulations.
   - **Pros dsDOM**: May utilize a more modern or less overhead-centric approach to class handling.
   - **Cons**: jQuery may perform slightly slower in some instances due to added layer of abstraction.

4. **Element Selection**:
   - **Test**: Selecting elements using CSS selectors.
   - **Pros jQuery**: Captures selected elements easily and allows chaining, making it sleek for multiple operations.
   - **Pros dsDOM**: Purportedly more efficient with fewer operations behind the scenes.
   - **Cons**: jQuery's selection mechanism is very well optimized but can be slow if used in bulk operations.

5. **Removing Elements**:
   - **Test**: Removing an element from the DOM.
   - **Pros jQuery**: Optimized and reliable element removal.
   - **Pros dsDOM**: May provide a more streamlined process than jQuery.
   - **Cons**: As with other operations, using a larger library could introduce more overhead.

6. **CSS Manipulation**:
   - **Test**: Setting CSS properties.
   - **Pros jQuery**: Comprehensive support for CSS properties and units.
   - **Pros dsDOM**: Potentially a more lightweight and efficient alternative.
   - **Cons**: jQuery may not be as performant under minimal use but excels in compatibility.

### Performance Results

- The benchmark results indicate that **dsDOM** performed significantly better than **jQuery** in almost all test cases, executing much more frequently per second.
- For example, the **dsDOM selection** test executed at approximately 3.78 million operations per second, while the jQuery selection test was around 607,000 operations per second, reflecting a marked performance difference.

### Considerations

- **Size Matters**: dsDOM is likely smaller in size as a library, which can lead to faster load times and lower memory usage, especially for lightweight projects.
- **Complexity**: While jQuery is powerful and battle-tested, its size and complexity can be overkill for small scale applications. For developers focused on newer solutions, dsDOM’s promise to provide similar functionalities with potentially less footprint can appeal.
- **Browser Support**: jQuery has long been known for its robust cross-browser compatibility. Developers using dsDOM should assess if it meets their project's specific requirements.
- **Community and Support**: jQuery has a large user community, extensive documentation, and numerous plugins, whereas dsDOM may present limitations here as a less popular alternative.

### Alternatives

1. **Vanilla JavaScript**: Using plain JavaScript can be more efficient in modern applications. Features like `querySelector`, `addEventListener`, and class methods can handle most operations without the overhead of a library.
2. **Other Libraries**: Other alternatives include frameworks like **React**, **Vue**, or **Angular**, which handle DOM manipulation in a declarative manner and often integrate state management, thus offering a different paradigm of building applications.
3. **Micro-libraries**: Libraries like **Cash** (a jQuery-like library that is designed to be tiny and fast) can offer jQuery-like functionalities with less weight.

In summary, this benchmark evaluates the efficacy of two libraries in performing common DOM manipulation tasks, with dsDOM generally outperforming jQuery in execution speed while also weighing considerations of ease of use, support, and project size.

Related benchmarks:

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

Created: 17 days ago by: Registered User

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

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):