<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.querySelectorAll('.test[data-attribute="test"]');
var test = document.querySelectorAll('div[data-attribute="test"]');
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
data attribute | |
class name | |
class name with data attribute | |
using name |
Test name | Executions per second |
---|---|
data attribute | 586666.7 Ops/sec |
class name | 938346.6 Ops/sec |
class name with data attribute | 543524.6 Ops/sec |
using name | 512669.4 Ops/sec |
Benchmark Overview
MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark tests the performance of different methods for selecting elements in an HTML document using JavaScript's querySelectorAll
method.
Test Cases
The benchmark consists of four test cases, each testing a different approach:
data-attribute="test"
).class="test"
).div
).Approaches Compared
The benchmark compares the performance of these four approaches:
data-attribute="test"
).class="test"
).div
).Pros and Cons
Here's a brief summary of the pros and cons of each approach:
Library Usage
The benchmark uses the document.querySelectorAll
method, which is a part of the DOM (Document Object Model) API. This library allows JavaScript to select elements in an HTML document using various criteria, such as class names, data attributes, and element names.
Special JS Features or Syntax
None of the test cases use any special JavaScript features or syntax beyond what's typically used for web development.
Alternatives
Other alternatives for selecting elements in an HTML document include:
document.querySelectorAll
with a CSS selector (e.g., .test
, [data-attribute="test"]
)element.querySelectorAll
method on individual element objectsKeep in mind that these alternatives may have different performance characteristics and use cases compared to the approaches tested in this benchmark.