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

Test name	Executions per second
Attributes	534877.1 Ops/sec
dataset	386640.2 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.

Related benchmarks:

Get Filtered Data Attributes (version: 0)

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

Jump 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):