Benchmark: Vanilla vs Cash vs Bliss vs jQuery JS Library Speed Test (2021.07.20)

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"><script>
<script>
  jQuery.noConflict();  
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/blissfuljs/1.0.6/bliss.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/8.1.0/cash.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();

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

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

Measuring the performance of different JavaScript libraries and vanilla code is crucial for understanding the trade-offs involved in choosing the right tool for a project.

**Benchmark Overview**

The provided benchmark tests eight scenarios: four that involve retrieving HTML elements using each library (Vanilla, Cash, Bliss, and jQuery), with two specific methods within each scenario. The goal is to determine which approach offers the best performance, considering factors such as execution speed, DOM query efficiency, and overall code complexity.

**Options Compared**

1. **Vanilla**: Using native JavaScript functions for DOM manipulation.
2. **Cash**: A lightweight alternative to jQuery, providing a subset of its functionality.
3. **BlissfulJS**: Another lightweight library that extends vanilla JavaScript with some additional features.
4. **jQuery**: A popular, full-featured JavaScript library with extensive DOM manipulation capabilities.

**Pros and Cons**

* **Vanilla**: Pros: No dependencies, no overhead, easy to understand and implement. Cons: Limited functionality compared to other libraries.
* **Cash**: Pros: Lightweight, flexible, easy to use. Cons: Fewer features than jQuery or BlissfulJS, may require additional configuration for certain scenarios.
* **BlissfulJS**: Pros: Easy to learn, efficient DOM manipulation, more features than Cash. Cons: Still a relatively lightweight library compared to jQuery.
* **jQuery**: Pros: Mature, feature-rich, widely adopted. Cons: Large footprint, potential performance issues with complex queries.

**Performance Comparison**

The benchmark results show that the order of execution speed is generally:

1. Vanilla
2. Cash (ID-based queries)
3. BlissfulJS (ID-based queries)
4. jQuery

However, when using class selectors or attribute queries, the performance gap between libraries widens, with Cash and BlissfulJS consistently outperforming vanilla JavaScript.

**Takeaways**

When choosing a library for your project:

* If you need only basic DOM manipulation and don't require extensive features, vanilla JavaScript might be sufficient.
* For lightweight alternatives, consider Cash or BlissfulJS if you want more flexibility than jQuery offers, but with fewer features.
* If you're already invested in the jQuery ecosystem or require its comprehensive feature set, it may still be a viable choice.

Keep in mind that performance differences can be significant for complex DOM queries, so thorough benchmarking is essential to ensure your specific use case meets the chosen library's capabilities.

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 128 on Android

View result in a separate tab

Test name	Executions per second
Vanilla Get ID	2479795.2 Ops/sec
Vanilla Get Text	1350241.2 Ops/sec
Vanilla Get Html	1557483.2 Ops/sec
Cash Get ID	1072532.2 Ops/sec
Cash Get Text	802505.9 Ops/sec
Cash Get Html	838719.9 Ops/sec
Bliss Get ID	902054.9 Ops/sec
Bliss Get Text	774122.8 Ops/sec
jQuery Get ID	732151.1 Ops/sec
jQuery Get Text	503185.2 Ops/sec
jQuery Get Html	611399.9 Ops/sec

Related benchmarks:

Vanilla vs Cash vs Bliss vs jQuery JS Library Speed Test (2021.07.20) (version: 0)

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

Created: 3 years ago by: Guest

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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):