Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
dataset vs textContent
(version: 0)
Benchmark.js
element.dataset vs element.textContent
Comparing performance of:
dataset vs textContent
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id='test' data-test="test">test</div>
Script Preparation code:
var el = document.getElementById('test');
Tests:
dataset
let value = el.dataset.test el.textContent = `${value} - test`
textContent
let value = el.textContent el.textContent = `${value} - test`
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
dataset
textContent
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Browser/OS:
Chrome 126 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=534463" width="100%" height="500px"></iframe>
dataset
3.3M/s
textContent
2K/s
View exact numbers
Test name
Executions per second
✓
dataset
3,256,687 Ops/sec
textContent
2,344 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the JavaScript microbenchmark on MeasureThat.net. **Benchmark Overview** The benchmark compares two approaches for accessing and modifying the content of an HTML element: 1. `dataset`: Accessing the `dataset` property to retrieve a value, and then updating the `textContent` property with that value. 2. `textContent`: Directly accessing the `textContent` property and updating it. **Options Compared** The benchmark is comparing two options: * **Using `dataset`**: This approach uses the `dataset` property to access and modify the element's content. * **Directly using `textContent`**: This approach directly accesses and updates the `textContent` property of the element. **Pros and Cons** 1. **Using `dataset`**: * Pros: This approach allows for more flexibility in updating the element's content, as it doesn't require a specific format for the data (e.g., key-value pairs). * Cons: This approach may be slower than directly using `textContent`, since accessing and modifying the `dataset` property involves additional steps. 2. **Directly using `textContent`**: * Pros: This approach is likely to be faster, as it only requires a simple string operation. * Cons: This approach assumes that the data will fit within the maximum length allowed for `textContent`, which may not always be the case. **Library and Special JS Features** In this benchmark, the library being used is none specific. However, the use of template literals (`${value} - test`) suggests that JavaScript 6 or later is required, as this syntax was introduced in ECMAScript 2015 (ES6). **Other Considerations** * The benchmark assumes that the element's `dataset` property will be populated with data before running the tests. * The benchmark doesn't consider other factors like memory allocation, garbage collection, or parallel execution. **Alternatives** If you want to optimize this benchmark or write a similar one, here are some alternatives: * Use a more modern JavaScript version (e.g., ES2017+). * Consider using `HTMLElement.dataset` instead of `dataset`, as `dataset` is not a standard property. * Add additional tests for other ways of accessing and modifying the element's content, such as `getAttribute()` or `textContent + ' - test'`. * Experiment with different browsers, devices, and operating systems to see how they affect performance. **Benchmark Preparation Code Explanation** The `Script Preparation Code` retrieves an HTML element by its ID using `document.getElementById()`. The `Html Preparation Code` creates a simple HTML div element with the `id` attribute set to "test" and the `data-test` attribute set to "test", containing the text "test". **Test Case Explanation** The first test case (`dataset`) accesses the value of the `dataset.test` property, retrieves it, and updates the `textContent` property using template literals. The second test case (`textContent`) directly accesses the value of the `textContent` property without any modifications.
Related benchmarks
getAttribute('data-foo') vs dataset.foo
dataset
Check data attribute: hasAttribute vs dataset
getAttribute vs dataset (without explicit loop)
Comments
Confirm delete:
Do you really want to delete benchmark?