Benchmark: Array vs Typed Array vs Buffer Typed Array

Script Preparation code:

var size = 450000;
var buf = new ArrayBuffer(size);

var normalArray = new Array(size);
var arrayFromBuffer = new Uint8Array(buf);
var arrayWithoutBuffer = new Uint8Array(size);

Tests:

Array
for (i =0; i< size; i++){ normalArray[i] = 0; }
typed array from Buffer
for (i =0; i< size; i++){ arrayFromBuffer[i] = 0; }
typed Array no buffer
for (i =0; i< size; i++){ arrayWithoutBuffer[i] = 0; }

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Firefox 7 runs

typed Array no buffer

1K/s

typed array from Buffer

870/s

Array

254/s

Fastest: typed Array no buffer (5.0x faster)

View exact numbers

✓ typed Array no buffer: 1,265 ops/sec
• typed array from Buffer: 870 ops/sec
• Array : 254 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array
typed array from Buffer
typed Array no buffer

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 148 on Windows

View result in a separate tab

Array

70/s

typed array from Buffer

69/s

typed Array no buffer

68/s

View exact numbers

Test name	Executions per second
✓ Array	70 Ops/sec
typed array from Buffer	69 Ops/sec
typed Array no buffer	68 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what is being tested, compared, and their pros and cons.

**Benchmark Overview**

The benchmark compares the performance of three types of arrays in JavaScript: regular arrays (Array), typed arrays from buffers (Uint8Array, which we'll assume is a 8-bit unsigned integer array for this explanation), and a plain typed array without a buffer (Uint8Array, with the same assumption as above).

**Benchmark Preparation Code**

The script preparation code creates three arrays:

* `normalArray`: a regular JavaScript array of size 450,000.
* `arrayFromBuffer`: a Uint8Array created from an ArrayBuffer of size 450,000. This is done by wrapping an existing ArrayBuffer in a new Uint8Array object.
* `arrayWithoutBuffer`: another Uint8Array of size 450,000, created without referencing an existing ArrayBuffer.

The script then populates each array with zeros using a loop that iterates from 0 to the array's length (size).

**Benchmark Test Cases**

There are three test cases:

1. **Array**: This test case measures the performance of the `normalArray`.
2. **Typed Array from Buffer**: This test case measures the performance of the `arrayFromBuffer`.
3. **Typed Array no buffer**: This test case measures the performance of the `arrayWithoutBuffer`.

**Comparison and Pros/Cons**

The three arrays are compared in terms of their ability to populate an array with zeros:

* **Regular Arrays (Array)**: In JavaScript, regular arrays are dynamically typed, which means they can grow or shrink in size at runtime. This leads to slower performance due to the overhead of dynamic type checking.
* **Typed Arrays from Buffers (Uint8Array)**: Typed arrays, like Uint8Array, have a fixed size and type, which allows for faster execution because the JavaScript engine can optimize the code to perform operations directly on the typed array's buffer without the need for dynamic type checks. However, creating a new ArrayBuffer is an expensive operation, so this approach requires careful optimization.
* **Plain Typed Arrays without Buffer (Uint8Array)**: This test case uses Uint8Array objects created from existing arrays or other sources, which can provide faster performance than regular arrays because the JavaScript engine doesn't have to perform dynamic type checks.

**Library and Special Features**

The benchmark uses the following libraries:

* None explicitly mentioned, but it's likely that the benchmark uses built-in JavaScript features like `ArrayBuffer`, `Uint8Array`, and the `new` keyword for object creation.
* No special JS feature or syntax is used in this benchmark.

**Other Alternatives**

If you wanted to compare these arrays using a different approach:

* You could use native code (e.g., C++ or Rust) to create arrays with similar properties, which would likely be faster than JavaScript arrays. However, this would require significant changes to the benchmark and might not run in most browsers.
* Another alternative is to use a library like WebAssembly (WASM) that allows you to compile performance-critical code into a binary format that can be executed by the browser.

Keep in mind that these alternatives would likely change the nature of the comparison, and the results might not be directly comparable to the JavaScript array tests.

Array vs Typed Array vs Buffer Typed Array (version: 0) Benchmark.js

Comparing performance of: `Array vs typed array from Buffer vs typed Array no buffer`

Created: 5 years ago by: Guest

Go to the latest result

Array

typed array from Buffer

typed Array no buffer

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Array vs Typed Array vs Buffer Typed Array (version: 0) Benchmark.js

Comparing performance of: Array vs typed array from Buffer vs typed Array no buffer

Created: 5 years ago by: Guest

Go to the latest result

Array

typed array from Buffer

typed Array no buffer

Historical Performance Data aggregated from 7 community runs

Desktop Results:

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Array vs typed array from Buffer vs typed Array no buffer`