Benchmark: dsDOM vs Vanilla vs Cash vs Bliss vs Umbrella vs Zepto vs jQuery JS Library Speed Test

dsDOM vs Vanilla vs Cash vs Bliss vs Umbrella vs Zepto vs jQuery JS Library Speed Test (version: 6)

Comparing performance of: Vanilla Get ID vs Vanilla Get Text vs Vanilla Get Html vs Cash Get ID vs Cash Get Text vs Cash Get Html vs Bliss Get ID vs Bliss Get Text vs jQuery Get ID vs jQuery Get Text vs jQuery Get Html vs dsDOM get html vs dsDOM get text vs dsDOM get ID vs Zepto Get ID vs Zepto Get Text vs Zepto Get Html vs Umbrella Get ID vs Umbrella Get Text vs Umbrella Get HTML

Created: 17 days ago by: Registered User

Jump to the latest result

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  jQuery.noConflict();
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blissfuljs/1.0.4/bliss.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/2.3.9/cash.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Dianka05/dsDOM@latest/lib/dsDOM.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/umbrella/2.10.1/umbrella.min.js"></script>

<div id="foo">Hello World</div>

Tests:

Vanilla Get ID
var text = document.getElementById("foo");
Vanilla Get Text
var text = document.getElementById("foo").textContent;
Vanilla Get Html
var text = document.getElementById("foo").innerHTML;
Cash Get ID
var text = $("#foo");
Cash Get Text
var text = $("#foo").text();
Cash Get Html
var text = $("#foo").html();
Bliss Get ID
var text = Bliss("#foo");
Bliss Get Text
var text = Bliss("#foo").textContent;
jQuery Get ID
var text = jQuery("#foo");
jQuery Get Text
var text = jQuery("#foo").text();
jQuery Get Html
var text = jQuery("#foo").html();
dsDOM get html
const text= new dsDOM("#foo").html();
dsDOM get text
const text= new dsDOM("#foo").text();
dsDOM get ID
const text= new dsDOM("#foo");
Zepto Get ID
var text = Zepto("#foo");
Zepto Get Text
var text = Zepto("#foo").text();
Zepto Get Html
var text = Zepto("#foo").html();
Umbrella Get ID
var text = u("#foo");
Umbrella Get Text
var text = u("#foo").text();
Umbrella Get HTML
var text = u("#foo").html();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Vanilla Get ID
Vanilla Get Text
Vanilla Get Html
Cash Get ID
Cash Get Text
Cash Get Html
Bliss Get ID
Bliss Get Text
jQuery Get ID
jQuery Get Text
jQuery Get Html
dsDOM get html
dsDOM get text
dsDOM get ID
Zepto Get ID
Zepto Get Text
Zepto Get Html
Umbrella Get ID
Umbrella Get Text
Umbrella Get HTML

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
Vanilla Get ID	22975690.0 Ops/sec
Vanilla Get Text	7063657.0 Ops/sec
Vanilla Get Html	6342637.0 Ops/sec
Cash Get ID	3566874.5 Ops/sec
Cash Get Text	2718669.8 Ops/sec
Cash Get Html	2488740.2 Ops/sec
Bliss Get ID	2184293.8 Ops/sec
Bliss Get Text	1817807.4 Ops/sec
jQuery Get ID	2389748.8 Ops/sec
jQuery Get Text	1304158.9 Ops/sec
jQuery Get Html	1485033.9 Ops/sec
dsDOM get html	2696149.8 Ops/sec
dsDOM get text	2941924.5 Ops/sec
dsDOM get ID	4014923.8 Ops/sec
Zepto Get ID	2877200.8 Ops/sec
Zepto Get Text	783890.2 Ops/sec
Zepto Get Html	1747540.9 Ops/sec
Umbrella Get ID	496049.6 Ops/sec
Umbrella Get Text	476626.5 Ops/sec
Umbrella Get HTML	461320.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided benchmark JSON tests the performance of various JavaScript libraries and vanilla JavaScript when performing DOM manipulation tasks, particularly targeting the retrieval of HTML and text content from a specific DOM element. The benchmark focuses on the following libraries:

1. **Vanilla JavaScript**: This approach uses standard JavaScript without any libraries. For example:
   - `document.getElementById("foo")`: This retrieves the DOM element with the ID "foo".
   - Approaches for getting text and inner HTML also follow similar methods.

