<div class="test" id="test"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div><div class="test" id="test1"></div>
document.querySelector(".test")
document.querySelectorAll(".test")
document.getElementsByClassName(".test")
document.querySelector("#test")
document.getElementById("test")
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
querySelector | |
querySelectorAll | |
getElementsByClassName | |
querySelector (ID) | |
getElementsByID |
Test name | Executions per second |
---|---|
querySelector | 3706915.2 Ops/sec |
querySelectorAll | 844793.2 Ops/sec |
getElementsByClassName | 4773760.5 Ops/sec |
querySelector (ID) | 2711151.0 Ops/sec |
getElementsByID | 4158178.8 Ops/sec |
Let's dive into the explanation of the provided benchmark.
Benchmark Definition
The benchmark tests four different ways to select HTML elements from a DOM tree: document.querySelector
, document.querySelectorAll
, document.getElementsByClassName
, and document.getElementById
. There are two variations of each method:
.test
)#test
)Options Compared
The benchmark compares the performance of these four methods with their respective ID-based variants.
querySelector
vs querySelectorAll
querySelector
is used to select a single element based on a CSS selector.querySelectorAll
returns all elements that match the CSS selector, even if only one element exists.getElementsByClassName
vs document.getElementById
getElementsByClassName
returns a live HTMLCollection of elements with the specified class name.document.getElementById
returns a single element with the specified ID attribute.Pros and Cons
Here's a brief summary of each method:
document.querySelector
: Fast, but can return null if no matching element is found.document.querySelectorAll
: Can be slow for large number of matching elements, as it returns a live HTMLCollection.getElementsByClassName
: Returns all elements with the specified class name, which can be useful when multiple classes are used.document.getElementById
: Fast and efficient, but only works with ID attributes.Other Considerations
querySelectorAll
is slower than other methods for large numbers of matching elements because it has to parse the entire DOM tree.getElementsByClassName
can be slower than document.querySelector
if no elements have the specified class name.Library and Syntax
None of the benchmarked methods use external libraries. However, some browsers may use polyfills or native implementations for these APIs.
Special JS Features
There are no special JavaScript features used in this benchmark.
Alternatives
Other alternatives to test might include:
document.querySelectorAll
with a more specific selector (e.g., .test:contains("hello")
) to test its performance.getElementsByClassName
.Overall, this benchmark provides a good starting point to understand the relative performance of these four methods in selecting HTML elements from the DOM tree.