Benchmark: One big array or one per object

Script Preparation code:

var count = 100;
var bigArr = new Float32Array(16 * count);
var bigArr2 = Array(16 * count);
var arrs = new Array(count);
for (let i = 0; i < count; i++) {
  var a = arrs[i] = new Float32Array(16);
  for (let x = 0; x < 16; x++) {
    var v = Math.random();
    a[x] = v;
    bigArr[i * 16 + x] = v;
    bigArr2[i * 16 + x] = v;
  }
}

var t;

​x
 
var count = 100;var bigArr = new Float32Array(16 * count);var bigArr2 = Array(16 * count);var arrs = new Array(count);for (let i = 0; i < count; i++) {  var a = arrs[i] = new Float32Array(16);  for (let x = 0; x < 16; x++) {    var v = Math.random();    a[x] = v;    bigArr[i * 16 + x] = v;    bigArr2[i * 16 + x] = v;  }}​var t;

Tests:

Big array read in chunks

t = 0;
let c = 16 * count;
for (let i = 0; i < c; i += 16) {
  for (let x = 0; x < 16; x++) {
    t += bigArr[i + x];
  }
}

 
t = 0;let c = 16 * count;for (let i = 0; i < c; i += 16) {  for (let x = 0; x < 16; x++) {    t += bigArr[i + x];  }}

Small array read

t = 0;
for (const a of arrs) {
  for (let x = 0; x < 16; x++) {
    t += a[x];
  }
}

 
t = 0;for (const a of arrs) {  for (let x = 0; x < 16; x++) {    t += a[x];  }}

Big array read simple
t = 0; let c = 16 * count; for (let i = 0; i < c; i++) { t += bigArr[i]; }
t = 0;
let c = 16 * count;
for (let i = 0; i < c; i++) {
t += bigArr[i];
}
non-typed big array read in chunks
t = 0; let c = 16 * count; for (let i = 0; i < c; i += 16) { for (let x = 0; x < 16; x++) { t += bigArr2[i + x]; } }
t = 0;
let c = 16 * count;
for (let i = 0; i < c; i += 16) {
for (let x = 0; x < 16; x++) {
t += bigArr2[i + x];
}
}
non-typed big array read simple
t = 0; let c = 16 * count; for (let i = 0; i < c; i++) { t += bigArr2[i]; }
t = 0;
let c = 16 * count;
for (let i = 0; i < c; i++) {
t += bigArr2[i];
}

Big array read realistic

t = 0;
let c = 16 * count;
for (let i = 0; i < c; i += 16) {
  t += bigArr[i + 0];
  t += bigArr[i + 1];
  t += bigArr[i + 2];
  t += bigArr[i + 3];
  t += bigArr[i + 4];
  t += bigArr[i + 5];
  t += bigArr[i + 6];
  t += bigArr[i + 7];
  t += bigArr[i + 8];
  t += bigArr[i + 9];
  t += bigArr[i + 10];
  t += bigArr[i + 11];
  t += bigArr[i + 12];
  t += bigArr[i + 13];
  t += bigArr[i + 14];
  t += bigArr[i + 15];
}

 
t = 0;let c = 16 * count;for (let i = 0; i < c; i += 16) {  t += bigArr[i + 0];  t += bigArr[i + 1];  t += bigArr[i + 2];  t += bigArr[i + 3];  t += bigArr[i + 4];  t += bigArr[i + 5];  t += bigArr[i + 6];  t += bigArr[i + 7];  t += bigArr[i + 8];  t += bigArr[i + 9];  t += bigArr[i + 10];  t += bigArr[i + 11];  t += bigArr[i + 12];  t += bigArr[i + 13];  t += bigArr[i + 14];  t += bigArr[i + 15];}

small array read realistic

t = 0;
for (const a of arrs) {
  t += a[0];
  t += a[1];
  t += a[2];
  t += a[3];
  t += a[4];
  t += a[5];
  t += a[6];
  t += a[7];
  t += a[8];
  t += a[9];
  t += a[10];
  t += a[11];
  t += a[12];
  t += a[13];
  t += a[14];
  t += a[15];
}

 
t = 0;for (const a of arrs) {  t += a[0];  t += a[1];  t += a[2];  t += a[3];  t += a[4];  t += a[5];  t += a[6];  t += a[7];  t += a[8];  t += a[9];  t += a[10];  t += a[11];  t += a[12];  t += a[13];  t += a[14];  t += a[15];}

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
Big array read in chunks
Small array read
Big array read simple
non-typed big array read in chunks
non-typed big array read simple
Big array read realistic
small array read realistic

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Browser/OS: Chrome 122 on Linux

