Benchmark: GBCR Sequential Intense

Script Preparation code:

function createEl() {
  const el = document.createElement('div');
  el.style.width = 100;
  el.style.height = 100;
  el.style.position = 'relative';
  el.style.x = 10;
  el.style.y = 10;
  return el;
}

const els = [... new Array(100)].map(() => createEl());
window.els = els;
els.forEach(el => document.body.appendChild(el));

Tests:

control
console.log('const');
gbcr one
console.log('const'); window.els[0].getBoundingClientRect();
gbcr all
console.log('const'); window.els.forEach(el => el.getBoundingClientRect());

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
control
gbcr one
gbcr all

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The provided JSON represents a benchmark test case for measuring the performance of `getBoundingClientRect` in a sequential manner. The script preparation code creates an array of 100 HTML elements and appends them to the body of the document, while maintaining their relative positions.

Here's what's being tested:

* A single call to `window.els[0].getBoundingClientRect()`
* A loop that iterates over all 100 elements and calls `el.getBoundingClientRect()` on each one
* The baseline (no `getBoundingClientRect` calls)

**Options Compared**

The benchmark compares three options:

1. **Single Call**: Calls `window.els[0].getBoundingClientRect()` once.
	* Pros: Simple, straightforward, and easy to understand.
	* Cons: May not accurately represent real-world scenarios where `getBoundingClientRect` is called multiple times.
2. **Sequential Calls**: Loops over all 100 elements and calls `el.getBoundingClientRect()` on each one sequentially.
	* Pros: More representative of real-world usage, as `getBoundingClientRect` is often used in loops or iterations.
	* Cons: Can be slower due to the overhead of repeated function calls and DOM manipulation.
3. **Baseline (No Calls)**: Does not call `window.els[0].getBoundingClientRect()` at all.
	* Pros: A good starting point for benchmarking, as it allows for a clean slate and accurate measurement of the baseline performance.
	* Cons: May not provide meaningful results if the test is expected to measure performance improvements.

**Library**

The `createElement` function used in the script preparation code creates an HTML element using the `document.createElement` method. This library is part of the standard JavaScript API, providing a way to create new elements programmatically.

**Special JS Feature or Syntax**

There are no special JS features or syntaxes being tested in this benchmark. The focus is on measuring the performance of `getBoundingClientRect` in different scenarios.

**Alternatives**

Other alternatives for measuring the performance of JavaScript functions or loops could include:

* Using a profiling tool like Chrome DevTools or Node.js Inspector
* Creating a custom benchmarking framework using libraries like Benchmark.js or Microbenchmark
* Utilizing a testing framework like Jest or Mocha with built-in performance measurement tools

Keep in mind that each alternative has its own strengths and weaknesses, and the choice of which one to use depends on the specific requirements and constraints of the project.

Related benchmarks:

GBCR Sequential Intense (version: 0)

Test the performance of getBoundingClientRect sequential calls.

Comparing performance of: control vs gbcr one vs gbcr all

Created: 7 years ago by: Guest

Jump to the latest result

control

gbcr one

gbcr all

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):