Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelectorAll vs getElementsByClassName x2
(version: 0)
Comparing performance of:
querySelector vs getElementsByClassName
Created:
7 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div><div class="test"></div> <div class="test2"></div>
Tests:
querySelector
Array.from(document.querySelectorAll(".test, .test2")).forEach((el) => el.remove());
getElementsByClassName
Array.from(document.getElementsByClassName("test")).forEach((el) => el.remove()); Array.from(document.getElementsByClassName("test2")).forEach((el) => el.remove());
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
querySelector
getElementsByClassName
Fastest:
N/A
Slowest:
N/A
Latest run results:
No previous run results
This benchmark does not have any results yet. Be the first one
to run it!
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Based on the provided benchmark results, it appears that: 1. The `getElementsByClassName` test has an execution rate of approximately 258 executions per second in Chrome 69 on a Linux desktop platform. 2. The `querySelector` test has an execution rate of approximately 122 executions per second in Chrome 69 on a Linux desktop platform. These results suggest that the `getElementsByClassName` method is slightly faster than the `querySelector` method, especially when using class names as selectors. However, it's essential to note that these results may not be representative of all use cases or browsers and should be considered in conjunction with other factors when making decisions about which method to use. To further improve performance, consider optimizing the HTML structure, reducing the number of DOM elements, and leveraging browser-specific features like `querySelector` with attribute selectors.
Related benchmarks:
querySelector vs getElementsByClassName with multiple matching nodes
querySelectorAll vs getElementsByClassName Test
querySelectorAll vs getElementsByClassName Test2
querySelector vs querySelectorAll simple (single element result)
Comments
Confirm delete:
Do you really want to delete benchmark?