Benchmark: ArrayBuffer vs JSON serialization

Tests:

JSON serialization
const arr = Array.from({ length: 5000 }).map(() => Math.random()); const serialized = JSON.stringify(arr); const deserialized = JSON.parse(serialized); deserialized.map(x => 0.0); const serializedAgain = JSON.stringify(deserialized);
ArrayBuffer serialization
const arr = Array.from({ length: 5000 }).map(() => Math.random()); const buffer = new ArrayBuffer(arr.length * 4); const view = new Float32Array(buffer, 0, 4); view.map((_, idx) => arr[idx]); view.map(() => 0.0); const view2 = new Float32Array(buffer, 0, 4);

Historical Performance Data aggregated from 95 community runs

Desktop Results:

Chrome 60 runs

ArrayBuffer serialization

2K/s

JSON serialization

577/s

Fastest: ArrayBuffer serialization (3.7x faster)

View exact numbers

✓ ArrayBuffer serialization: 2,156 ops/sec
• JSON serialization: 577 ops/sec

Firefox 17 runs

ArrayBuffer serialization

9K/s

JSON serialization

661/s

Fastest: ArrayBuffer serialization (13.4x faster)

View exact numbers

✓ ArrayBuffer serialization: 8,869 ops/sec
• JSON serialization: 661 ops/sec

Mobile Results:

Chrome 12 runs

ArrayBuffer serialization

1K/s

JSON serialization

359/s

Fastest: ArrayBuffer serialization (3.2x faster)

View exact numbers

✓ ArrayBuffer serialization: 1,158 ops/sec
• JSON serialization: 359 ops/sec

Safari 6 runs

ArrayBuffer serialization

23K/s

JSON serialization

1K/s

Fastest: ArrayBuffer serialization (16.6x faster)

View exact numbers

✓ ArrayBuffer serialization: 23,044 ops/sec
• JSON serialization: 1,384 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
JSON serialization
ArrayBuffer serialization

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 144 on Windows

View result in a separate tab

ArrayBuffer serialization

4K/s

JSON serialization

1K/s

View exact numbers

Test name	Executions per second
✓ ArrayBuffer serialization	3,557 Ops/sec
JSON serialization	1,325 Ops/sec

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

LLMs can make mistakes. Check important info.

This benchmark compares the performance of two different approaches for serializing and deserializing large arrays in JavaScript: JSON serialization and ArrayBuffer serialization.

**JSON Serialization**

In this approach, an array is created using `Array.from()` with 5000 random numbers. The array is then serialized to a JSON string using `JSON.stringify()`. The resulting JSON string is parsed back into an array using `JSON.parse()`, and the array is modified by mapping over it and setting all elements to 0. The modified array is then serialized again to another JSON string.

**ArrayBuffer Serialization**

In this approach, an array is created using `Array.from()` with 5000 random numbers. An ArrayBuffer is created with a length equal to the product of the array's length and 4 (assuming 32-bit floating-point numbers). A Float32Array view is created from the ArrayBuffer, which maps over the original array and sets its elements to 0. The modified array is then mapped again to set all elements to 0.

**Pros and Cons**

**JSON Serialization:**

Pros:

* Easy to implement and understand
* Widely supported by browsers and Node.js

Cons:

* Can be slower than ArrayBuffer serialization for large datasets due to the overhead of parsing and stringifying the JSON data.
* May incur additional overhead due to the use of UTF-8 encoding.

**ArrayBuffer Serialization:**

Pros:

* Can be faster than JSON serialization for large datasets as it avoids the overhead of parsing and stringifying data.
* Provides direct access to the underlying array data, which can be beneficial for certain use cases.

Cons:

* Requires more advanced understanding of JavaScript internals and ArrayBuffer manipulation.
* May not be supported by all browsers or Node.js versions.

**Library Usage**

None of the test cases use any external libraries.

**Special JS Feature/Syntax**

Neither test case uses any special JavaScript features or syntax beyond standard JavaScript syntax. However, it's worth noting that the `Array.from()` method and `Float32Array` constructor are part of ECMAScript 2015 (ES6) standards.

**Other Alternatives**

Alternatives to ArrayBuffer serialization include:

* Using `Uint8Array` and `Atob()` for binary serialization.
* Utilizing Web Workers or other parallel processing techniques to improve performance.
* Employing compression algorithms, such as LZ77 or GZIP, to reduce data size before serializing.

In summary, this benchmark compares the performance of two approaches for serializing and deserializing large arrays in JavaScript. While JSON serialization is easy to implement and widely supported, ArrayBuffer serialization can be faster but requires more advanced knowledge and may not be supported by all browsers or Node.js versions.

ArrayBuffer vs JSON serialization (version: 0) Benchmark.js

Comparing performance of: `JSON serialization vs ArrayBuffer serialization`

Created: 9 years ago by: Guest

Go to the latest result

JSON serialization

ArrayBuffer serialization

Historical Performance Data aggregated from 95 community runs

Desktop Results:

Chrome 60 runs

Firefox 17 runs

Mobile Results:

Chrome 12 runs

Safari 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

ArrayBuffer vs JSON serialization (version: 0) Benchmark.js

Comparing performance of: JSON serialization vs ArrayBuffer serialization

Created: 9 years ago by: Guest

Go to the latest result

JSON serialization

ArrayBuffer serialization

Historical Performance Data aggregated from 95 community runs

Desktop Results:

Chrome 60 runs

Firefox 17 runs

Mobile Results:

Chrome 12 runs

Safari 6 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: `JSON serialization vs ArrayBuffer serialization`