Benchmark: clientWidth vs offsetWidth vs scrollWidth

HTML Preparation code:

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

Script Preparation code:

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

Tests:

clientWidth
document.getElementById('teste').clientWidth;
offsetWidth
document.getElementById('teste').offsetwidth;
scrollWidth
document.getElementById('teste').scrollWidth;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clientWidth
offsetWidth
scrollWidth

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark created on MeasureThat.net. The benchmark compares the performance of three different methods to retrieve the width of an HTML element: `clientWidth`, `offsetWidth`, and `scrollWidth`.

**Test Case 1: clientWidth**

* **Description**: Retrieves the width of an element relative to its parent element.
* **Options compared**: Not specified, but likely against other methods (e.g., `offsetWidth`, `scrollWidth`) for a direct comparison.
* **Pros and Cons**:
	+ Pros: Often faster than `offsetWidth` or `scrollWidth` since it only needs to calculate the width relative to its parent element.
	+ Cons: May not reflect the full width of the element if the parent element has a different width.

**Test Case 2: offsetWidth**

* **Description**: Retrieves the width of an element including any borders, margins, and padding.
* **Library:** `window.getComputedStyle` is used to access the computed style of the element.
* **Pros and Cons**:
	+ Pros: Provides an accurate representation of the element's width, including any additional attributes.
	+ Cons: May be slower than `clientWidth` since it needs to access and calculate more information.

**Test Case 3: scrollWidth**

* **Description**: Retrieves the width of an element after scrolling to its bottom or top edge.
* **Library:** Not explicitly mentioned, but likely relying on browser APIs (e.g., `Element.scrollWidth`).
* **Pros and Cons**:
	+ Pros: Provides a more accurate representation of the element's full width.
	+ Cons: May be slower than `offsetWidth` due to additional calculations.

**Special Considerations**

The benchmark does not use any special JavaScript features or syntax that would require specific attention. However, it is worth noting that the use of `window.getComputedStyle` can introduce additional overhead compared to accessing an element's style directly.

**Other Alternatives**

Some alternative methods to compare with these three might include:

* `getBoundingClientRect().width`
* Using a CSS query (e.g., `document.getElementById('teste').cssWidth`)
* Measuring the element's width using a rendering engine API (e.g., `CanvasRenderingContext2D.measureText()`)

Keep in mind that these alternatives may not be as straightforward to implement and might introduce additional overhead or complexities.

**Benchmark Preparation Code Explanation**

The script preparation code snippet sets up a test environment by:

1. Defining a variable `_teste_n` with the value `'123px'`.
2. Accessing the computed style of an HTML element (`document.getElementById('teste')`) using `window.getComputedStyle`.

This setup allows the benchmark to test the performance of retrieving the width of an element in different contexts.

**Latest Benchmark Result Explanation**

The latest benchmark result provides a summary of the execution times for each test case:

* `offsetWidth`: 607.311 seconds
* `clientWidth`: 444.607 seconds
* `scrollWidth`: 600.328 seconds

These results indicate that, on this specific setup and device, `clientWidth` is the fastest method to retrieve an element's width, followed by `scrollWidth`, and then `offsetWidth`.

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
clientWidth	607311.1 Ops/sec
offsetWidth	4446076.5 Ops/sec
scrollWidth	600328.1 Ops/sec

Related benchmarks:

clientWidth vs offsetWidth vs scrollWidth (version: 0)

Comparing performance of: clientWidth vs offsetWidth vs scrollWidth

Created: one year ago by: Guest

Jump to the latest result

clientWidth

offsetWidth

scrollWidth

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