Benchmark: document.body vs document.querySelector('body')

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>

Previous results

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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36

Browser/OS: Chrome 110 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
querySelector	3966041.2 Ops/sec
Direct access	6266984.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

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.body vs document.querySelector('body') (version: 0)

Comparing performance of: querySelector vs Direct access

Created: 2 years ago by: Guest

Jump to the latest result

querySelector

Direct access

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):