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

Latest run results:

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

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

Browser/OS: Chrome Mobile 130 on Android

View result in a separate tab

Vanilla Get ID

15.7M/s

Vanilla Get Text

4.4M/s

Vanilla Get Html

4.2M/s

Cash Get ID

2.3M/s

Cash Get Text

1.8M/s

Cash Get Html

1.7M/s

Bliss Get ID

1.6M/s

jQuery Get ID

1.6M/s

Bliss Get Text

1.3M/s

jQuery Get Html

1.2M/s

jQuery Get Text

972K/s

View exact numbers

Test name	Executions per second
✓ Vanilla Get ID	15,682,623 Ops/sec
Vanilla Get Text	4,444,460 Ops/sec
Vanilla Get Html	4,219,785 Ops/sec
Cash Get ID	2,329,715 Ops/sec
Cash Get Text	1,766,765 Ops/sec
Cash Get Html	1,720,059 Ops/sec
Bliss Get ID	1,645,135 Ops/sec
jQuery Get ID	1,603,164 Ops/sec
Bliss Get Text	1,306,061 Ops/sec
jQuery Get Html	1,163,070 Ops/sec
jQuery Get Text	972,104 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 5 years ago by: Guest

Go 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>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

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: 5 years ago by: Guest

Go 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>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

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`