Benchmark: getBoundingClientRect

HTML Preparation code:

<style>
    #container {
      width: 1000px;
      height: 1000px;
    }
    #container * {
      display: flex;
      flex: 1 1;
      background: red;
      border: 1px solid black;
      min-width: 0;
      min-height: 0;
      width: 100%;
      height: 100%;
    }
    #container .tick {
      flex-direction: row;
    }
    #container .tock {
      flex-direction: column;
    }
</style>
<div id="container"></div>

Script Preparation code:

const container = document.getElementById("container");
const depth = 12;
const childrenPerLevel = 3;

/**
 * @param {HTMLElement} parent
 * @param {boolean} isTick
 */
const addElement = (parent, isTick) => {
  const el = document.createElement("div");
  el.classList.add(isTick ? "tick" : "tock");
  parent.appendChild(el);
  return el;
};

let currLevel = [container];
let nextLevel = [];
for (let i = 0; i < depth; i++) {
  for (const parent of currLevel) {
    for (let j = 0; j < childrenPerLevel; j++) {
      nextLevel.push(addElement(parent, i % 2 === 0));
    }
  }
  currLevel = nextLevel;
  nextLevel = [];
}

Tests:

getBoundingClientRect 10K
const n = 10_000; const nsq = Math.floor(Math.sqrt(n)); const arr = Array(n).fill(0).map((v,i)=>i); arr.map((v,i)=>document.elementFromPoint(i%nsq, Math.floor(i/nsq))?.getBoundingClientRect);
elementFromPoint 10K
const n = 10_000; const nsq = Math.floor(Math.sqrt(n)); const arr = Array(n).fill(0).map((v,i)=>i); arr.map((v,i)=>document.elementFromPoint(i%nsq, Math.floor(i/nsq)));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getBoundingClientRect 10K
elementFromPoint 10K

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 26_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Brave/1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 26 on iOS 26.3.1

View result in a separate tab

getBoundingClientRect 10K

75/s

elementFromPoint 10K

74/s

View exact numbers

Test name	Executions per second
✓ getBoundingClientRect 10K	75 Ops/sec
elementFromPoint 10K	74 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 Benchmark Definition and Individual test cases to understand what is being tested.

**Benchmark Definition:**

The script prepares an HTML container with a specific structure, adding elements (div tags) to it in a nested manner. The `addElement` function creates new elements and appends them to the parent element. The script then uses the `getBoundingClientRect` method on these elements, which returns the bounding rectangle of an element.

**Options being compared:**

The script is comparing two approaches:

1. `document.elementFromPoint(x, y)`: This method returns the element at the specified coordinates (x, y). In this case, it's used to get the element from a point within the container.
2. `getBoundingClientRect()`: This method returns the bounding rectangle of an element.

**Pros and Cons:**

* Using `document.elementFromPoint(x, y)`:
	+ Pros:
		- Can be faster for elements that are not part of the layout tree.
		- May be more efficient for elements with complex layouts.
	+ Cons:
		- Requires precise coordinates, which can lead to errors if the element is not found.
		- May not work correctly for elements with non-standard sizes or shapes.
* Using `getBoundingClientRect()`: 
	+ Pros:
		- Works for all elements in the layout tree.
		- Returns a more comprehensive set of information about the element's position and size.
	+ Cons:
		- Can be slower than `document.elementFromPoint(x, y)` since it requires the element to be part of the layout tree.

**Library usage:**

None. This script does not use any external libraries.

**Special JS feature or syntax:**

* The use of non-standard syntax for creating arrays (e.g., `10_000` instead of `10000`) is a feature introduced in ECMAScript 2015 (ES6) to represent large numbers.
* The use of template literals (`const arr = Array(n).fill(0).map((v,i)=>i);`) is a syntax feature introduced in ECMAScript 2015 (ES6).

**Other alternatives:**

If you want to compare the performance of `getBoundingClientRect` with other methods for getting an element's position or size, here are some alternatives:

* `getOffsetTop()`, `getOffsetLeft()`: These methods return the offset top and left coordinates of an element from its parent element.
* `clientWidth` and `clientHeight`: These properties return the client width and height of an element (i.e., the size of the visible area).
* `scrollIntoView()`: This method scrolls an element into view, which can be faster than getting its position or size.

These alternatives may not provide the same level of accuracy as `getBoundingClientRect`, but they can still give you insight into how different methods compare in terms of performance.

getBoundingClientRect (version: 0)

Comparing performance of: `getBoundingClientRect 10K vs elementFromPoint 10K`

Created: 2 years ago by: Guest

Go to the latest result

getBoundingClientRect 10K

elementFromPoint 10K

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

getBoundingClientRect (version: 0)

Comparing performance of: getBoundingClientRect 10K vs elementFromPoint 10K

Created: 2 years ago by: Guest

Go to the latest result

getBoundingClientRect 10K

elementFromPoint 10K

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 10K vs elementFromPoint 10K`