Benchmark: offsetwidth/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().width;

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	5084659.5 Ops/sec
getBoundingClientRect	586340.8 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 MeasureThat.net and explore what's being tested in this benchmark.

**What is being tested?**

The provided JSON represents two individual test cases, each testing a specific JavaScript property:

1. `offsetwidth` (also known as `offsetWidth`)
2. `getBoundingClientRect`

These properties relate to the dimensions of HTML elements on a web page.

**Options compared:**

In this benchmark, we have only two options being compared:

a. Using `document.getElementById('test').offsetWidth`
b. Using `document.getElementById('test').getBoundingClientRect().width`

Let's examine both approaches:

**Approach 1: `offsetWidth`**

* **Pros:**
	+ Faster execution time (due to fewer DOM interactions)
	+ Less overhead for getting the element's width
* **Cons:**
	+ Might not be supported by older browsers or versions of Internet Explorer
	+ Requires an element with a style attribute set

**Approach 2: `getBoundingClientRect().width`**

* **Pros:**
	+ More widely supported across modern browsers and devices
	+ Allows for more flexibility in getting the element's width (e.g., including padding and border)
* **Cons:**
	+ Slower execution time due to additional DOM interactions
	+ More overhead for getting the element's width

**Library usage**

In this benchmark, no libraries are explicitly mentioned or used.

**Special JS feature/syntax**

There is no special JavaScript feature or syntax being tested in this benchmark. Both approaches rely on standard JavaScript methods for accessing HTML elements' properties.

**Other alternatives**

While not directly related to the specific test cases, other alternatives for measuring element dimensions might include:

* Using CSS properties (e.g., `width` or `margin`) directly
* Utilizing web APIs like `window.getComputedStyle()` (similar to Approach 1)
* Leveraging libraries like jQuery or a similar DOM manipulation framework

In conclusion, MeasureThat.net is testing the performance difference between two common approaches for accessing an HTML element's width: using `offsetWidth` and `getBoundingClientRect().width`. The benchmark highlights the trade-offs between speed, support, and overhead associated with each method.

Related benchmarks:

offsetwidth/getBoundingClientRect (version: 0)

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