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

Vanilla Get ID

14.8M/s

Vanilla Get Text

10.1M/s

Vanilla Get Html

8.5M/s

Cash Get ID

6.7M/s

Cash Get Text

5.5M/s

Bliss Get ID

5.1M/s

Cash Get Html

5.1M/s

jQuery Get ID

5.0M/s

Bliss Get Text

4.4M/s

jQuery Get Html

3.9M/s

jQuery Get Text

3.5M/s

View exact numbers

Test name	Executions per second
✓ Vanilla Get ID	14,805,622 Ops/sec
Vanilla Get Text	10,148,376 Ops/sec
Vanilla Get Html	8,515,400 Ops/sec
Cash Get ID	6,742,692 Ops/sec
Cash Get Text	5,515,666 Ops/sec
Bliss Get ID	5,126,366 Ops/sec
Cash Get Html	5,110,812 Ops/sec
jQuery Get ID	4,996,283 Ops/sec
Bliss Get Text	4,400,644 Ops/sec
jQuery Get Html	3,862,768 Ops/sec
jQuery Get Text	3,501,243 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.

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

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

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`