Benchmark: Body selector speed

Tests:

document.body
if(document.body.classList.contains('webp-on')){console.log(!0)}else{console.log(!1)} if(document.body.classList.contains('webp-on')){console.log(!0)}else{console.log(!1)} if(document.body.classList.contains('webp-on')){console.log(!0)}else{console.log(!1)}
getElementsByTagName
if(document.getElementsByTagName('body')[0].classList.contains('webp-on')){console.log(!0)}else{console.log(!1)} if(document.getElementsByTagName('body')[0].classList.contains('webp-on')){console.log(!0)}else{console.log(!1)} if(document.getElementsByTagName('body')[0].classList.contains('webp-on')){console.log(!0)}else{console.log(!1)}
querySelector
if(document.querySelector('body').classList.contains('webp-on')){console.log(!0)}else{console.log(!1)} if(document.querySelector('body').classList.contains('webp-on')){console.log(!0)}else{console.log(!1)} if(document.querySelector('body').classList.contains('webp-on')){console.log(!0)}else{console.log(!1)}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
document.body
getElementsByTagName
querySelector

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Browser/OS: Chrome 102 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
document.body	68553.2 Ops/sec
getElementsByTagName	65789.5 Ops/sec
querySelector	67405.4 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the speed of three different approaches for checking if an HTML element exists and has a specific class.

**Approaches Compared**

1. **`document.body.classList.contains('webp-on')`**: This approach uses the `classList` property to check if the `body` element has a specific class (`'webp-on'`). If it does, the code executes the `console.log(!0)` statement; otherwise, it logs `console.log(!1)`.
2. **`document.getElementsByTagName('body')[0].classList.contains('webp-on')`**: This approach uses the `getElementsByTagName` method to retrieve all elements with the tag name `'body'`, selects the first one (assuming there's only one), and then checks if its class list contains `'webp-on'`.
3. **`document.querySelector('body').classList.contains('webp-on')`**: This approach uses the `querySelector` method to select an element with the tag name `'body'` using a CSS selector. It then checks if the selected element's class list contains `'webp-on'`.

**Pros and Cons of Each Approach**

1. **`document.body.classList.contains('webp-on')`**:
	* Pros: Fast, lightweight, and widely supported.
	* Cons: May not work correctly in older browsers or when used with other elements that have the same class name.
2. **`document.getElementsByTagName('body')[0].classList.contains('webp-on')`**:
	* Pros: Works with all HTML versions, but is slightly slower due to the `getElementsByTagName` method's overhead.
	* Cons: May fail if there are multiple elements with the tag name `'body'`.
3. **`document.querySelector('body').classList.contains('webp-on')`**:
	* Pros: Fast and flexible, as it allows using CSS selectors for more complex queries.
	* Cons: May be slower than `document.body.classList.contains('webp-on')`, especially in older browsers.

**Library Usage**

There is no explicit library usage mentioned in the benchmark. However, some browser-specific APIs may be used indirectly (e.g., Chrome's `querySelectorAll` method uses a library-like API under the hood).

**Special JavaScript Features or Syntax**

None are explicitly mentioned.

**Other Considerations**

* The benchmark measures the speed of these approaches alone, without considering other factors like memory usage or side effects on the DOM.
* It's essential to note that this benchmark may not accurately represent real-world scenarios, as it only tests a specific snippet of code in isolation.

**Alternatives**

If you need more comprehensive benchmarking or want to compare different approaches for checking HTML element existence and class presence, consider using alternative libraries or tools like:

* Benchmarking frameworks like `benchmark.js` or `fast-bench`
* Web performance measurement tools like `webpagetest` or `Lighthouse`
* Browser-specific performance APIs (e.g., Chrome's `PerformanceNavigation.getEntries()` method)

Keep in mind that the choice of tool depends on your specific use case and requirements.

Related benchmarks:

Body selector speed (version: 3)

Comparing performance of: document.body vs getElementsByTagName vs querySelector

Created: 3 years ago by: Registered User

Jump to the latest result

document.body

getElementsByTagName

querySelector

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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