Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
QuerySelector vs QuerySelectorAll + forEach for 1 element
(version: 0)
Benchmark.js
Comparing performance of:
QuerySelector vs QuerySelectorAll + ForEach
Created:
5 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<div id='hello'></div> <div id='there'></div>
Tests:
QuerySelector
console.log(document.querySelector('#hello'));
QuerySelectorAll + ForEach
document.querySelectorAll('#hello').forEach((el) => { console.log(el); });
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
QuerySelector
QuerySelectorAll + ForEach
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/135.0.0.0 Safari/537.36
Browser/OS:
Chrome 135 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=605855" width="100%" height="500px"></iframe>
QuerySelector
324K/s
QuerySelectorAll + ForEach
284K/s
View exact numbers
Test name
Executions per second
✓
QuerySelector
323,930 Ops/sec
QuerySelectorAll + ForEach
283,806 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark test. **What is being tested?** The benchmark is testing two approaches to select and log an element from HTML: 1. `console.log(document.querySelector('#hello'));`: This approach uses the `querySelector` method, which selects the first element that matches the specified CSS selector. 2. `document.querySelectorAll('#hello').forEach((el) => { console.log(el); });`: This approach uses the `querySelectorAll` method to select all elements that match the specified CSS selector, and then iterates over the result using the `forEach` method, logging each element. **What options are being compared?** The two approaches being tested are: * Using `querySelector` (Approach 1) * Using `querySelectorAll` followed by `forEach` (Approach 2) **Pros and Cons of each approach:** **Approach 1: `console.log(document.querySelector('#hello'));`** Pros: * Simple and concise * Fast, since it only needs to select one element Cons: * May not find the expected element if there are multiple elements with the same selector (it will return the first one) * Does not log all matching elements, just the first one **Approach 2: `document.querySelectorAll('#hello').forEach((el) => { console.log(el); });`** Pros: * Logs all matching elements * Handles cases where there are multiple elements with the same selector Cons: * More complex and verbose than Approach 1 * May be slower since it needs to select all elements and then iterate over them **Other considerations:** * Using `querySelectorAll` followed by `forEach` can be less efficient if only one element matches the selector, as it will still perform a full query. * In modern JavaScript, it's often preferred to use `Array.prototype.forEach.call()` or a for...of loop instead of vanilla `forEach`, which provides better support for handling arrays and other iterable objects. **Library usage:** In this benchmark, no libraries are explicitly used. However, the `document` object is part of the browser's DOM (Document Object Model), which is a built-in JavaScript API. **Special JS features or syntax:** There are no special JavaScript features or syntax mentioned in this benchmark. The test only uses standard JavaScript methods and properties, such as `querySelector`, `querySelectorAll`, `forEach`, and `console.log`. **Alternatives:** Other alternatives to the two approaches being tested could include: * Using `Array.prototype.find()` or a similar method to find the first matching element * Using a library like Lodash to handle array-like objects and provide more concise methods for iterating over them * Using a more efficient querying method, such as CSS selectors with attribute filtering (e.g., `document.querySelector('#hello[attr="value"]')`) Keep in mind that these alternatives may not be relevant or applicable to all use cases, and the benchmark's focus is on comparing two specific approaches.
Related benchmarks
querySelector vs getElementById
getElementById vs querySelector 2
getElementsByClassName()[0] vs querySelectorAll
Comments
Confirm delete:
Do you really want to delete benchmark?