Benchmark: getBoundingClientRect vs window.getComputedStyle + new WebKitCSSMatrix

HTML Preparation code:

<div id="test"></div>

Tests:

getBoundingClientRect
let element = document.getElementById('test'); let rect = element.getBoundingClientRect(); let left = rect.left;
window.getComputedStyle + new WebKitCSSMatrix
let element = document.getElementById('test'); let style = window.getComputedStyle(element); let matrix = new WebKitCSSMatrix(style.transform); let left = matrix.m41;

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 11 runs

getBoundingClientRect

1.1M/s

window.getComputedStyle + new WebKitCSSMatrix

577K/s

Fastest: getBoundingClientRect (1.9x faster)

View exact numbers

✓ getBoundingClientRect : 1,092,122 ops/sec
• window.getComputedStyle + new WebKitCSSMatrix: 577,204 ops/sec

Firefox 5 runs

getBoundingClientRect

1.7M/s

window.getComputedStyle + new WebKitCSSMatrix

572K/s

Fastest: getBoundingClientRect (3.0x faster)

View exact numbers

✓ getBoundingClientRect : 1,732,822 ops/sec
• window.getComputedStyle + new WebKitCSSMatrix: 572,462 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getBoundingClientRect
window.getComputedStyle + new WebKitCSSMatrix

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:151.0) Gecko/20100101 Firefox/151.0

Browser/OS: Firefox 151 on Windows

View result in a separate tab

getBoundingClientRect

1.7M/s

window.getComputedStyle + new WebKitCSSMatrix

572K/s

View exact numbers

Test name	Executions per second
✓ getBoundingClientRect	1,732,822 Ops/sec
window.getComputedStyle + new WebKitCSSMatrix	572,462 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

**Benchmark Overview**

The provided benchmark compares two approaches to retrieve the left coordinate of an HTML element: `getBoundingClientRect` and using `window.getComputedStyle + new WebKitCSSMatrix`. The goal is to determine which approach is faster.

**Options Compared**

Two options are being compared:

1. **getBoundingClientRect**: This method returns a rectangle that represents the element's position, size, and border width relative to the document's client coordinates.
2. **window.getComputedStyle + new WebKitCSSMatrix**: This approach uses `getComputedStyle` to retrieve the element's computed style and then creates a `WebKitCSSMatrix` object to extract the transform value.

**Pros and Cons**

**getBoundingClientRect:**

Pros:

* Simpler and more straightforward
* Provides additional information (e.g., border width, padding)
* Generally faster due to reduced overhead

Cons:

* May not provide exact values for certain properties (e.g., top or left coordinates without padding or margin)
* Can be affected by DOM manipulation or layout changes

**window.getComputedStyle + new WebKitCSSMatrix:**

Pros:

* Provides precise values for most properties
* Can handle cases where `getBoundingClientRect` fails to provide accurate results

Cons:

* More complex and computationally expensive due to the need to parse the CSS transform value
* May be slower than `getBoundingClientRect`

**Library Usage**

In this benchmark, two libraries are used:

1. **WebKit**: Used in conjunction with `window.getComputedStyle + new WebKitCSSMatrix`. The WebKit library provides a way to extract transform values from CSS matrices.

2. There is no explicit mention of any specific JavaScript library or framework being used for the benchmark itself.

**Special JS Features or Syntax**

No special JavaScript features or syntax are mentioned in this benchmark.

**Other Alternatives**

Some alternative approaches that could be considered:

* Using `getComputedStyle` alone without creating a `WebKitCSSMatrix`, which might provide similar results but is less accurate.
* Implementing a custom method to extract transform values, potentially using the WebKit library's APIs or third-party libraries.

However, these alternatives are not part of this specific benchmark.

**Benchmark Preparation Code**

The provided HTML preparation code includes a simple `<div>` element with an ID of "test". This is sufficient for running the benchmarks. The JavaScript preparation code is empty, which suggests that no additional setup or initialization is required before running the tests.

getBoundingClientRect vs window.getComputedStyle + new WebKitCSSMatrix (version: 0) Benchmark.js

Comparing performance of: `getBoundingClientRect vs window.getComputedStyle + new WebKitCSSMatrix`

Created: 4 years ago by: Guest

Go to the latest result

getBoundingClientRect

window.getComputedStyle + new WebKitCSSMatrix

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 11 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

getBoundingClientRect vs window.getComputedStyle + new WebKitCSSMatrix (version: 0) Benchmark.js

Comparing performance of: getBoundingClientRect vs window.getComputedStyle + new WebKitCSSMatrix

Created: 4 years ago by: Guest

Go to the latest result

getBoundingClientRect

window.getComputedStyle + new WebKitCSSMatrix

Historical Performance Data aggregated from 16 community runs

Desktop Results:

Chrome 11 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `getBoundingClientRect vs window.getComputedStyle + new WebKitCSSMatrix`