<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 | |
getElementsByClassName |
Test name | Executions per second |
---|---|
data-attribute | 544880.2 Ops/sec |
querySelectorAll | 1008700.6 Ops/sec |
getElementsByClassName | 5834281.0 Ops/sec |
Overview
MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. In this case, we're analyzing a benchmark that compares the performance of three methods to select elements with a specific attribute or class name: querySelectorAll
, getElementsByClassName
, and accessing an element's data-attribute
directly.
What is tested?
The benchmark tests the execution speed of these three approaches in the following test cases:
data-attribute
: Accessing an element's data-attribute
directly.querySelectorAll
: Using the querySelectorAll()
method to select elements with a specific class name or attribute value.getElementsByClassName
: Using the getElementsByClassName()
method to select elements with a specific class name.Options compared
The benchmark compares the performance of three options:
data-attribute
directly using the dot notation (test.data-attribute
).querySelectorAll
: Using the querySelectorAll()
method to select elements with a specific class name or attribute value.getElementsByClassName
: Using the getElementsByClassName()
method to select elements with a specific class name.Pros and Cons
Here are some pros and cons of each approach:
querySelectorAll
:getElementsByClassName
:Library usage
None of the test cases use any external libraries. The querySelectorAll
and getElementsByClassName
methods are built-in to the DOM API.
Special JS features or syntax
There are no special JavaScript features or syntax used in this benchmark. It only uses standard ECMAScript syntax for accessing elements by attribute or class name.
Other alternatives
If you need to select elements with a specific attribute value, you may also use the getAttribute()
method, which is another built-in DOM API method. However, this method returns a string value, whereas querySelectorAll
and getElementsByClassName
return an array of elements.