Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
DataAttribute vs Class Selector on body
(version: 0)
Comparing performance of:
Class vs data attribute
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<body class="hello" data-hello>Hello</div>
Tests:
Class
document.body.classList.contains('hello')
data attribute
document.body.dataset.hello;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Class
data attribute
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Browser/OS:
Chrome 121 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=506201" width="100%" height="500px"></iframe>
Class
3.0M/s
data attribute
2.6M/s
View exact numbers
Test name
Executions per second
✓
Class
2,967,008 Ops/sec
data attribute
2,582,078 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the provided benchmark and explain what's being tested. **Benchmark Overview** The benchmark is designed to compare the performance of two approaches: using the `classList.contains()` method on an HTML element (referred to as "Class") and accessing a data attribute using the `dataset` property (`data attribute`). The benchmark uses JavaScript microbenchmarks, which aim to isolate specific parts of code to measure their execution time. **Options Compared** Two options are being compared: 1. **Class**: This approach uses the `classList.contains()` method to check if an HTML element contains a specific class name. 2. **Data Attribute**: This approach accesses the value of a data attribute using the `dataset` property, specifically `data-hello`. **Pros and Cons** Here's a brief analysis of each approach: * **Class**: + Pros: This method is widely supported across browsers, including older versions that may not have implemented `dataset`. + Cons: It requires multiple DOM queries to check for the presence of a class, which can lead to slower performance compared to accessing data attributes directly. * **Data Attribute**: + Pros: Accessing data attributes directly provides faster performance since it eliminates the need for DOM queries. This approach is also more readable and maintainable in modern web development. + Cons: Not all browsers support `dataset` property, although most recent versions do. **Library/Features Used** The benchmark uses JavaScript features that are widely supported: * `classList.contains()`: A built-in method of HTML elements to check for class names. * `dataset`: A property of HTML elements that provides access to their attributes as key-value pairs. **Special JS Feature/Syntax** There's no special JavaScript feature or syntax used in this benchmark. The code is straightforward and uses standard DOM interactions. **Other Alternatives** If you wanted to optimize the performance further, you could consider: * Using `getComputedStyle()` method to retrieve the computed style of an element instead of using `classList.contains()`. * Accessing data attributes as properties (e.g., `document.body.hello`) for even faster access. * Considering other methods like using `querySelectorAll()` or `getElementById()` if you need more complex DOM queries. Keep in mind that the performance differences between these approaches can be minor and may not significantly impact your application's overall performance. The benchmark aims to provide a general idea of how different methods compare, allowing developers to make informed decisions about their code optimization strategies.
Related benchmarks
DataAttribute vs Class Selector vs ID Selector
DataAttribute vs Class Selector vs ID native Selector
DataAttribute vs Class Selector vs ID Selector vs Custom Attributes
DataAttribute vs Class Selector vs ID Selector v3
DataAttribute vs Class Selector vs ID GetById
Comments
Confirm delete:
Do you really want to delete benchmark?