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>

AخA
 
<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 = [];
}

​x
 
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)));
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)));
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)));
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)));
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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: 25 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):

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:

Direct Call: The original implementation, which calls elementFromPoint directly on the document object.
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.
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.

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