Benchmark: offsetwidth vs getBoundingClientRect

HTML Preparation code:

<div id="test">test</div>

Script Preparation code:

var test_n = '123px';
var _style = window.getComputedStyle(document.getElementById('test'));

Tests:

offsetwidth
document.getElementById('test').offsetwidth;
getBoundingClientRect
document.getElementById('test').getBoundingClientRect;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
offsetwidth
getBoundingClientRect

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser/OS: Chrome 107 on Windows

View result in a separate tab

Test name	Executions per second
offsetwidth	5167698.5 Ops/sec
getBoundingClientRect	5216786.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition:**

The benchmark compares the performance of two methods to measure the width of an element: `offsetWidth` and `getBoundingClientRect`. The goal is to determine which method is faster.

**Options Compared:**

Two options are being compared:

1. **offsetWidth**: This method returns the width of an element in pixels, but it requires a separate DOM query to access the element's style (using `window.getComputedStyle(document.getElementById('test'))`). This approach can be slower because it involves an additional DOM lookup.
2. **getBoundingClientRect**: This method returns the bounding rectangle of an element, which includes its width. It is generally considered faster than `offsetWidth` because it only requires a single DOM query to access the element's style.

**Pros and Cons:**

* **offsetWidth**:
	+ Pros: Can be useful in situations where you need to measure an element's width without relying on the layout, but this approach can add overhead due to the additional DOM query.
	+ Cons: Can be slower than `getBoundingClientRect` because it involves two steps (DOM lookup and style access).
* **getBoundingClientRect**:
	+ Pros: Generally faster than `offsetWidth` since it only requires a single DOM query. It also provides more information about the element's bounding rectangle, including its width.
	+ Cons: May not be suitable for situations where you need to measure an element's width without relying on the layout.

**Library and Its Purpose:**

In this benchmark, the `window.getComputedStyle` function is used to access the style of an element. This library provides a way to retrieve an element's computed styles (e.g., position, width, height) in a single step.

**Special JS Feature or Syntax:**

There are no special JavaScript features or syntax being tested or utilized in this benchmark.

**Other Alternatives:**

If you need to measure the width of an element, other alternatives to `offsetWidth` and `getBoundingClientRect` include:

1. **clientWidth**: Similar to `offsetWidth`, but only returns the width of the content within the element's border, not including padding or margin.
2. **scrollWidth**: Returns the total width of an element when it is scrolled to its maximum extent.
3. **width` property: Some browsers (e.g., Edge) provide a `width` property on the element object itself, which can be used to measure the element's width.

Keep in mind that each approach has its pros and cons, and the choice ultimately depends on your specific use case and performance requirements.

Related benchmarks:

offsetwidth vs getBoundingClientRect (version: 0)

Comparing performance of: offsetwidth vs getBoundingClientRect

Comparing performance of: offsetwidth vs getBoundingClientRect

Created: 2 years ago by: Guest

Jump to the latest result

offsetwidth

getBoundingClientRect

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