Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
querySelectorAll: id vs tag vs class
(version: 0)
Benchmark.js
test which selector is better for find element
Comparing performance of:
find by id vs find by class vs find by tag
Created:
6 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div> <a id="tr_1" class="c-1"> <span id="tr_2" class="c-2"></span> </a> <div id="tr_3" class="c-3"></div> </div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js'></script>
Tests:
find by id
document.querySelectorAll("#tr_1"); document.querySelectorAll("#tr_2"); document.querySelectorAll("#tr_3");
find by class
document.querySelectorAll(".c-1"); document.querySelectorAll(".c-2"); document.querySelectorAll(".c-3");
find by tag
document.querySelectorAll("a"); document.querySelectorAll("span"); document.querySelectorAll("div");
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
find by id
find by class
find by tag
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36
Browser/OS:
Chrome 132 on Mac OS X 10.15.7
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=583602" width="100%" height="500px"></iframe>
find by class
2.1M/s
find by tag
2.1M/s
find by id
1.4M/s
View exact numbers
Test name
Executions per second
✓
find by class
2,081,894 Ops/sec
find by tag
2,074,300 Ops/sec
find by id
1,362,193 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and its test cases. **What is being tested:** The benchmark tests the performance of three different ways to select elements from an HTML document using JavaScript: 1. **By ID**: `document.getElementById("selector")` 2. **By Class**: `document.querySelectorAll("[class='selector']")` or `document.getElementsByClassName("selector")` 3. **By Tag**: `document.getElementsByTagName("tagName")` **Options compared:** The benchmark compares the performance of three different methods for each test case: 1. **Direct selector (e.g., `document.getElementById("#tr_1")`)**: This method uses the `id` attribute to select an element. 2. **Class selector (e.g., `document.querySelectorAll("[class='c-1']")`)**: This method uses the `class` attribute with a value that matches the desired class. 3. **Tag selector (e.g., `document.getElementsByTagName("a")`)**: This method uses the `<tagName>` element. **Pros and Cons of each approach:** * **Direct selector**: + Pros: Fast, efficient, and widely supported. + Cons: Can be brittle if IDs change, and may not work as expected with multiple elements having the same ID. * **Class selector**: + Pros: More flexible than direct selector, works well with multiple elements sharing a class. + Cons: May be slower than direct selector for simple cases, and can be affected by CSS specificity rules. * **Tag selector**: + Pros: Simple and fast, but may not work as expected if the tag name is not unique. + Cons: Can be less efficient than direct or class selectors, especially with complex HTML. **Library usage:** The benchmark uses jQuery (version 3.4.1), which provides a `$.querySelectorAll()` method for selecting elements by class. **Special JS feature or syntax:** This benchmark does not use any special JavaScript features or syntax beyond the standard DOM manipulation methods. **Other alternatives:** There are other ways to select elements in HTML, such as: * Using the `querySelector()` method with a CSS selector (e.g., `document.querySelector("#tr_1")`) * Using the `querySelectorAll()` method with a CSS selector (e.g., `document.querySelectorAll("[class='c-1']")`) Note that these alternatives may have different performance characteristics compared to the methods tested in this benchmark.
Related benchmarks
jQuery 3.3.1 selector vs document.querySelector
Comments
Confirm delete:
Do you really want to delete benchmark?