Benchmark: Dom element measure #1

HTML Preparation code:


<div>
  <div id='test'>Hello</div>
</div>

Script Preparation code:


var el = document.getElementById('test');

Tests:

offsetHeight
const h = el.offsetHeight; const t = el.offsetTop;
getClientBoundingRect
const r = el.getBoundingClientRect(); const h = r.height; const t = r.top;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
offsetHeight
getClientBoundingRect

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

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

Browser/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
offsetHeight	1105398.4 Ops/sec
getClientBoundingRect	2211329.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition:**
The benchmark definition is a set of instructions that defines how to measure certain aspects of JavaScript execution performance. In this case, there are two benchmarks:

1. `offsetHeight`: Measures the time it takes to access the `offsetHeight` property of an element.
2. `getClientBoundingRect`: Measures the time it takes to calculate the client bounding rectangle (i.e., the area of the visible content) of an element.

**Script Preparation Code:**
The script preparation code sets up a variable `el` that references an HTML element with the ID "test".

```javascript
var el = document.getElementById('test');
```

**Html Preparation Code:**
The html preparation code generates the HTML structure for the benchmark, including an element with the ID "test" containing the text "Hello".

```html
<div>
  <div id='test'>Hello</div>
</div>
```

Now, let's examine each test case:

### offsetHeight

**Test Name:** `offsetHeight`

The test definition is:
```javascript
const h = el.offsetHeight;
const t = el.offsetTop;
```
This code accesses the `offsetHeight` and `offsetTop` properties of the element referenced by `el`.

**Pros:**

* Simple and straightforward access to element properties.
* Easy to understand and implement.

**Cons:**

* May not accurately reflect performance characteristics, as these are simple property accesses that may be optimized away by the engine.
* Does not test any complex operations or algorithms.

### getClientBoundingRect

**Test Name:** `getClientBoundingRect`

The test definition is:
```javascript
const r = el.getBoundingClientRect();
const h = r.height;
const t = r.top;
```
This code uses the `getBoundingClientRect()` method to calculate the client bounding rectangle of the element referenced by `el`, and then extracts the height and top properties from the resulting object.

**Pros:**

* Tests a more complex operation (calculating the bounding rectangle).
* May provide more accurate performance characteristics, as it involves more processing steps.

**Cons:**

* Requires the use of a specific method (`getBoundingClientRect()`), which may not be supported by all browsers or engines.
* The extracted height and top properties may have some impact on performance, depending on the context in which they are used.

Now, let's look at the latest benchmark results:

The results show that Chrome 129 running on a Mac OS X 10.15.7 desktop performs better for the `getClientBoundingRect` test (2211329 executions per second) compared to the `offsetHeight` test (1105398 executions per second).

**Library/Additional Context:**

In neither of these tests, is there any library or additional context being used that would affect the performance characteristics. However, it's worth noting that the use of `getBoundingClientRect()` may involve some overhead due to the need to calculate and return a bounding rectangle.

If test users want to explore other alternatives, here are a few options:

1. **Measure element position**: Instead of measuring offsetHeight or getClientBoundingRect, you could measure the time it takes to access an element's position (e.g., `el.offsetLeft` and `el.offsetTop`).
2. **Compare parsing performance**: You could add tests that compare the performance of different parsers for a given JavaScript expression or statement.
3. **Test event handling**: You could add tests that compare the performance of different event handling methods, such as attaching and detaching event listeners, or processing events.

These alternatives would require additional test cases, script preparation code, and html preparation code to implement.

Related benchmarks:

Dom element measure #1 (version: 1)

Comparing performance of: offsetHeight vs getClientBoundingRect

Created: 3 years ago by: Registered User

Jump to the latest result

offsetHeight

getClientBoundingRect

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