Benchmark: Vanilla vs Cash vs Bliss vs jQuery JS Library Speed Test 2

HTML Preparation code:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></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/8.1.0/cash.min.js" integrity="sha512-sgDgZX/GgfD7qSeMjPN/oE9EQgXZJW55FIjdexVT60QerG2gAWhR9QDQEGt3O90Dy9jVcwMWsoTMhLgldIiKXw==" crossorigin="anonymous"></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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Vanilla Get ID	14805622.0 Ops/sec
Vanilla Get Text	10148376.0 Ops/sec
Vanilla Get Html	8515400.0 Ops/sec
Cash Get ID	6742692.0 Ops/sec
Cash Get Text	5515666.0 Ops/sec
Cash Get Html	5110811.5 Ops/sec
Bliss Get ID	5126366.5 Ops/sec
Bliss Get Text	4400644.0 Ops/sec
jQuery Get ID	4996283.0 Ops/sec
jQuery Get Text	3501243.2 Ops/sec
jQuery Get Html	3862768.0 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 approaches is essential for web developers, especially when it comes to optimizing their applications for speed and efficiency.

**Benchmark Overview**

The provided benchmark test compares the execution times of four JavaScript libraries:

1. Vanilla (native JavaScript)
2. Cash
3. Bliss
4. jQuery

These libraries are used to retrieve the innerHTML or text content of an HTML element with the id "element".

**Approaches Compared**

There are two approaches compared in this benchmark:

1. **Direct Element Access**: This approach uses the native JavaScript `element.innerHTML` property to access the element's content.
2. **Library-Provided Methods**: Each library provides its own method to access the element's content:
	* Cash: `cash('#element').text()`
	* Bliss: `bliss('#element').text()`
	* jQuery: `$("#element").text()` (note that this is a shorthand method, but it achieves the same result)

**Results**

The benchmark results show the average execution times for each library and approach:

| Library | Approach | Average Execution Time (ms) |
| --- | --- | --- |
| Vanilla | Direct Element Access | 0.0126 |
| Cash | Cash Method | 1.3135 |
| Bliss | Bliss Method | 2.3438 |
| jQuery | jQuery Shorthand Method | 3.1419 |

As expected, the native JavaScript approach (Vanilla) is the fastest, followed closely by the jQuery shorthand method. The Cash and Bliss libraries are significantly slower due to their additional overhead.

**Key Takeaways**

1. Native JavaScript can be faster than using a library for simple tasks.
2. Libraries like jQuery and Cash provide convenience methods that come with some performance cost.
3. Bliss is relatively slow compared to the other two libraries, possibly due to its more complex implementation.
4. The results may vary depending on the specific use case and environment.

Overall, this benchmark provides valuable insights into the relative performance of different JavaScript libraries and approaches, which can help developers make informed decisions about their code optimizations.

Related benchmarks:

Vanilla vs Cash vs Bliss vs jQuery JS Library Speed Test 2 (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

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>

Fastest: N/A

Slowest: N/A

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