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;

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Browser/OS: Chrome 140 on Windows

View result in a separate tab

Test name	Executions per second
getBoundingClientRect	1262937.9 Ops/sec
window.getComputedStyle + new WebKitCSSMatrix	443051.7 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.

Related benchmarks:

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

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

Created: 4 years ago by: Guest

Jump to the latest result

getBoundingClientRect

window.getComputedStyle + new WebKitCSSMatrix

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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