Benchmark: document.body vs document.querySelector on element

HTML Preparation code:

<!DOCTYPE html>
<html lang="ru">
<head>
</head>
<body>
  <div id="foo"></div>
</body>
</html>

Tests:

querySelector
const pageBody = document.querySelector('#foo');
Direct access
const pageBody = document.body.querySelector('#foo');

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 10 runs

Direct access

7.5M/s

querySelector

6.1M/s

Fastest: Direct access (1.2x faster)

View exact numbers

✓ Direct access: 7,519,281 ops/sec
• querySelector: 6,072,956 ops/sec

Firefox 6 runs

querySelector

3.6M/s

Direct access

3.5M/s

View exact numbers

✓ querySelector: 3,618,720 ops/sec
• Direct access: 3,454,786 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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; rv:139.0) Gecko/20100101 Firefox/139.0

Browser/OS: Firefox 139 on Windows

View result in a separate tab

querySelector

3.3M/s

Direct access

3.2M/s

View exact numbers

Test name	Executions per second
✓ querySelector	3,333,651 Ops/sec
Direct access	3,185,446 Ops/sec

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

LLMs can make mistakes. Check important info.

**Understanding the Benchmark**

The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net, which measures the performance of two different approaches to access an HTML element: `document.body` and `document.querySelector`. The benchmark is designed to compare the execution times of these two methods.

**Options Compared**

Two options are compared in this benchmark:

1. **Direct Access (Document Body)**: This approach uses the `document.body` property to directly access the `<body>` element of an HTML document.
2. **QuerySelector**: This approach uses the `document.querySelector()` method, which searches for an element by its CSS selector.

**Pros and Cons**

Here's a brief overview of each approach:

* **Direct Access (Document Body)**
	+ Pros: Simple and straightforward to use. No additional DOM elements or queries are needed.
	+ Cons: This approach requires the existence of the `<body>` element in the HTML document, which may not always be the case.
* **QuerySelector**
	+ Pros: More flexible and powerful than direct access. Can search for elements using CSS selectors, making it easier to target specific elements.
	+ Cons: May introduce additional overhead due to the DOM query mechanism.

**Library Used**

Neither of these approaches relies on a specific library. However, the `querySelector` method is an API provided by modern browsers and can be used without any external dependencies.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark that would require knowledge beyond basic JavaScript programming.

**Other Considerations**

When considering performance optimizations or DOM manipulation, the choice between direct access and `querySelector` depends on the specific use case. If you need to frequently access a specific element within a document, using `querySelector` might be more efficient. However, if you're working with simple cases where direct access is sufficient, it may be faster.

**Alternatives**

Other alternatives for accessing DOM elements include:

1. **`getElementsByClassName()`**: Similar to `querySelector`, but uses class names instead of CSS selectors.
2. **`getElementById()`**: Accesses an element by its ID attribute.
3. **`getElementsByTagName()`**: Returns a collection of elements with the specified tag name.

These alternatives may have different performance characteristics and usage scenarios, depending on the specific requirements of your project.

document.body vs document.querySelector on element (version: 0)

Comparing performance of: `querySelector vs Direct access`

Created: 4 years ago by: Guest

Go to the latest result

querySelector

Direct access

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 10 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

document.body vs document.querySelector on element (version: 0)

Comparing performance of: querySelector vs Direct access

Created: 4 years ago by: Guest

Go to the latest result

querySelector

Direct access

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 10 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `querySelector vs Direct access`