Benchmark: z-indexes collection and coercion

HTML Preparation code:

<div class="container"></div>

AخA
 
<div class="container"></div>

Script Preparation code:

const container = document.querySelector('.container');

const cloneTarget = document.createElement('div');
const listToInsert = document.createElement('div');
listToInsert.id = 'clone-list';

for (let i = 0; i < 100; i++) {
    const clone = cloneTarget.cloneNode(true);
    clone.id = "clone_" + i;
    clone.textContent = 'I am clone ' + i;

    listToInsert.append(clone);
}

container.append(listToInsert);


var elements = document.querySelectorAll('#clone-list *');

​x
 
const container = document.querySelector('.container');​const cloneTarget = document.createElement('div');const listToInsert = document.createElement('div');listToInsert.id = 'clone-list';​for (let i = 0; i < 100; i++) {    const clone = cloneTarget.cloneNode(true);    clone.id = "clone_" + i;    clone.textContent = 'I am clone ' + i;​    listToInsert.append(clone);}​container.append(listToInsert);​​var elements = document.querySelectorAll('#clone-list *');

Tests:

Number + isNaN

for (let el of elements) {
    const zIndex = Number(el.style.zIndex);

    if (!isNaN(zIndex)) {
        console.log(true);
    }
}

 
for (let el of elements) {    const zIndex = Number(el.style.zIndex);​    if (!isNaN(zIndex)) {        console.log(true);    }}

Number.parseInt + Number.isInteger
for (let el of elements) { const zIndex = Number.parseInt(el.style.zIndex, 10); if (Number.isInteger(zIndex)) { console.log(true); } }
for (let el of elements) {
const zIndex = Number.parseInt(el.style.zIndex, 10);

if (Number.isInteger(zIndex)) {
console.log(true);
}
}
Number.parseInt + simple condition
for (let el of elements) { const zIndex = Number.parseInt(el.style.zIndex, 10); if (zIndex || zIndex === 0) { console.log(true); } }
for (let el of elements) {
const zIndex = Number.parseInt(el.style.zIndex, 10);

if (zIndex || zIndex === 0) {
console.log(true);
}
}

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
Number + isNaN
Number.parseInt + Number.isInteger
Number.parseInt + simple condition

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Number + isNaN	3990.1 Ops/sec
Number.parseInt + Number.isInteger	41885.5 Ops/sec
Number.parseInt + simple condition	53402.2 Ops/sec

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

Let's dive into the benchmark and explain what's being tested.

Benchmark Overview

The benchmark is designed to test the performance of different approaches for parsing and checking the value of zIndex style property in HTML elements using JavaScript.

Test Cases

There are three individual test cases:

Number + isNaN
- This test case checks if the zIndex value can be successfully parsed as a number using the built-in Number() function and then checked for NaN (Not a Number) using the isNaN() function.
Number.parseInt + Number.isInteger
- This test case uses the Number.parseInt() function to parse the zIndex value with a radix of 10, and then checks if the parsed value is an integer using the Number.isInteger() function.
Number.parseInt + simple condition
- This test case uses the Number.parseInt() function to parse the zIndex value with a radix of 10, and then applies a simple conditional check: if the parsed value is truthy (i.e., not zero or NaN).

Library Usage

None of the test cases use any external libraries.

JavaScript Features and Syntax

None of the test cases explicitly use special JavaScript features or syntax.

Benchmark Results

The latest benchmark results show that:

The Number.parseInt + simple condition approach is the fastest, with an average execution rate of approximately 3990.074951171875 executions per second.
The Number.parseInt + Number.isInteger approach is slightly slower, with an average execution rate of approximately 41885.5078125 executions per second.
The Number + isNaN approach is the slowest, with an average execution rate of approximately 53402.22265625 executions per second.

Other Considerations

When choosing a parsing and checking approach for zIndex values, developers should consider the following factors:

Parsing options: Using Number.parseInt() with a radix of 10 is a good option if you want to ensure that the parsed value is an integer. However, this may be slower than using Number() alone.
Conditioning: Applying a simple conditional check, like in the third test case, can be faster than more complex checks. However, it requires careful consideration of edge cases and potential false positives.
Browser support: The benchmark was run on Chrome 123 with Mac OS X 10.15.7. It's essential to ensure that your chosen approach works across different browsers and platforms.

Alternatives

If you're looking for alternative approaches or libraries, consider the following:

regex: You can use regular expressions to parse zIndex values, but this may be slower than using parsing functions.
Math.trunc(): This function truncates the decimal part of a number and returns an integer. It can be used as an alternative to Number.parseInt() for simple cases.
Other libraries: There are libraries like Lodash or Moment.js that provide additional parsing and checking functionality, but may introduce overhead.

Keep in mind that this benchmark is specific to the tested use case, and you should adapt your approach based on your project's requirements.

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark is designed to test the performance of different approaches for parsing and checking the value of `zIndex` style property in HTML elements using JavaScript.

**Test Cases**

There are three individual test cases:

1. **Number + isNaN**
	* This test case checks if the `zIndex` value can be successfully parsed as a number using the built-in `Number()` function and then checked for NaN (Not a Number) using the `isNaN()` function.
2. **Number.parseInt + Number.isInteger**
	* This test case uses the `Number.parseInt()` function to parse the `zIndex` value with a radix of 10, and then checks if the parsed value is an integer using the `Number.isInteger()` function.
3. **Number.parseInt + simple condition**
	* This test case uses the `Number.parseInt()` function to parse the `zIndex` value with a radix of 10, and then applies a simple conditional check: if the parsed value is truthy (i.e., not zero or NaN).

**Library Usage**

None of the test cases use any external libraries.

**JavaScript Features and Syntax**

None of the test cases explicitly use special JavaScript features or syntax.

**Benchmark Results**

The latest benchmark results show that:

* The **Number.parseInt + simple condition** approach is the fastest, with an average execution rate of approximately 3990.074951171875 executions per second.
* The **Number.parseInt + Number.isInteger** approach is slightly slower, with an average execution rate of approximately 41885.5078125 executions per second.
* The **Number + isNaN** approach is the slowest, with an average execution rate of approximately 53402.22265625 executions per second.

**Other Considerations**

When choosing a parsing and checking approach for `zIndex` values, developers should consider the following factors:

* **Parsing options**: Using `Number.parseInt()` with a radix of 10 is a good option if you want to ensure that the parsed value is an integer. However, this may be slower than using `Number()` alone.
* **Conditioning**: Applying a simple conditional check, like in the third test case, can be faster than more complex checks. However, it requires careful consideration of edge cases and potential false positives.
* **Browser support**: The benchmark was run on Chrome 123 with Mac OS X 10.15.7. It's essential to ensure that your chosen approach works across different browsers and platforms.

**Alternatives**

If you're looking for alternative approaches or libraries, consider the following:

* **regex**: You can use regular expressions to parse `zIndex` values, but this may be slower than using parsing functions.
* **Math.trunc()**: This function truncates the decimal part of a number and returns an integer. It can be used as an alternative to `Number.parseInt()` for simple cases.
* **Other libraries**: There are libraries like Lodash or Moment.js that provide additional parsing and checking functionality, but may introduce overhead.

Keep in mind that this benchmark is specific to the tested use case, and you should adapt your approach based on your project's requirements.

Related benchmarks:

z-indexes collection and coercion (version: 0)

Comparing performance of: Number + isNaN vs Number.parseInt + Number.isInteger vs Number.parseInt + simple condition

Created: 11 months ago by: Registered User

Jump to the latest result