Benchmark: clientWidth vs offsetWidth vs window.getComputedStyle vs getBoundingClientRect

HTML Preparation code:

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

Script Preparation code:

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

Tests:

clientWidth
document.getElementById('teste').clientWidth;
offsetwidth
document.getElementById('teste').offsetwidth;
window.getComputedStyle
parseFloat(_style['width'])
BoundingClientRect
el.getBoundingClientRect()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clientWidth
offsetwidth
window.getComputedStyle
BoundingClientRect

Fastest: N/A

Slowest: N/A

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/108.0.0.0 Safari/537.36

Browser/OS: Chrome 108 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
clientWidth	1829593.9 Ops/sec
offsetwidth	9064632.0 Ops/sec
window.getComputedStyle	1170574.9 Ops/sec
BoundingClientRect	1549144.4 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark tests different ways to get the width of an HTML element:

**Options Compared:**

* **`clientWidth`:**  Returns the *visible* width of an element, including padding but excluding borders. 
* **`offsetWidth`:** Returns the *total* width of an element, including padding and borders. This is often used when you need the absolute width of an element on the page. 
* **`window.getComputedStyle(...)['width']`:** Uses CSS computed styles to retrieve the width.  This value reflects any styling applied through CSS, potentially including inherited properties.

* **`getBoundingClientRect()`:** Returns a rectangle object containing information about the position and dimensions of an element relative to the viewport (the browser window). You can access the `width` property of this object.

**Pros & Cons:**

* **`clientWidth`:**
    * **Pro:** Simple and direct, often sufficient if you only need the visible width. 
    * **Con:** Doesn't include borders in its calculation.
* **`offsetWidth`:**
    * **Pro:** Includes both padding and borders, giving the total width of the element on the page.
    * **Con:** Can be less accurate if CSS has complex styling that might affect the final width.

* **`window.getComputedStyle(...)['width']`:**
    * **Pro:** Most accurate for getting the width as defined by CSS, even accounting for inherited styles and potentially dynamic changes.
    * **Con:** Requires a bit more code to retrieve the value.

* **`getBoundingClientRect()`:**
    * **Pro:** Provides a wealth of information about element positioning and size, not just width. Useful for complex layouts or animations. 
    * **Con:**  More complex than other options, might be overkill if you only need the width.

**Other Considerations:**

* The `getBoundingClientRect()` method gives you information relative to the viewport (the browser window). If your element's position is affected by scrolling, this method will reflect those changes accurately. 
* For simple cases where you only need the visible width of an element, `clientWidth` might be the most straightforward choice.

**Alternatives:**

If performance is a major concern,  you could explore using a low-level DOM manipulation library (like Zepto.js) that optimizes these operations.

Related benchmarks:

clientWidth vs offsetWidth vs window.getComputedStyle vs getBoundingClientRect (version: 0)

Comparing performance of: clientWidth vs offsetwidth vs window.getComputedStyle vs BoundingClientRect

Created: one year ago by: Guest

Jump to the latest result

clientWidth

offsetwidth

window.getComputedStyle

BoundingClientRect

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):