Benchmark: offsetWidth vs closest

HTML Preparation code:

<div id="teste">teste</div>

Script Preparation code:

var teste_n = '123px';
var _style = window.getComputedStyle(document.getElementById('teste'));

Tests:

closest
document.getElementById('teste').closest('[hidden]');
offsetwidth
document.getElementById('teste').offsetwidth;
hidden
document.getElementById('teste').hidden;
offsetWidth && offsetHeight
let teste = document.getElementById('teste'); teste.offsetWidth && teste.offsetHeight;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
closest
offsetwidth
hidden
offsetWidth && offsetHeight

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its various components.

**Benchmark Definition JSON**

The provided JSON represents a JavaScript microbenchmark that compares different approaches to retrieve properties from an HTML element.

**Script Preparation Code**

This section of code is executed once, before running each test. It:

1. Assigns a string value `'123px'` to the variable `teste_n`.
2. Retrieves the computed style of the HTML element with the id `teste` using the `window.getComputedStyle()` function and stores it in the variable `_style`.

**Html Preparation Code**

This section of code is executed once, before running each test. It creates a simple HTML structure:

```html
<div id="teste">teste</div>
```

This div will be used to store the test element.

**Individual Test Cases**

The benchmark consists of four test cases:

1. `closest`: Retrieves the closest ancestor with the `hidden` pseudo-class using the `closest()` method.
2. `offsetwidth`: Retrieves the offset width property using the `.offsetWidth` property (note: there is a typo in the original code, it should be `.offsetWidth`, not `.offsetwidth`).
3. `hidden`: Retrieves the value of the `hidden` pseudo-class directly using the `.hidden` property.
4. `offsetWidth && offsetHeight`: Verifies that the test element has both an offset width and height using a conditional statement.

**Library Usage**

None of these tests explicitly use a JavaScript library, but some modern browsers may utilize internal libraries or APIs to implement these methods (e.g., `closest()` is often implemented in terms of querySelectorAll(), while `.offsetWidth` and `.hidden` are part of the DOM API).

**Special JS Feature or Syntax**

There is no special JS feature or syntax used in this benchmark.

**Other Considerations**

These tests can be seen as examples of:

* Property access: `offsetWidth`, `.offsetWidth`
* Pseudo-classes: `hidden`, `[hidden]`
* Ancestor selection: `closest`

In terms of optimization, these tests aim to measure the performance differences between:

* Retrieving a property directly (e.g., `.offsetWidth`)
* Using a method to retrieve a property (e.g., `offsetWidth`)
* Verifying multiple properties simultaneously (e.g., `offsetWidth && offsetHeight`)

**Alternative Approaches**

Some alternative approaches could be explored, such as:

* Using `getComputedStyle()` instead of `window.getComputedStyle()`
* Utilizing ` CSSOMView` or similar APIs for optimized style access
* Implementing custom solutions using JavaScript's built-in functions and data structures

However, these alternatives may not necessarily provide significant performance improvements over the existing implementation.

**Benchmarking Insights**

The provided benchmark results show that:

* The `closest()` method is slower than retrieving properties directly (`.offsetWidth`).
* Retrieving `hidden` pseudo-classes using `.hidden` is faster than relying on `[hidden]`.
* Verifying multiple properties simultaneously (`offsetWidth && offsetHeight`) does not provide significant performance gains compared to separate property accesses.

Latest run results:

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

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

Browser/OS: Chrome 90 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
closest	3518286.5 Ops/sec
offsetwidth	6622458.5 Ops/sec
hidden	6157999.0 Ops/sec
offsetWidth && offsetHeight	404109.9 Ops/sec

Related benchmarks:

offsetWidth vs closest (version: 0)

Comparing performance of: closest vs offsetwidth vs hidden vs offsetWidth && offsetHeight

Created: 3 years ago by: Guest

Jump to the latest result

closest

offsetwidth

hidden

offsetWidth && offsetHeight

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):