Benchmark: array vs node list

HTML Preparation code:

<html>

<head>
    <title>Example Domain</title>

    <meta charset="utf-8">
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        body {
            background-color: #f0f0f2;
            margin: 0;
            padding: 0;
            font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
            
        }
        div {
            width: 600px;
            margin: 5em auto;
            padding: 2em;
            background-color: #fdfdff;
            border-radius: 0.5em;
            box-shadow: 2px 3px 7px 2px rgba(0,0,0,0.02);
        }
        a:link, a:visited {
            color: #38488f;
            text-decoration: none;
        }
        @media (max-width: 700px) {
            div {
                margin: 0 auto;
                width: auto;
            }
        }
    </style>
</head>

<body>
    <div>
        <h1>Example Domain</h1>
        <p>This domain is for use in illustrative examples in documents. You may use this
            domain in literature without prior coordination or asking for permission.</p>
        <p><a href="https://www.iana.org/domains/example">More information...</a></p>
    </div>


</body>

</html>

Tests:

array
const elements = document.querySelectorAll('*'); [...elements].forEach(console.log);
node list
const elements = document.querySelectorAll('*'); elements.forEach(console.log);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
array
node list

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36

Browser/OS: Chrome 92 on Windows

View result in a separate tab

Test name	Executions per second
array	980.1 Ops/sec
node list	3578.1 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

The provided benchmark measures the performance difference between using an Array and a NodeList in JavaScript.

**Options Compared**

Two options are being compared:

1. **Array**: Using the `Array.from()` method to convert a NodeList into an array.
2. **NodeList**: Using the NodeList directly without converting it to an array.

**Pros and Cons of Each Approach**

* **Array**:
	+ Pros: Can take advantage of Array methods like `forEach()`, `map()`, and `filter()` for iteration, which can be more efficient than iterating through a NodeList.
	+ Cons: Requires the explicit conversion from NodeList to Array using `Array.from()`.
* **NodeList**: Directly using a NodeList without conversion can be simpler and faster since it doesn't require an additional step of conversion.

However, for modern JavaScript engines like V8 (used by Chrome), NodeList is optimized to behave similarly to an array under the hood. This means that the performance difference between using Array and NodeList may not be significant in all cases.

**Library/Feature**

No specific library or feature is being used in this benchmark, other than built-in JavaScript features like `Array.from()` and NodeList.

**Special JS Features/Syntax**

None are mentioned in this benchmark definition.

**Other Considerations**

When deciding between using an Array and a NodeList, consider the following:

* If you need to take advantage of array methods for iteration, use an Array.
* If simplicity and speed are your priority (e.g., when working with a large number of elements), using a NodeList might be sufficient.
* Be aware that modern JavaScript engines have optimized NodeList performance, so the difference between using Array and NodeList may not be significant in all cases.

**Alternatives**

If you're looking for alternative approaches to benchmarking or comparing JavaScript array performance:

1. Use `Performance.now()` and `performance.measure()` to measure execution time directly.
2. Utilize a profiling tool like Chrome DevTools' Profiler or Node.js Inspector to analyze your code's performance.
3. Consider using a library like Benchmark.js, which provides more advanced benchmarking features.

Keep in mind that the choice of alternative depends on your specific use case and requirements.

Related benchmarks:

array vs node list (version: 0)

Comparing performance of: array vs node list

Created: 3 years ago by: Guest

Jump to the latest result

array

node list

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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