Benchmark: getBoundingClientRect vs style

HTML Preparation code:

<div id='box' style="width: 331px;">test box</div>

Script Preparation code:

let width = 311;

setInterval(() => {
    const box = document.getElementById('box');
    width += 10;
    box.style.width = width;
}, 100);

Tests:

getBoundingClientRect fn 100
const t0 = performance.now(); for (let i = 0; i < 100; i++){ const width = document.getElementById('box').getBoundingClientRect().width; console.log(width); } const t1 = performance.now(); console.log(`${t1 - t0} ms`);
get inline style 100
const t0 = performance.now(); for (let i = 0; i < 100; i++){ const width = Number(document.getElementById('box').style.width.replace('px', '')); console.log(width); } const t1 = performance.now(); console.log(`${t1 - t0} ms`);
getBoundingClientRect fn 10000
const t0 = performance.now(); for (let i = 0; i < 10000; i++){ const width = document.getElementById('box').getBoundingClientRect().width; console.log(width); } const t1 = performance.now(); console.log(`${t1 - t0} ms`);
get inline style 10000
const t0 = performance.now(); for (let i = 0; i < 10000; i++){ const width = Number(document.getElementById('box').style.width.replace('px', '')); console.log(width); } const t1 = performance.now(); console.log(`${t1 - t0} ms`);
getBoundingClientRect fn 1000000
const t0 = performance.now(); for (let i = 0; i < 1000000; i++){ const width = document.getElementById('box').getBoundingClientRect().width; console.log(width); } const t1 = performance.now(); console.log(`${t1 - t0} ms`);
get inline style 1000000
const t0 = performance.now(); for (let i = 0; i < 1000000; i++){ const width = Number(document.getElementById('box').style.width.replace('px', '')); console.log(width); } const t1 = performance.now(); console.log(`${t1 - t0} ms`);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getBoundingClientRect fn 100
get inline style 100
getBoundingClientRect fn 10000
get inline style 10000
getBoundingClientRect fn 1000000
get inline style 1000000

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

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getBoundingClientRect fn 100	2721.6 Ops/sec
get inline style 100	3414.3 Ops/sec
getBoundingClientRect fn 10000	28.4 Ops/sec
get inline style 10000	34.4 Ops/sec
getBoundingClientRect fn 1000000	0.3 Ops/sec
get inline style 1000000	0.3 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark test and its variations to help you understand what's being tested.

**Benchmark Test:**

The benchmark tests two ways to get the width of an HTML element:

1. `getBoundingClientRect()`: This method returns the width of the element relative to the viewport (i.e., the visible area of the screen).
2. `Number(document.getElementById('box').style.width.replace('px', ''))`: This method extracts the style attribute's width value from the element's CSS and converts it to a number.

**Options Compared:**

The benchmark tests the following variations:

* `getBoundingClientRect()` with 100, 10000, or 1000000 iterations.
* Extracting the inline style width using `Number(document.getElementById('box').style.width.replace('px', ''))` with 100, 10000, or 1000000 iterations.

**Pros and Cons:**

Here's a brief summary of each approach:

1. **getBoundingClientRect()**:
	* Pros:
		+ More accurate for elements with dynamic widths (e.g., growing content).
		+ Less prone to precision issues caused by pixel-perfect calculations.
	* Cons:
		+ May be slower due to the need to calculate the element's position relative to the viewport.
2. **Extracting inline style width**:
	* Pros:
		+ Faster, as it only involves parsing a string value.
	* Cons:
		+ Less accurate for elements with dynamic widths or when the width is not specified in pixels.
		+ May be affected by precision issues if the CSS width value is not an integer.

**Library:**

The benchmark uses the `document` object, which is part of the DOM (Document Object Model) API. The `document.getElementById('box')` method retrieves an HTML element with the ID "box", and the `getBoundingClientRect()` method returns its size relative to the viewport.

**Special JS Feature/Syntax:**

This benchmark does not use any special JavaScript features or syntax. It only relies on standard DOM and CSS APIs.

Now that we've covered the basics, let's discuss what these results might tell us about performance differences between these two approaches:

The results show a clear trend of decreasing performance as the number of iterations increases. The `getBoundingClientRect()` method performs significantly better than extracting the inline style width, especially for larger numbers of iterations. This suggests that using `getBoundingClientRect()` is generally faster and more efficient for this specific use case.

Keep in mind that these results are specific to the Chrome browser on a Mac with a 10.15.7 operating system. The performance differences may vary depending on other factors, such as JavaScript engine optimizations, hardware capabilities, or specific browser versions.

Related benchmarks:

getBoundingClientRect vs style (version: 0)

Comparing performance of: getBoundingClientRect fn 100 vs get inline style 100 vs getBoundingClientRect fn 10000 vs get inline style 10000 vs getBoundingClientRect fn 1000000 vs get inline style 1000000

Created: one year ago by: Guest

Jump to the latest result

getBoundingClientRect fn 100

get inline style 100

getBoundingClientRect fn 10000

get inline style 10000

getBoundingClientRect fn 1000000

get inline style 1000000

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