<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div><div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></div>
<div class="test" id="test"></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 | 4615994.5 Ops/sec |
querySelectorAll | 967494.5 Ops/sec |
getElementsByClassName | 5808707.0 Ops/sec |
querySelector (ID) | 3381791.0 Ops/sec |
getElementsByID | 5656210.5 Ops/sec |
The provided JSON represents a JavaScript benchmarking test, specifically comparing the performance of different DOM querying methods in modern web browsers.
What is tested:
The benchmark tests five different DOM querying methods:
document.querySelector(".test")
: selects an element by its class name using the querySelector
method.document.querySelectorAll(".test")
: selects all elements by their class name using the querySelectorAll
method.document.getElementsByClassName("test")
: selects all elements by their class name using the getElementsByClassName
method (which is deprecated in favor of querySelectorAll
).document.querySelector("#test")
: selects an element by its ID using the querySelector
method.document.getElementById("test")
: selects an element by its ID using the getElementById
method.Options compared:
The benchmark compares the performance of each method in terms of the number of executions per second (FPS).
Pros and cons of each approach:
document.querySelector(".test")
: This method is the most commonly used way to select elements by class name. It's efficient, but it may not work as expected if there are multiple elements with the same class name.document.querySelectorAll(".test")
: This method is similar to querySelector
, but it returns a NodeList of all matching elements. It's more efficient than getElementsByClassName
.document.getElementsByClassName("test")
: This method is deprecated in favor of querySelectorAll
. It's less efficient and may not work correctly if the class name contains spaces or special characters.document.querySelector("#test")
: This method selects an element by its ID using the querySelector
method. It's efficient, but it only returns one element if there are multiple elements with the same ID.document.getElementById("test")
: This method selects an element by its ID using the getElementById
method. It's efficient and returns only one element.Library and purpose:
No specific library is used in this benchmark. However, some libraries like jQuery use these DOM querying methods extensively.
Special JS feature or syntax:
None of the tested methods rely on any special JavaScript features or syntax beyond standard DOM manipulation techniques.
Other alternatives:
There are other ways to select elements in modern web browsers, such as:
document.querySelector("div.test")
)querySelector
with custom selectorsquerySelectorAll
with a filter functionKeep in mind that these alternatives may have different performance characteristics or use cases compared to the tested methods.