Benchmark: document.body vs document.querySelector speed test

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>

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 (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

Test name	Executions per second
querySelector	11310729.0 Ops/sec
Direct access	41434160.0 Ops/sec

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

LLMs can make mistakes. Check important info.

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.body vs document.querySelector speed test (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>

Fastest: N/A

Slowest: N/A

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