2. **Cash**: A small library that provides a jQuery-like API. It is designed to be lightweight but powerful for DOM manipulation:
   - `$("selector")`: Quickly selects elements using jQuery-style syntax.
   - Offers simplicity and ease of use similar to jQuery but with a smaller footprint.

3. **Bliss**: A micro-library designed to work with DOM manipulation while offering a simple interface. It focuses on performance and a small size:
   - `Bliss("selector")`: Similar to Cash, it uses jQuery-like syntax for selecting elements.

4. **jQuery**: A well-known and widely used library that simplifies HTML document traversal and manipulation, event handling, and AJAX. Despite being heavy, it offers a robust feature set:
   - `$(selector)`: Provides powerful and flexible methods for DOM manipulation.

5. **dsDOM**: A relatively newer library aimed at providing a minimalist and modern API for DOM manipulation. It promotes high performance with a focus on simplicity:
   - `new dsDOM("selector")`: Similar to Bliss and Cash but with the aim of being lightweight while providing basic DOM operations.

6. **Zepto**: A lightweight library that aims to be a slimmed-down version of jQuery and is particularly optimized for mobile browsers:
   - It retains compatibility with jQuery's API but is significantly smaller.

7. **Umbrella**: Another minimalistic library that offers a small set of features for selecting and manipulating DOM elements:
   - `u(selector)`: It offers jQuery-like functionality in a much leaner package.

### Performance Comparisons

The benchmark results provide a direct comparison of how well each method performs, measured in executions per second. Here are the highlights:

- **Vanilla JavaScript** outperforms all the libraries significantly in terms of speed, especially when retrieving the ID of an element. This showcases the inherent performance advantages of directly using the browser's native API, which incurs no overhead from abstraction layers.
  
- **Cash** and **dsDOM** show decent performance, making them suitable choices if a lightweight approach is preferred. However, they are slower than plain JavaScript.

- Libraries such as **Bliss**, **Zepto**, and **Umbrella** have lower performance rates. The choice of these libraries could depend on the necessity for certain features and syntactical sugar they provide rather than performance alone.

- **jQuery**, while powerful and feature-rich, is the slowest among all in this benchmark, emphasizing its higher overhead and larger size. It is still immensely popular due to its extensive ecosystem, support, and usability in legacy projects.

### Pros/Cons Summary

- **Vanilla JavaScript**:
  - **Pros**: Fastest, no dependencies or overhead.
  - **Cons**: Can be verbose for complex tasks.

- **Cash**:
  - **Pros**: Lightweight, easy to use.
  - **Cons**: Slightly slower than vanilla, fewer features than jQuery.

- **Bliss**:
  - **Pros**: Minimalist approach, good performance.
  - **Cons**: Limited compared to jQuery.

- **jQuery**:
  - **Pros**: Very powerful, rich plugin ecosystem, excellent cross-browser compatibility.
  - **Cons**: Heavier, slower, and may not be necessary for modern projects.

- **dsDOM**:
  - **Pros**: Modern API, good performance.
  - **Cons**: Less mature compared to jQuery.

- **Zepto and Umbrella**:
  - **Pros**: Light, jQuery-like syntax.
  - **Cons**: Lesser-known, may not be maintained or supported as robustly as jQuery.

### Alternatives

Aside from performance considerations, engineers might also look into modern frameworks like React, Vue.js, or Angular, which abstract DOM manipulation in a different context (i.e., reactive state management). These frameworks often optimize rendering efficiently but come with their own learning curves and overhead.

In summary, the benchmark illustrates the critical balance between performance and ease of use, demonstrating that while libraries can offer powerful abstractions and syntactic sugar, direct usage of the browser's APIs is often unmatched in raw speed. Choosing the right tool depends on the specific needs of the project, such as performance requirements, developer familiarity, and project legacy aspects.

Related benchmarks:

dsDOM vs Vanilla vs Cash vs Bliss vs Umbrella vs Zepto vs jQuery JS Library Speed Test (version: 6)

Created: 17 days ago by: Registered User

Jump to the latest result

Vanilla Get ID

Vanilla Get Text

Vanilla Get Html

Cash Get ID

Cash Get Text

Cash Get Html

Bliss Get ID

Bliss Get Text

jQuery Get ID

jQuery Get Text

jQuery Get Html

dsDOM get html

dsDOM get text

dsDOM get ID

Zepto Get ID

Zepto Get Text

Zepto Get Html

Umbrella Get ID

Umbrella Get Text

Umbrella Get HTML

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