Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
document.body vs document.querySelector speed test
(version: 0)
Comparing performance of:
querySelector vs Direct access
Created:
2 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<!DOCTYPE html> <html lang="ru"> <head> </head> <body> <div id="foo"></div> </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:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
Browser/OS:
Chrome 109 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=585521" width="100%" height="500px"></iframe>
Direct access
41.4M/s
querySelector
11.3M/s
View exact numbers
Test name
Executions per second
✓
Direct access
41,434,160 Ops/sec
querySelector
11,310,729 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'd be happy to explain what's being tested in this benchmark and provide an overview of the options compared, their pros and cons, and other considerations. **Benchmark Overview** The benchmark is designed to compare two approaches to accessing the `body` element or document body: 1. **Direct Access**: Using `document.body` directly. 2. **querySelector**: Using `document.querySelector('body')`, which returns a single DOM element or null if no matching element is found. **Options Compared** The benchmark compares these two options in terms of performance, specifically execution speed (measured in executions per second). The script preparation code and HTML preparation code are the same for both test cases. **Pros and Cons of Each Approach** 1. **Direct Access** * Pros: + Typically faster since it directly accesses a property without requiring a DOM query. + May be more cache-friendly, as the browser has already computed the value of `document.body`. * Cons: + May not work in all cases where the `body` element is not available or does not exist (e.g., if you're working with an iframe). 2. **querySelector** * Pros: + More flexible, as it can be used to select multiple elements using a CSS selector. + Can handle cases where the element is not found or is dynamic. * Cons: + May be slower since it requires the browser to perform a DOM query and potentially traverse the DOM tree. + May have cache misses if the `body` element is not cached or is frequently updated. **Library and Special JS Features** In this benchmark, there are no libraries explicitly mentioned. However, `querySelector` uses the W3C standard `querySelector()` method, which is supported by modern browsers. There are also no special JavaScript features used in these test cases. The code uses standard ECMAScript syntax. **Other Considerations** When working with DOM queries like `querySelector`, it's essential to consider the following: * **Performance**: While `querySelector` may be more flexible, it can also introduce performance overhead. In some cases, using `document.body` directly might be faster. * **DOM Tree**: The `querySelector` method traverses the DOM tree to find the matching element. This can lead to slower performance if the document is large or has many elements with similar selectors. * **Cache Misses**: If the `body` element is frequently updated or not cached, using `document.body` directly might be a better choice to avoid cache misses. **Alternatives** Other alternatives to `querySelector` include: * **querySelectorAll()**: Returns an HTMLCollection of all matching elements. * **getElementById()` and **getElementByUsername()`: Return the first element with the specified ID or CSS class, respectively. * **getElementsByClassName()`: Returns a NodeList of all elements with the specified class name. Keep in mind that these alternatives have their own trade-offs in terms of performance, flexibility, and usage scenarios.
Related benchmarks
document.querySelectorAll vs document.body.querySelectorAll
Comments
Confirm delete:
Do you really want to delete benchmark?