Benchmark: Get Filtered Data Attributes 2

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 i = 100000; while (i--) { var att = getAttributes(element); }
dataset
var i = 100000; while (i--) { 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:

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.

Let's break down the provided benchmark and explain what is being tested, compared, and their pros and cons.

**Benchmark Definition**

The provided JSON represents two JavaScript microbenchmarks: `Get Filtered Data Attributes 2` and two individual test cases: `Attributes` and `dataset`.

**Test Case 1: Get Filtered Data Attributes 2**

This benchmark tests the retrieval of data attributes on an element filtering only certain prefixed attributes. The script preparation code defines two functions:

*   `getAttributes(el)`: This function iterates over the element's attributes, filtering out those that do not start with "data-pre-". It then processes each remaining attribute by:
    *   Removing any hyphens and replacing them with periods
    *   Converting the value to lowercase if it's truthy
*   `getDataset(el)`: This function is similar to `getAttributes`, but it only iterates over the element's dataset properties, filtering out those that do not start with "data-pre-". It then processes each remaining property by:
    *   Removing any hyphens and replacing them with periods
    *   Converting the value to lowercase if it's truthy

**Test Case 2: Attributes**

This benchmark tests the `getAttributes` function. The script preparation code initializes a variable `element` using the provided HTML, which has several attributes.

**Test Case 2: dataset**

This benchmark tests the `getDataset` function. The script preparation code initializes a variable `element` using the provided HTML, which has a `dataset` property.

**Comparison of Approaches**

The two functions (`getAttributes` and `getDataset`) differ in their filtering logic:

*   `getAttributes`: Filters out attributes that do not start with "data-pre-", and then processes each remaining attribute.
*   `getDataset`: Only iterates over properties that start with "data-pre-", and then processes each property.

**Pros and Cons**

Here are some pros and cons of the different approaches:

*   **`getAttributes` approach:**
    *   Pros:
        *   More efficient, as it filters out unnecessary attributes.
        *   Handles cases where an attribute has multiple values (i.e., an array of values).
    *   Cons:
        *   Requires more processing time to handle each attribute individually.
*   **`getDataset` approach:**
    *   Pros:
        *   Faster, as it only iterates over the desired properties.
        *   Easier to maintain, as it only needs to worry about a specific set of properties.
    *   Cons:
        *   May be less efficient for large datasets, as it still needs to filter out unnecessary properties.

**Other Considerations**

*   **Library usage:** The benchmark uses the `Object.create(null)` method to create an object without any prototype. This is likely done to ensure that the functions are optimized for performance.
*   **Special JS features or syntax:** None are mentioned in this benchmark, but it's worth noting that some JavaScript engines may optimize certain constructs, like `Object.create(null)`, differently than others.

**Alternatives**

Some possible alternatives to these approaches include:

*   Using a library like Lodash or Ramda, which provides optimized functions for handling arrays and objects.
*   Utilizing a different data structure, such as a Map or a WeakMap, to store the attributes or dataset properties.
*   Implementing a custom filtering function that takes advantage of the browser's native optimizations.

Related benchmarks:

Get Filtered Data Attributes 2 (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

No previous run results

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