<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
<div class="test" data-attribute="test"></div>
var test = document.querySelectorAll('[data-attribute="test"]');
var test = document.querySelectorAll('.test');
var test = document.getElementsByClassName('test');
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
data attribute - querySelectorAll | |
class name - querySelectorAll | |
class name - getElementsByClassName |
Test name | Executions per second |
---|---|
data attribute - querySelectorAll | 521710.5 Ops/sec |
class name - querySelectorAll | 708183.9 Ops/sec |
class name - getElementsByClassName | 3018569.8 Ops/sec |
Let's dive into the world of JavaScript microbenchmarks!
What is being tested?
MeasureThat.net is testing the performance differences between three methods for selecting elements from an HTML document:
querySelectorAll
with a data attribute (data-attribute="test"
)querySelectorAll
with a class name (class="test"
) using square brackets instead of dot notationgetElementsByClassName
with a class name (class="test"
)Options compared
The three options are:
querySelectorAll
with data attribute: This method selects elements based on the presence of a specific data attribute in the element's attributes.querySelectorAll
with class name (square brackets): This method selects elements based on the presence of a specific class name in the element's classes.getElementsByClassName
with class name: This method is older and more traditional, selecting elements based on the presence of a specific class name in the element's classes.Pros and Cons
querySelectorAll
with data attribute:getElementsByClassName
, as it can select elements based on any attribute.querySelectorAll
with class name (square brackets):getElementsByClassName
, as it uses a more optimized algorithm for class name lookups.getElementsByClassName
with class name:querySelectorAll
methods.Library usage
In this benchmark, none of the libraries are explicitly mentioned. However, it's worth noting that getElementsByClassName
is a method provided by the W3C DOM API, while querySelectorAll
and its square bracket variant are part of the HTML5 specification.
Special JS features or syntax
There are no special JavaScript features or syntax used in this benchmark beyond what's typically available in modern browsers. However, it's worth noting that some older browsers may not support all of these methods or may have different implementations for them.
Alternatives
Other alternatives for selecting elements from an HTML document include:
querySelector
: Similar to querySelectorAll
, but returns a single element instead of a NodeList.getElementsByTagName
: Returns a list of elements with the specified tag name.Keep in mind that these alternatives may have different performance characteristics and use cases compared to querySelectorAll
methods.