Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
document.documentElement vs document.querySelector("html")
(version: 1)
Comparing performance of:
querySelector vs Direct access
Created:
one year ago
by:
Guest
Go to the latest result
HTML Preparation code:
<!DOCTYPE html> <html lang="en"> <head> </head> <body> <div id="foo"></div> </body> </html>
Tests:
querySelector
const pageBody = document.querySelector('html');
Direct access
const pageBody = document.documentElement;
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 (X11; Linux x86_64; rv:133.0) Gecko/20100101 Firefox/133.0
Browser/OS:
Firefox 133 on Linux
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=573352" width="100%" height="500px"></iframe>
Direct access
13.6M/s
querySelector
10.1M/s
View exact numbers
Test name
Executions per second
✓
Direct access
13,648,050 Ops/sec
querySelector
10,085,565 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
The benchmark provided is designed to compare the performance of two different methods of accessing the root HTML element of a document in a web browser using JavaScript: 1. **Direct Access** using `document.documentElement` 2. **Using `querySelector`** with `document.querySelector("html")` ### Test Cases Explained - **Direct Access**: - **Code**: `const pageBody = document.documentElement;` - This approach directly accesses the root element of the HTML document. The property `documentElement` is a predefined reference that returns the `<html>` element of the document. - **Query Selector**: - **Code**: `const pageBody = document.querySelector('html');` - This method utilizes the `querySelector` function, which is a more versatile and general-purpose method for selecting elements based on CSS selectors. In this case, it's specifically selecting the `<html>` element. ### Performance Results The benchmark results measured in `ExecutionsPerSecond` are as follows: - **Direct access**: 13,648,050 executions per second - **querySelector**: 10,085,565 executions per second This indicates that the direct access method is more than 35% faster than the querySelector method in this particular execution context on the given hardware and browser platform. ### Pros and Cons of Each Approach #### Direct Access (`document.documentElement`) - **Pros**: - Faster performance because it directly accesses the property without the overhead of parsing a selector string and evaluating it. - More straightforward and less error-prone when retrieving the root element. - **Cons**: - Less flexible since it doesn’t allow for more complex selections or filtering beyond the direct property reference. #### `querySelector` (`document.querySelector('html')`) - **Pros**: - More versatile: can select any element using a CSS selector, enabling complex queries beyond the root element. - Can easily switch to select different elements without changing the fundamental method. - **Cons**: - Slower performance due to the overhead of interpreting and executing the selector string. - Slightly more complex in intent compared to the simplicity of direct property access. ### Other Considerations When performance is a critical factor, such as in high-frequency operations (like animations or when manipulating the DOM in response to user events), using direct access is advisable. In scenarios where you need more complex queries or want to operate on various selectors dynamically, `querySelector` is beneficial despite its performance cost. ### Alternatives Other alternatives to access the root HTML element in JavaScript include: - **Using `getElementsByTagName`**: ```javascript const pageBody = document.getElementsByTagName('html')[0]; ``` This approach retrieves a live HTMLCollection of elements with the specified tag name. While it may offer benefits in specific use cases, it's generally less intuitive and can be slower than direct property access. - **Using jQuery (if included in the project)**: ```javascript const pageBody = $('html'); ``` While jQuery provides a powerful and flexible interface for DOM manipulation, it also adds significant overhead and dependency, making it generally less preferable for simple tasks compared to vanilla JavaScript. In summary, developers should choose the method based on their specific use cases—favoring performance in critical paths while leveraging convenience and flexibility when necessary.
Related benchmarks
document.body vs document.querySelector('body')
document.body vs document.querySelector on element
getElementById vs querySelector (ver.2023.05)
document.body vs document.querySelector speed test
Comments
Confirm delete:
Do you really want to delete benchmark?