Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
querySelectorAll(*) vs getElementsByTagName(*) iteration
(version: 0)
Comparing performance of:
querySelectorAll vs getElementsByTagName
Created:
4 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<div></div> <p><b>bar <s>baz <i>some</i></s> fab</b></p> <div><small>terms of text</small> more text nodes <b>here</b></div> <div><p> text nodes <kbd>var</kbd> here </p></div> <div><ul><li>some list items</li><li>2nd item</li></ul></div> <div><p><i>test <b>some</b></i></p></div> <div>lorem</div> <div><b>foo</b></div> <div>ipsum</div> <section><div><article><h1>Test</h1></article></div></section>
Tests:
querySelectorAll
const allDivs = document.querySelectorAll('*'); allDivs.forEach(function (div) {});
getElementsByTagName
const allDivs = document.getElementsByTagName('*'); const arrayAllDivs = Array.from(allDivs); arrayAllDivs.forEach(function (div) {});
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
querySelectorAll
getElementsByTagName
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36
Browser/OS:
Chrome 131 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=573015" width="100%" height="500px"></iframe>
Test name
Executions per second
querySelectorAll
170740.1 Ops/sec
getElementsByTagName
138384.1 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **What is being tested?** The provided JSON represents two individual test cases, each designed to measure the performance difference between using `querySelectorAll` and `getElementsByTagName` to select all elements in a HTML document. The tests are designed to be run multiple times to determine which method is faster. **Options compared:** Two options are being compared: 1. **`querySelectorAll`**: This method uses a CSS selector syntax (e.g., `*`) to select all elements on the page. 2. **`getElementsByTagName`**: This method returns an array of HTML elements with a specific tag name (in this case, `*`, meaning any element). **Pros and Cons:** 1. **`querySelectorAll`**: * Pros: + More flexible and expressive syntax for selecting elements (e.g., use `*` to select all, or `.class` to select elements with a specific class). + Often faster than `getElementsByTagName` because it only requires one pass through the DOM. * Cons: + Requires a CSS selector library (e.g., Sizzle) if not supported by the browser. 2. **`getElementsByTagName`**: * Pros: + Simple and straightforward syntax for selecting elements with a specific tag name. * Cons: + Less flexible than `querySelectorAll`, as it only selects elements with a specific tag name. + Requires multiple passes through the DOM, which can be slower. **Library usage:** The `querySelectorAll` test case uses the Sizzle library to support older browsers that don't have native CSS selector support. The Sizzle library is a popular choice for implementing CSS selectors in JavaScript. **Special JS feature or syntax:** None of the provided benchmarks use special JavaScript features or syntax beyond what's standard for modern JavaScript development. **Other alternatives:** For testing `querySelectorAll` and `getElementsByTagName`, other alternatives could include: 1. **QuerySelector API**: A newer, more expressive CSS selector syntax that's widely supported by modern browsers. 2. **DOM Traversal APIs**: Other DOM traversal APIs, such as `document.body.querySelectorAll()` or `document.querySelector()`, which can be used to select elements in a document. Keep in mind that the choice of method ultimately depends on the specific use case and requirements of your project.
Related benchmarks:
querySelectorAll vs getElementsByTagName iteration test
querySelectorAll() vs getElementsByTagName()
querySelectorAll() vs getElementsByTagName() - with constant
querySelectorAll() vs getElementsByTagName() - with constant length
Comments
Confirm delete:
Do you really want to delete benchmark?