Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
document.body vs document.querySelector('body')
(version: 0)
Comparing performance of:
querySelector vs Direct access
Created:
4 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<!DOCTYPE html> <html lang="ru"> <head> </head> <body> </body> </html>
Tests:
querySelector
const pageBody = document.querySelector('body');
Direct access
const pageBody = document.body;
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
querySelector
Direct access
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
5 months ago
)
User agent:
Mozilla/5.0 (X11; Linux x86_64; rv:146.0) Gecko/20100101 Firefox/146.0
Browser/OS:
Firefox 146 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=625299" width="100%" height="500px"></iframe>
Direct access
11.4M/s
querySelector
5.5M/s
View exact numbers
Test name
Executions per second
✓
Direct access
11,425,022 Ops/sec
querySelector
5,528,192 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of MeasureThat.net and explore what's being tested in this benchmark. **Benchmark Overview** The primary goal of this benchmark is to compare two approaches to accessing the `body` element of an HTML document: using `document.querySelector('body')` (a DOM query method) versus directly accessing the `body` property of the `document` object (`document.body`). This comparison aims to determine which approach is faster. **Options Compared** Two options are being compared: 1. **querySelector**: This is a method provided by the Web APIs (specifically, the DOM and CSSOM) that allows you to select an element in an HTML document using a CSS selector. 2. **Direct access**: In this case, it's just accessing the `body` property of the `document` object directly. **Pros and Cons** **querySelector:** Pros: * More flexible and powerful, as it can select multiple elements based on a CSS selector * Can be more efficient for complex or dynamic selections Cons: * May have overhead due to the DOM query algorithm and parsing CSS selectors * Could introduce additional computational resources and memory usage **Direct access:** Pros: * Simple and lightweight, with minimal overhead * Often faster since it doesn't involve a separate DOM query algorithm Cons: * Less flexible and less powerful compared to `querySelector` * May not be suitable for complex or dynamic selections **Other Considerations** Both approaches have performance implications that depend on the specific use case. For simple, static HTML documents, direct access might be faster. However, when dealing with more complex, dynamic, or nested elements, `querySelector` can provide a better experience. Additionally, keep in mind that this benchmark doesn't account for other factors like: * JavaScript engine performance variations * Browser-specific optimizations and caching * Network latency (if applicable) **Libraries and Special Features** There's no explicit library mentioned in the provided code snippets. However, `querySelector` is a built-in Web API feature, which means it's a native part of modern browsers. If you were to test similar benchmarks on other platforms or with specific libraries, you'd need to consider factors like: * Library-specific DOM query algorithms and optimizations * Browser engine performance variations (e.g., SpiderMonkey vs. V8) * Platform-specific features and APIs **Alternatives** Other alternatives for accessing elements in an HTML document include: 1. **`document.createElement('body')`**: Create a new `body` element and append it to the DOM. 2. **`document.querySelector('[attr="body"]')`**: Use attribute-based selectors (e.g., `[attr="body"]`) which might be faster than CSS selectors in some cases. 3. **`Element.prototype.contains()`**: Check if an element contains another element using a custom method. These alternatives can provide different trade-offs between performance, flexibility, and complexity. It's essential to consider your specific use case and weigh the pros and cons of each approach before choosing the best solution.
Related benchmarks
document.querySelectorAll vs document.body.querySelectorAll
Comments
Confirm delete:
Do you really want to delete benchmark?