Benchmark: Reducer Test #001 01.10.2024

HTML Preparation code:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <a></a>
</ul>

Tests:

forEach Push
const forEachTest = (nthElements, excludeBeforeElements, excludeAfterElements) => { const daiContainers = []; nthElements.forEach((nthElement) => { // Check if we should exclude this element due to the element before / after const nextElement = nthElement.nextElementSibling; // If this nthElement is one we shouldn't come AFTER // or the NEXT element is the one we shouldn't come BEFORE // then return (being explicit here for clarity) if ( excludeAfterElements.includes(nthElement) || excludeBeforeElements.includes(nextElement) ) { return; } const daiContainerElement = document.createElement('div'); daiContainerElement.setAttribute('class', 'test-class'); nthElement.after(daiContainerElement); daiContainers.push(daiContainerElement); }); return daiContainers; } const nthElements = Array.from(document.querySelectorAll('ul li')); const excludeBeforeElements = Array.from(document.querySelectorAll('ul a')); const excludeAfterElements = []; const containers = forEachTest(nthElements, excludeBeforeElements, excludeAfterElements);
reduce
const reduceTest = (nthElements, excludeBeforeElements, excludeAfterElements) => { return nthElements.reduce((daiContainers, nthElement) => { const nextElement = nthElement?.nextElementSibling; // Skip insertion if nthElement or its next sibling is excluded if (excludeAfterElements.includes(nthElement) || excludeBeforeElements.includes(nextElement)) { return daiContainers; } // Create and insert ad container const daiContainerElement = document.createElement('div'); daiContainerElement.setAttribute('class', 'test-class'); nthElement.after(daiContainerElement); daiContainers.push(daiContainerElement); return daiContainers; }, []); } const nthElements = Array.from(document.querySelectorAll('ul li')); const excludeBeforeElements = Array.from(document.querySelectorAll('ul a')); const excludeAfterElements = []; const containers = reduceTest(nthElements, excludeBeforeElements, excludeAfterElements);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
forEach Push
reduce

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
forEach Push	1252.5 Ops/sec
reduce	442.9 Ops/sec

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.

The provided benchmark definition and test cases are designed to measure the performance difference between two approaches: `forEach` and `reduce`. Both methods are used to iterate over an array of HTML elements, in this case, `ul li` elements, and push a container element after each eligible sibling.

**Approaches Compared**

1. **`forEach` Approach**: This method uses the `Array.prototype.forEach()` method to iterate over the array of elements. It checks if each element should be skipped due to being excluded before or after another element using the provided arrays (`excludeBeforeElements` and `excludeAfterElements`). If an element is not excluded, it creates a container element, inserts it after the current element, and adds it to the result array.
2. **`reduce` Approach**: This method uses the `Array.prototype.reduce()` method to iterate over the array of elements. It reduces the array to a single value (in this case, an array of containers) by applying a callback function to each element. The callback function checks if the current element should be skipped due to being excluded before or after another element and only inserts a container element if it's not excluded.

**Pros and Cons**

1. **`forEach` Approach**:
	* Pros: More readable code, explicit iteration control.
	* Cons: May incur additional overhead for array iteration, potentially slower than `reduce`.
2. **`reduce` Approach**:
	* Pros: Concise code, potential performance benefits due to reduced iteration overhead.
	* Cons: Less readable code, more complex logic.

**Library Used**

None is explicitly mentioned in the provided benchmark definition and test cases.

**Special JS Feature/Syntax**

The `forEach`, `Array.prototype.forEach()`, `reduce`, and `Array.prototype.reduce()` methods are all part of the ECMAScript standard. The `?` operator in the `reduceTest` function is a optional chaining operator (introduced in ECMAScript 2020) that allows safe navigation through properties.

**Other Alternatives**

Other alternatives for iterating over arrays or elements could be:

1. **`for...of` Loop**: A more modern and concise way to iterate over arrays.
2. **`Array.prototype.forEach()` with a custom callback function**: Similar to the `forEach` approach, but without the need for an explicit array iteration.
3. **`Array.prototype.map()` and `Array.prototype.filter()`**: Can be used in combination to achieve similar results.

Keep in mind that the choice of iteration method depends on the specific use case and performance requirements.

The provided benchmark definition and test cases are designed to measure the performance difference between these two approaches, making it easier for developers to decide which one to use depending on their needs.

Related benchmarks:

Reducer Test #001 01.10.2024 (version: 0)

Comparing performance of: forEach Push vs reduce

Created: one year ago by: Guest

Jump to the latest result

forEach Push

reduce

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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