MeasureThat.net

Run results for: elementFromPoint4

Go to the benchmark
Run details:
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
Chrome 134
Mac OS X 10.15.7
Desktop
23 days ago
Test name Executions per second
elementFromPoint 1K 542.2 Ops/sec
elementFromPoint 10K 45.5 Ops/sec
elementFromPoint 100K 9.0 Ops/sec
elementFromPoint 1M 2.3 Ops/sec
HTML Preparation code:
AخA
 
1
<style>
2
    #container {
3
      width: 1000px;
4
      height: 1000px;
5
    }
6
    #container * {
7
      display: flex;
8
      flex: 1 1;
9
      background: red;
10
      border: 1px solid black;
11
      min-width: 0;
12
      min-height: 0;
13
      width: 100%;
14
      height: 100%;
15
    }
16
    #container .tick {
17
      flex-direction: row;
18
    }
19
    #container .tock {
20
      flex-direction: column;
21
    }
22
</style>
23
<div id="container"></div>
Script Preparation code:
​x
 
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:

  • 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)));