Benchmark: elementFromPoint1

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
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)));
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(".");
console.log(".");

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
second

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
elementFromPoint	488.3 Ops/sec
second	433549.9 Ops/sec

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

Let's dive into the world of JavaScript microbenchmarks!

Benchmark Definition

The provided JSON represents the benchmark definition for two test cases: elementFromPoint1 and second.

elementFromPoint1: This test case measures the performance of the document.elementFromPoint() method, which returns the element at the specified coordinates within an HTML document. The script preparation code creates a nested DOM structure with a container element and adds multiple child elements to it using the addElement function.
second: This test case simply logs a dot (.) to the console.

Options Compared

The benchmark compares two options for executing the tests:

Native Browser Execution: The native browser execution option uses the actual web browser's JavaScript engine (in this case, Safari 17 on Mac OS X 10.15.7).
V8.js: V8.js is a JavaScript engine written in C++ that can be used to execute JavaScript code in a sandboxed environment.

Pros and Cons

Native Browser Execution:
- Pros: More realistic results, as the test is executed within an actual web browser.
- Cons: May be affected by various factors like browser versions, operating systems, hardware configurations, and network conditions.
V8.js:
- Pros: Provides a more controlled environment with predictable results, making it easier to analyze and compare performance differences.
- Cons: May not accurately represent real-world web browser behavior.

Library Usage

In the elementFromPoint1 test case, the library used is:

DOM (Document Object Model): The DOM API provides a way to interact with an HTML document's structure and content. In this case, it's used to create and manipulate the nested DOM structure.

Special JS Features or Syntax

The elementFromPoint() method uses special JavaScript features:

document.elementFromPoint(): This method returns the element at the specified coordinates within an HTML document.
Math.floor(Math.sqrt(n)): This expression calculates the integer part of the square root of a number using the Math.sqrt() function and then rounding down to the nearest integer with Math.floor().

Other Alternatives

If you want to create your own JavaScript microbenchmarking framework, here are some alternatives:

Benchmark.js: A popular JavaScript benchmarking library that provides a simple way to write and run benchmarks.
BenchmarkRunner: A lightweight JavaScript benchmarking library that allows you to write and execute benchmarks in various environments.
Web Performance API: The Web Performance API provides methods for measuring the performance of web pages, including executing JavaScript code.

These alternatives offer different features, ease of use, and flexibility compared to MeasureThat.net. However, MeasureThat.net remains a valuable resource for testing and comparing JavaScript performance in a controlled environment.

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition**

The provided JSON represents the benchmark definition for two test cases: `elementFromPoint1` and `second`.

*   **`elementFromPoint1`**: This test case measures the performance of the `document.elementFromPoint()` method, which returns the element at the specified coordinates within an HTML document. The script preparation code creates a nested DOM structure with a container element and adds multiple child elements to it using the `addElement` function.
*   **`second`**: This test case simply logs a dot (`.`) to the console.

**Options Compared**

The benchmark compares two options for executing the tests:

1.  **Native Browser Execution**: The native browser execution option uses the actual web browser's JavaScript engine (in this case, Safari 17 on Mac OS X 10.15.7).
2.  **V8.js**: V8.js is a JavaScript engine written in C++ that can be used to execute JavaScript code in a sandboxed environment.

**Pros and Cons**

*   **Native Browser Execution**:
    *   Pros: More realistic results, as the test is executed within an actual web browser.
    *   Cons: May be affected by various factors like browser versions, operating systems, hardware configurations, and network conditions.
*   **V8.js**:
    *   Pros: Provides a more controlled environment with predictable results, making it easier to analyze and compare performance differences.
    *   Cons: May not accurately represent real-world web browser behavior.

**Library Usage**

In the `elementFromPoint1` test case, the library used is:

*   **DOM (Document Object Model)**: The DOM API provides a way to interact with an HTML document's structure and content. In this case, it's used to create and manipulate the nested DOM structure.

**Special JS Features or Syntax**

The `elementFromPoint()` method uses special JavaScript features:

*   **`document.elementFromPoint()`**: This method returns the element at the specified coordinates within an HTML document.
*   **`Math.floor(Math.sqrt(n))`**: This expression calculates the integer part of the square root of a number using the `Math.sqrt()` function and then rounding down to the nearest integer with `Math.floor()`.

**Other Alternatives**

If you want to create your own JavaScript microbenchmarking framework, here are some alternatives:

1.  **Benchmark.js**: A popular JavaScript benchmarking library that provides a simple way to write and run benchmarks.
2.  **BenchmarkRunner**: A lightweight JavaScript benchmarking library that allows you to write and execute benchmarks in various environments.
3.  **Web Performance API**: The Web Performance API provides methods for measuring the performance of web pages, including executing JavaScript code.

Related benchmarks:

elementFromPoint1 (version: 0)

Comparing performance of: elementFromPoint vs second

Created: one year ago by: Guest

Jump to the latest result

elementFromPoint

second

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