Run results for: elementFromPoint

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0

Browser: Firefox 132

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one month ago

Test name	Executions per second
elementFromPoint	346.5 Ops/sec
second	311933.5 Ops/sec

HTML Preparation code:

<style>
#container * {
  display: flex;
  flex: 1 1 50px;
  background: red;
}
#container .tick {
  flex-direction: row
  width: 20px;
  height: auto;
}
#container .tock {
  flex-direction: column
  width: auto;
  height: 20px;
}
</style>
<div id="container"></div>

Script Preparation code:

const container = document.getElementById("container");
const depth = 10;
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
const n = 1000; 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)));
second
console.log(".");

Run results for: elementFromPoint

elementFromPoint

second