Benchmark: elementFromPoint3

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 = 9;
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:

elementFromPoint 1K
const n = 1_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)));
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)));
elementFromPoint 100K
const n = 100_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)));
elementFromPoint 1M
const n = 1_000_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
elementFromPoint 1K
elementFromPoint 10K
elementFromPoint 100K
elementFromPoint 1M

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 29 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
elementFromPoint 1K	465.2 Ops/sec
elementFromPoint 10K	42.4 Ops/sec
elementFromPoint 100K	9.0 Ops/sec
elementFromPoint 1M	2.2 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its components.

**Benchmark Definition**

The benchmark is defined as a JavaScript function `addElement` that creates a series of DOM elements within a container element. The function takes two parameters: `parent` (the container element) and `isTick` (a boolean indicating whether to add a "tick" or "tock" class). The function appends the created element to the parent and returns it.

The benchmark also includes an array of 100,000 elements, where each element is assigned a unique index `i`. For each index `i`, the benchmark calls the `elementFromPoint` method on the `document` object, passing in two arguments: `i % nsq` (the x-coordinate) and `Math.floor(i / nsq)` (the y-coordinate), where `nsq` is the square root of the array length.

**Options Compared**

The benchmark compares different approaches to calling the `elementFromPoint` method:

1. **Direct Call**: The original implementation, which calls `elementFromPoint` directly on the `document` object.
2. **Array Map**: An alternative implementation that uses the `map()` function to apply a callback function to each element in the array, which in turn calls `elementFromPoint`.
3. **Loop**: A simple loop-based implementation that iterates over the array and calls `elementFromPoint` for each element.

**Pros and Cons**

* **Direct Call**: Pros: Simple and straightforward implementation. Cons: May not be optimized for performance.
* **Array Map**: Pros: Uses a built-in function to apply the callback, which may be faster. Cons: Requires creating an additional array of results.
* **Loop**: Pros: Low-overhead implementation that doesn't require any extra memory or data structures. Cons: Can be slower due to the overhead of repeated function calls.

**Library Used**

The `elementFromPoint` method is a standard DOM API function, which returns the element at the specified coordinates within an element or its parent elements.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax used in this benchmark. The code only uses standard ECMAScript syntax and built-in functions.

**Other Alternatives**

To optimize the `elementFromPoint` method, other approaches might include:

* Using a CSS grid or flexbox layout to improve performance
* Implementing a caching mechanism to reduce the number of DOM element creation and lookup operations
* Using Web Workers or parallel processing to take advantage of multi-core processors

Keep in mind that these optimizations would likely require significant changes to the benchmark code and may not be applicable to all scenarios.

Related benchmarks:

elementFromPoint3 (version: 0)

Comparing performance of: elementFromPoint 1K vs elementFromPoint 10K vs elementFromPoint 100K vs elementFromPoint 1M

Created: one year ago by: Guest

Jump to the latest result

elementFromPoint 1K

elementFromPoint 10K

elementFromPoint 100K

elementFromPoint 1M

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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