<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>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 = [];}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);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)));--enable-precise-memory-info flag.
| Test case name | Result |
|---|---|
| getBoundingClientRect 10K | |
| elementFromPoint 10K |
| Test name | Executions per second |
|---|---|
| getBoundingClientRect 10K | 10.8 Ops/sec |
| elementFromPoint 10K | 10.6 Ops/sec |
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:
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.getBoundingClientRect(): This method returns the bounding rectangle of an element.Pros and Cons:
document.elementFromPoint(x, y):getBoundingClientRect(): 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:
10_000 instead of 10000) is a feature introduced in ECMAScript 2015 (ES6) to represent large numbers.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.
