Benchmark: offsetWidth vs. getBoundingClientRect().width

HTML Preparation code:

<div id="el">
  <h2>Lorem ipsum dolor sit amet</h2>
</div>

Script Preparation code:

var el = document.getElementById("el");

Tests:

offsetWidth
const width = el.offsetWidth; const perim = width;
getBoundingClientRect().width
const width = el.getBoundingClientRect().width;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
offsetWidth
getBoundingClientRect().width

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Definition**

The benchmark is comparing two approaches to retrieve the width of an HTML element: `offsetWidth` and `getBoundingClientRect().width`.

**Options Compared**

The two options being compared are:

1. **offsetWidth**: This property returns the width of an element in pixels, including any borders, padding, or margins.
2. **getBoundingClientRect().width**: This method returns the width of an element in pixels, but it does not include borders, padding, or margins.

**Pros and Cons**

* **offsetWidth**:
	+ Pros: faster execution, as it only requires a single property access.
	+ Cons: may not be accurate if the element has complex layouts or multiple containers.
* **getBoundingClientRect().width**:
	+ Pros: more accurate for elements with complex layouts or multiple containers, but slower execution due to the additional method call and property access.
	+ Cons: slower execution.

**Library and Purpose**

In this benchmark, there is no specific library being used. The `document` object and HTML element APIs are part of the standard JavaScript API.

**Special JS Features or Syntax**

There are no special JS features or syntax being tested in this benchmark. However, it's worth noting that some browsers may have performance optimizations for certain methods or properties (e.g., `getBoundingClientRect()` is optimized in WebKit-based browsers).

**Other Alternatives**

If you need to measure the width of an element, there are other alternatives:

* **clientWidth**: This property returns the width of an element's content area, without borders, padding, or margins.
* **scrollWidth**: This property returns the total width of an element's content area, including any borders, padding, or margins.

Keep in mind that each approach has its own trade-offs and limitations. Choose the one that best suits your specific use case.

**Benchmark Preparation Code**

The provided preparation code is:

```javascript
var el = document.getElementById("el");
```

This code retrieves an HTML element with the ID "el" and assigns it to a variable named `el`. The actual execution of this code will depend on the result of this line.

Related benchmarks:

offsetWidth vs. getBoundingClientRect().width (version: 0)

Comparing performance of: offsetWidth vs getBoundingClientRect().width

Created: 3 years ago by: Guest

Jump to the latest result

offsetWidth

getBoundingClientRect().width

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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