Benchmark: Vanilla, Bliss, Umbrella - JS Library Performance Test

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/blissfuljs/1.0.6/bliss.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/umbrellajs"></script>
<div id="foo">Hello World</div>

AخA
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/blissfuljs/1.0.6/bliss.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/umbrellajs"></script>
<div id="foo">Hello World</div>

Tests:

Vanilla Get ID
var text = document.getElementById("foo");
var text = document.getElementById("foo");
Vanilla Get ID (QuerySelector)
var text = document.querySelector("#foo");
var text = document.querySelector("#foo");
Vanilla Get ID (QuerySelectorAll)
var text = document.querySelectorAll("#foo");
var text = document.querySelectorAll("#foo");
Vanilla Get Text
var text = document.getElementById("foo").textContent;
var text = document.getElementById("foo").textContent;
Vanilla Get HTML
var text = document.getElementById("foo").innerHTML;
var text = document.getElementById("foo").innerHTML;
Bliss Get ID
var text = Bliss("#foo");
var text = Bliss("#foo");
Bliss Get Text
var text = Bliss("#foo").textContent;
var text = Bliss("#foo").textContent;
Bliss Get HTML
var text = Bliss("#foo").htmlContent;
var text = Bliss("#foo").htmlContent;
Umbrella Get ID
var text = u("#foo");
var text = u("#foo");
Umbrella Get Text
var text = u("#foo").text();
var text = u("#foo").text();
Umbrella Get HTML
var text = u("#foo").html();
var text = u("#foo").html();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
Vanilla Get ID
Vanilla Get ID (QuerySelector)
Vanilla Get ID (QuerySelectorAll)
Vanilla Get Text
Vanilla Get HTML
Bliss Get ID
Bliss Get Text
Bliss 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: 4 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36

Browser/OS: Chrome 88 on Linux

View result in a separate tab

Test name	Executions per second
Vanilla Get ID	3031956.5 Ops/sec
Vanilla Get ID (QuerySelector)	2039074.6 Ops/sec
Vanilla Get ID (QuerySelectorAll)	1136777.4 Ops/sec
Vanilla Get Text	2350545.8 Ops/sec
Vanilla Get HTML	2084128.6 Ops/sec
Bliss Get ID	1527621.9 Ops/sec
Bliss Get Text	1337336.1 Ops/sec
Bliss Get HTML	1559909.2 Ops/sec
Umbrella Get ID	353167.5 Ops/sec
Umbrella Get Text	337494.5 Ops/sec
Umbrella Get HTML	316966.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

Benchmark Overview

The provided JSON represents a JavaScript microbenchmark test suite, specifically designed to compare the performance of different methods for accessing and manipulating HTML elements in a web page.

Test Cases

There are eight test cases:

Vanilla Get ID: Accessing an HTML element using document.getElementById().
Vanilla Get ID (QuerySelector): Accessing an HTML element using document.querySelector() with the # selector.
Vanilla Get ID (QuerySelectorAll): Accessing all HTML elements using document.querySelectorAll() with the # selector.
Vanilla Get Text: Extracting the text content of an HTML element using element.textContent.
Bliss Get ID: Accessing an HTML element using Bliss.js, a JavaScript library for working with DOM nodes.
Bliss Get Text: Extracting the text content of an HTML element using Bliss.js.
Bliss Get HTML: Extracting the HTML content of an HTML element using Bliss.js.
Umbrella Get ID: Accessing an HTML element using Umbrella.js, a JavaScript library for working with DOM nodes.
Umbrella Get Text: Extracting the text content of an HTML element using Umbrella.js.
Umbrella Get HTML: Extracting the HTML content of an HTML element using Umbrella.js.

Performance Results

The test results show the execution time (in seconds) for each test case across multiple browser runs. The fastest execution times are listed first.

Comparison and Insights

Vanilla methods: document.getElementById() and document.querySelector() with the # selector tend to be faster than the other methods, likely due to their simplicity and efficiency.
Bliss.js: Bliss.js seems to perform well for text extraction (Bliss Get Text) but struggles with HTML extraction (Bliss Get HTML).
Umbrella.js: Umbrella.js appears to be slower than Vanilla methods but performs better than Bliss.js for all test cases.

Conclusion

This benchmark helps evaluate the performance of different approaches for accessing and manipulating HTML elements in a web page. It suggests that Vanilla methods are generally faster, while Bliss.js and Umbrella.js have specific strengths and weaknesses depending on the use case.

Keep in mind that this is just one example of a microbenchmark test suite, and there may be other factors to consider when choosing a method for accessing and manipulating HTML elements.

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test suite, specifically designed to compare the performance of different methods for accessing and manipulating HTML elements in a web page.

**Test Cases**

There are eight test cases:

1. **Vanilla Get ID**: Accessing an HTML element using `document.getElementById()`.
2. **Vanilla Get ID (QuerySelector)**: Accessing an HTML element using `document.querySelector()` with the `#` selector.
3. **Vanilla Get ID (QuerySelectorAll)**: Accessing all HTML elements using `document.querySelectorAll()` with the `#` selector.
4. **Vanilla Get Text**: Extracting the text content of an HTML element using `element.textContent`.
5. **Bliss Get ID**: Accessing an HTML element using Bliss.js, a JavaScript library for working with DOM nodes.
6. **Bliss Get Text**: Extracting the text content of an HTML element using Bliss.js.
7. **Bliss Get HTML**: Extracting the HTML content of an HTML element using Bliss.js.
8. **Umbrella Get ID**: Accessing an HTML element using Umbrella.js, a JavaScript library for working with DOM nodes.
9. **Umbrella Get Text**: Extracting the text content of an HTML element using Umbrella.js.
10. **Umbrella Get HTML**: Extracting the HTML content of an HTML element using Umbrella.js.

**Performance Results**

The test results show the execution time (in seconds) for each test case across multiple browser runs. The fastest execution times are listed first.

**Comparison and Insights**

* **Vanilla methods**: `document.getElementById()` and `document.querySelector()` with the `#` selector tend to be faster than the other methods, likely due to their simplicity and efficiency.
* **Bliss.js**: Bliss.js seems to perform well for text extraction (Bliss Get Text) but struggles with HTML extraction (Bliss Get HTML).
* **Umbrella.js**: Umbrella.js appears to be slower than Vanilla methods but performs better than Bliss.js for all test cases.

**Conclusion**

Keep in mind that this is just one example of a microbenchmark test suite, and there may be other factors to consider when choosing a method for accessing and manipulating HTML elements.

Related benchmarks:

Vanilla, Bliss, Umbrella - JS Library Performance Test (version: 0)

Comparing performance of: Vanilla Get ID vs Vanilla Get ID (QuerySelector) vs Vanilla Get ID (QuerySelectorAll) vs Vanilla Get Text vs Vanilla Get HTML vs Bliss Get ID vs Bliss Get Text vs Bliss Get HTML vs Umbrella Get ID vs Umbrella Get Text vs Umbrella Get HTML

Created: 4 years ago by: Guest

Jump to the latest result

Vanilla Get ID

Vanilla Get ID (QuerySelector)

Vanilla Get ID (QuerySelectorAll)

Vanilla Get Text

Vanilla Get HTML

Bliss Get ID

Bliss Get Text

Bliss 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 llama3.2:3b, generated 6 months ago):