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);

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: 4 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

Test name	Executions per second
JSON serialization	1324.7 Ops/sec
ArrayBuffer serialization	3557.1 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.

Related benchmarks:

ArrayBuffer vs JSON serialization (version: 0)

Comparing performance of: JSON serialization vs ArrayBuffer serialization

Created: 9 years ago by: Guest

Jump to the latest result

JSON serialization

ArrayBuffer serialization

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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