Benchmark: data attributes - MeasureThat.net

HTML Preparation code:

<div id="points-body">
    <div data-players="10" data-players-n="1 098" data-raids="11" data-raids-n="9 604" data-dps="15 165.5" data-dps-r1="15 701.6" data-points-dps="96.59" data-points-raids="99.90" data-points-players="99.18">
    </div>
</div>

Tests:

element getAttribute
var element = document.getElementById("points-body").querySelector("div"); let i = 1000; while (i--) { element.getAttribute("data-points-dps"); }
Cache dataset beforehand
const element = document.getElementById("points-body").querySelector("div"); const dataset = element.dataset; let i = 1000; while (i--) { dataset.pointsDps; }
Access dataset on each call
const element = document.getElementById("points-body").querySelector("div"); let i = 1000; while (i--) { element.dataset.pointsDps; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
element getAttribute
Cache dataset beforehand
Access dataset on each call

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.3

View result in a separate tab

Test name	Executions per second
element getAttribute	1388281.0 Ops/sec
Cache dataset beforehand	14137.1 Ops/sec
Access dataset on each call	13154.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of what's being tested in this benchmark.

**Overview**

The benchmark tests three different approaches to access and manipulate the `data-points-dps` attribute of an HTML element using JavaScript.

**Benchmark Definitions**

The benchmark definitions are provided as JSON objects, which describe the script preparation code, HTML preparation code, and individual test cases.

1. **Script Preparation Code**: The script preparation code is empty in this case.
2. **Html Preparation Code**: The HTML preparation code creates a simple HTML structure with a `div` element that contains several data attributes, including `data-points-dps`.
3. **Individual Test Cases**:

* **Test Case 1: "element getAttribute"**
     This test case tests accessing the `data-points-dps` attribute using the `getAttribute()` method.
   * **Test Case 2: "Cache dataset beforehand"**
     This test case tests caching the data attributes of the element in a variable before iterating over them.
   * **Test Case 3: "Access dataset on each call"**
     This test case tests accessing the data attributes of the element on each iteration without caching.

**Options Being Compared**

The three test cases compare three different approaches to access and manipulate the `data-points-dps` attribute:

1. **Cache dataset beforehand**: This approach caches the data attributes in a variable before iterating over them. It reduces the number of times the browser needs to access the DOM.
2. **Access dataset on each call**: This approach accesses the data attributes on each iteration without caching. It may incur more overhead due to repeated DOM lookups.

**Pros and Cons**

*   **Cache dataset beforehand**:
    *   Pros: Reduces the number of times the browser needs to access the DOM, which can improve performance.
    *   Cons: May require additional memory to cache the data attributes.
*   **Access dataset on each call**:
    *   Pros: No additional memory requirements, as the data attributes are accessed directly in the loop.
    *   Cons: May incur more overhead due to repeated DOM lookups.

**Library and Special JS Features**

None of the test cases use any libraries or special JavaScript features. The tests only rely on standard JavaScript APIs and built-in browser functionality.

**Other Alternatives**

Some alternative approaches that could be considered for this benchmark include:

*   **Using a library**: Using a library like jQuery or a custom implementation to access and manipulate data attributes.
*   **Using a different attribute accessor**: Instead of using `getAttribute()`, the tests could use other attribute accessors, such as `dataset` (as in Test Case 2) or `getAttribute()` with a prefix (e.g., `element.getAttribute('data-points-dps')`).
*   **Using a different data structure**: The test cases assume that the data attributes are accessed and manipulated using JavaScript. Alternative approaches could involve using a more efficient data structure, such as an object or an array.

Overall, this benchmark tests three simple yet effective ways to access and manipulate data attributes in JavaScript, highlighting the importance of considering performance and memory usage when optimizing code.

Related benchmarks:

data attributes (version: 0)

Comparing performance of: element getAttribute vs Cache dataset beforehand vs Access dataset on each call

Created: 5 months ago by: Guest

Jump to the latest result

element getAttribute

Cache dataset beforehand

Access dataset on each call

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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