View result in a separate tab

Test name	Executions per second
Big array read in chunks	4791.9 Ops/sec
Small array read	6743.0 Ops/sec
Big array read simple	4888.4 Ops/sec
non-typed big array read in chunks	4941.8 Ops/sec
non-typed big array read simple	4914.7 Ops/sec
Big array read realistic	4887.6 Ops/sec
small array read realistic	6905.9 Ops/sec

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

What is being tested?

The benchmark measures the performance of reading arrays in JavaScript, specifically focusing on different approaches to accessing array elements.

There are four main variations being compared:

Small array read: Accessing individual elements of an array using indexing (e.g., arr[0]).
Large array read in chunks: Iterating over a large array and accessing its elements in groups of 16 (i.e., from index 0 to 15, then from index 16 to 31, and so on).
Non-typed big array read in chunks: Similar to the previous point, but using a non-typed (or primitive) array instead of a typed array.
Large array read simple: Accessing all elements of a large array without any iteration or chunking.

Why is this important?

This benchmark helps identify performance bottlenecks in JavaScript applications that rely heavily on arrays. Understanding how different approaches to accessing array elements affect performance can inform optimization strategies and help developers write more efficient code.

Browser-specific results

The provided result shows that Chrome 122, running on Linux, achieves the best execution rate for:

Small array read: 4791.8896484375 executions per second
Big array read simple: 4887.583984375 executions per second
Non-typed big array read in chunks: 4941.77197265625 executions per second (slightly slower than the typed array version)
Large array read in chunks: 4888.42822265625 executions per second

Performance implications

The results suggest that:

Accessing individual elements of an array using indexing is the fastest approach.
Reading large arrays without chunking can be slow due to memory access patterns and cache efficiency issues.
Non-typed arrays may incur additional overhead compared to typed arrays, although the difference is relatively small in this benchmark.

Takeaways

This benchmark highlights the importance of considering array access patterns and optimization strategies when writing JavaScript code. Developers should aim to use indexing for small arrays, avoid chunking large arrays unless necessary, and consider the type of array used (typed vs. non-typed) to minimize performance overhead.

LLMs can make mistakes. Check important info.

**What is being tested?**

The benchmark measures the performance of reading arrays in JavaScript, specifically focusing on different approaches to accessing array elements.

There are four main variations being compared:

1. **Small array read**: Accessing individual elements of an array using indexing (e.g., `arr[0]`).
2. **Large array read in chunks**: Iterating over a large array and accessing its elements in groups of 16 (i.e., from index 0 to 15, then from index 16 to 31, and so on).
3. **Non-typed big array read in chunks**: Similar to the previous point, but using a non-typed (or primitive) array instead of a typed array.
4. **Large array read simple**: Accessing all elements of a large array without any iteration or chunking.

**Why is this important?**

**Browser-specific results**

The provided result shows that Chrome 122, running on Linux, achieves the best execution rate for:

* Small array read: `4791.8896484375` executions per second
* Big array read simple: `4887.583984375` executions per second
* Non-typed big array read in chunks: `4941.77197265625` executions per second (slightly slower than the typed array version)
* Large array read in chunks: `4888.42822265625` executions per second

**Performance implications**

The results suggest that:

* Accessing individual elements of an array using indexing is the fastest approach.
* Reading large arrays without chunking can be slow due to memory access patterns and cache efficiency issues.
* Non-typed arrays may incur additional overhead compared to typed arrays, although the difference is relatively small in this benchmark.

**Takeaways**

Related benchmarks:

One big array or one per object (version: 0)

Comparing performance of: Big array read in chunks vs Small array read vs Big array read simple vs non-typed big array read in chunks vs non-typed big array read simple vs Big array read realistic vs small array read realistic

Created: 2 years ago by: Guest

Jump to the latest result