Benchmark: Split vs dataset

HTML Preparation code:

<div id="split" data-route="Home.index">
<div id="datasets" data-controller="Home" data-action="index">

Tests:

Split
const page = document.querySelector('#split') const [controller, action] = page.dataset.route.split('.') console.log(controller, action)
Datasets
const page = document.querySelector('#datasets') const { controller, action } = page.dataset console.log(controller, action)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Split
Datasets

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark and explain what's being tested, the different approaches compared, their pros and cons, and other considerations.

**Benchmark Overview**

The provided benchmark measures the performance difference between two approaches to access data from HTML attributes: using the `dataset` property with a dot notation (`.`) for splitting the route string, versus using a simple array split method.

**Library Used**

In this benchmark, the `dataset` property is used. This property was introduced in HTML5 and allows developers to store arbitrary data on an element, making it easier to access attributes dynamically. The purpose of `dataset` is to provide a way to associate custom data with an HTML element, enabling more flexibility in handling complex data structures.

**Approach 1: Using `dataset` Property with Dot Notation**

```javascript
const page = document.querySelector('#split')
const [controller, action] = page.dataset.route.split('.')
```

Pros:

* Simple and concise syntax.
* Directly accesses the `route` attribute, avoiding unnecessary DOM traversal.

Cons:

* May be slower due to the dot notation splitting, which creates a new string object.
* May not work correctly if the `route` attribute contains multiple dots (.) or other special characters.

**Approach 2: Using `dataset` Property without Dot Notation**

```javascript
const page = document.querySelector('#datasets')
const { controller, action } = page.dataset
```

Pros:

* Faster execution since it avoids the dot notation splitting step.
* Works correctly even if the `route` attribute contains multiple dots (.) or other special characters.

Cons:

* Requires an object destructuring assignment (`{ controller, action }`) which may be slower for some browsers.

**Considerations**

When choosing between these approaches, consider the following factors:

* Performance: If speed is critical and you're working with large datasets or complex routes, using the `dataset` property without dot notation might be a better choice.
* Readability: If simplicity and conciseness are more important than performance, using the dot notation approach might be preferable.

**Other Alternatives**

While not directly compared in this benchmark, other approaches to accessing data from HTML attributes include:

* Using `getAttribute()` and `setAttribute()` methods: These can be slower due to the DOM traversal and attribute manipulation.
* Using template literals or regex patterns: These might be more readable but could introduce additional complexity.

Keep in mind that the choice of approach ultimately depends on your specific use case, performance requirements, and personal preference.

Related benchmarks:

Split vs dataset (version: 0)

Comparing performance of: Split vs Datasets

Created: 4 years ago by: Guest

Jump to the latest result

Split

Datasets

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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