Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
matches vs getattribute
(version: 0)
Comparing performance of:
matches vs attr
Created:
one year ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id="foo" data-foo="foo_id"></div>
Tests:
matches
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.matches("[data-foo]"); }
attr
var element = document.getElementById("foo"); var i = 10000; while (i--) { var foo = element.getAttribute("data-foo"); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
matches
attr
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/128.0.0.0 Safari/537.36
Browser/OS:
Chrome 128 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=554668" width="100%" height="500px"></iframe>
attr
5K/s
matches
3K/s
View exact numbers
Test name
Executions per second
✓
attr
4,515 Ops/sec
matches
3,087 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'd be happy to explain the benchmark and its various components. **Benchmark Overview** The provided JSON represents a JavaScript microbenchmark, which allows users to create and run tests for specific JavaScript code snippets. The benchmark is designed to compare two approaches: using the `matches()` method versus using the `getAttribute()` function with the `data-foo` attribute on an HTML element. **Test Cases** There are two test cases: 1. **"matches"`**: This test case runs a loop 10,000 times, where in each iteration, it checks if the `element` matches the CSS selector `[data-foo]`. 2. **"attr"`**: This test case also runs a loop 10,000 times, but instead of using the `matches()` method, it uses the `getAttribute()` function to retrieve the value of the `data-foo` attribute. **Library:** In both test cases, the `element` variable is obtained using the `document.getElementById()` function, which is part of the DOM (Document Object Model) API. The `element` is assumed to be an HTML element with a `data-foo` attribute. **Special JS Feature/Syntax:** There are no specific JavaScript features or syntaxes being tested in this benchmark. However, it's worth noting that the use of CSS selectors like `[data-foo]` is a modern feature introduced in ECMAScript 2015 (ES6). **Comparison of Approaches** The main difference between the two approaches is how they access the `data-foo` attribute: * **`matches()` method**: This method returns a boolean value indicating whether the element matches the given CSS selector. It's a more modern approach that allows for better performance and readability. * **`getAttribute()` function**: This function returns the raw value of the specified attribute, which in this case is `data-foo`. While it works, it may be slower than the `matches()` method since it requires additional string manipulation. **Pros and Cons** Here's a brief summary of the pros and cons of each approach: * **`matches()` method**: + Pros: Better performance, more readable code, and modern syntax. + Cons: Requires CSS selectors, which may be unfamiliar to some developers. * **`getAttribute()` function**: + Pros: More versatile, as it can access any attribute, not just data-foo. + Cons: May be slower due to string manipulation, less readable code. **Other Alternatives** If you wanted to test other approaches or variations on these tests, here are some alternatives: * Test using the `querySelector()` method instead of `matches()`. * Use a different HTML structure for the element (e.g., using `getAttribute()` with an id). * Add more loops or complexity to the test cases. * Compare performance with other JavaScript engines (e.g., Node.js, Safari) rather than Chrome. Keep in mind that these alternatives would require modifications to the benchmark definition and test cases.
Related benchmarks
DataAttribute vs Class Selector vs ID native Selector
DataAttribute vs Class Selector vs ID Selector vs Custom Attributes
Check data attribute: hasAttribute vs dataset
DataAttribute vs Class Selector vs ID GetById
Comments
Confirm delete:
Do you really want to delete benchmark?