Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Test content attribute vs html element
(version: 1)
Comparing performance of:
content attribute vs html element
Created:
one year ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div class="js-tooltip" data-tooltip-content="test"></div> <div class="c-tooltip">test</div>
Script Preparation code:
/*your preparation JavaScript code goes here To execute async code during the script preparation, wrap it as function globalMeasureThatScriptPrepareFunction, example:*/ async function globalMeasureThatScriptPrepareFunction() { // This function is optional, feel free to remove it. // await someThing(); }
Tests:
content attribute
var tooltip = document.getElementsByClassName("js-tooltip")[0]; console.log(tooltip.nextElementSibling.innerHTML);
html element
var tooltip = document.getElementsByClassName("js-tooltip")[0]; console.log(tooltip.dataset.tooltipContent);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
content attribute
html element
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Browser/OS:
Chrome 134 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=598436" width="100%" height="500px"></iframe>
html element
650K/s
content attribute
647K/s
View exact numbers
Test name
Executions per second
✓
html element
650,372 Ops/sec
content attribute
647,326 Ops/sec
Related benchmarks
id vs attribute
className vs classList normalization
document.evaluate(xpath) vs querySelectorAll
Splti vs Trim vs replace className
testingqueries
test early return
Multiple .closest() or complex CSS selector
Query Element
Test id vs next sibbling
Comments
Confirm delete:
Do you really want to delete benchmark?