Benchmark: Get Filtered Data Attributes

HTML Preparation code:

<div class="foo" id="bar" data-pre-event="abc-def" data-pre-name="bar" data-src="something" data-foo="bar"> some content here </div>

Script Preparation code:

function getAttributes(el) {
    let out = Object.create(null);
    let att = el.attributes;
    for (let i = 0; i < att.length; i++) {
        let el = att[i];
        let t;
        if ((t = el.name.replace('data-pre-', '')) == el.name) {
            // do not add if not properly prefixed
            continue;
        }
        if (t.indexOf('event-') != 0) {
            t = t.replace(/-/gm, '.');
        }
        let val = el.value;
        val = !!val  ? val.toLowerCase() : true;
        out[t] = val;
    }
    return out;
}

function getDataset(el) {
    let out = Object.create(null);
    let x = el.dataset;
  	for(let key in x){
    	let t;
        if ((t = key.replace('data-pre-', '')) == key) {
            // do not add if not properly prefixed
            continue;
        }
       if (t.indexOf('event-') != 0) {
            t = t.replace(/-/gm, '.');
        }
      let val = x[key];
        val = !!val  ? val.toLowerCase() : true;
        
        out[t] = val;
	}
    return out;
}

var element = document.getElementById('bar');

Tests:

Attributes
var att = getAttributes(element)
dataset
var att = getDataset(element)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Attributes
dataset

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome Mobile 119 on Android

View result in a separate tab

Attributes

535K/s

dataset

387K/s

View exact numbers

Test name	Executions per second
✓ Attributes	534,877 Ops/sec
dataset	386,640 Ops/sec

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, compared, and the pros/cons of each approach.

**Benchmark Definition**

The benchmark is designed to compare two approaches for retrieving data attributes from an HTML element:

1. **`getAttributes` function**: This function takes an HTML element as input and returns an object with prefixed attributes. It iterates through the element's `attributes` property, filters out non-prefixed attributes, and adds the remaining ones to the output object after modifying their names (e.g., replacing 'data-pre-' with '') and values (converting to lowercase or preserving the original value).
2. **`getDataset` function**: This function is similar to `getAttributes`, but it targets the `dataset` property of the HTML element instead. It iterates through the dataset object, filters out non-prefixed attributes, and adds the remaining ones to the output object after modifying their names (e.g., replacing 'data-pre-' with '') and values (converting to lowercase or preserving the original value).

**Comparison**

The benchmark compares the performance of these two functions on a specific HTML element.

**Pros/Cons of each approach:**

1. **`getAttributes` function**:
	* Pros:
		+ More generic, as it can handle attributes from any source (not just `dataset`).
		+ May be more efficient for large datasets.
	* Cons:
		+ Requires manual prefix modification, which might lead to errors or inconsistencies.
2. **`getDataset` function**:
	* Pros:
		+ More targeted and specific to the `dataset` property.
		+ Might be more readable and maintainable.
	* Cons:
		+ Limited to only working with attributes from the `dataset` property.

**Library usage**

Both functions use the `Object.create(null)` method to create an empty object as their return type. This is a modern JavaScript feature that creates an object with no prototype, which can be useful for performance-critical applications or when working with legacy browsers that don't support ES6 features.

**Special JS feature/syntax**

There are no special JS features or syntax used in this benchmark beyond the standard JavaScript language.

**Other alternatives**

If you were to implement these functions from scratch without using `Object.create(null)`, you could use the following approaches:

* Using a plain object literal (`{}`) as the return type, which would have its own prototype and might be slower.
* Using an array or other data structure as the return type, depending on your specific requirements.

However, using `Object.create(null)` is a common and efficient approach in modern JavaScript for creating objects with minimal overhead.

As for the browser-specific features mentioned in the benchmark result (e.g., Chrome Mobile 119), it's likely that these are being tested to ensure compatibility across different browsers and platforms.

Get Filtered Data Attributes (version: 0) Benchmark.js

compare the retrieval of data attributes on an element filtering only certain prefixed attributes

Comparing performance of: `Attributes vs dataset`

Created: 4 years ago by: Guest

Go to the latest result

Attributes

dataset

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Get Filtered Data Attributes (version: 0) Benchmark.js

compare the retrieval of data attributes on an element filtering only certain prefixed attributes

Comparing performance of: Attributes vs dataset

Created: 4 years ago by: Guest

Go to the latest result

Attributes

dataset

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Comparing performance of: `Attributes vs dataset`