Benchmark: json vs arraybuffer

HTML Preparation code:

<!--your preparation HTML code goes here-->

AخA
 
<!--your preparation HTML code goes here-->

Script Preparation code:

function serializeToArrayBuffer(obj) {
    const encoder = new TextEncoder();
    let bufferArray = [];

    function serialize(value) {
        if (typeof value === "string") {
            bufferArray.push(1); // Type marker for string
            const encoded = encoder.encode(value);
            bufferArray.push(...new Uint8Array(new Uint32Array([encoded.length]).buffer));
            bufferArray.push(...encoded);
        } else if (typeof value === "number") {
            bufferArray.push(2); // Type marker for number
            bufferArray.push(...new Uint8Array(new Float64Array([value]).buffer));
        } else if (typeof value === "boolean") {
            bufferArray.push(3); // Type marker for boolean
            bufferArray.push(value ? 1 : 0);
        } else if (Array.isArray(value)) {
            bufferArray.push(4); // Type marker for array
            bufferArray.push(...new Uint8Array(new Uint32Array([value.length]).buffer));
            value.forEach((item) => serialize(item));
        } else if (value && typeof value === "object") {
            bufferArray.push(5); // Type marker for object
            const keys = Object.keys(value);
            bufferArray.push(...new Uint8Array(new Uint32Array([keys.length]).buffer));
            keys.forEach((key) => {
                serialize(key); // Serialize key as string
                serialize(value[key]); // Serialize value
            });
        } else if (value === null) {
            bufferArray.push(6); // Type marker for null
        }
    }

    serialize(obj);
    return new Uint8Array(bufferArray).buffer;
}

function deserializeFromArrayBuffer(buffer) {
    const decoder = new TextDecoder();
    const uint8Array = new Uint8Array(buffer);
    let offset = 0;

    function deserialize() {
        const type = uint8Array[offset++];
        if (type === 1) {
            // String
            const length = new Uint32Array(uint8Array.buffer.slice(offset, offset + 4))[0];
            offset += 4;
            const str = decoder.decode(uint8Array.slice(offset, offset + length));
            offset += length;
            return str;
        } else if (type === 2) {
            // Number
            const num = new Float64Array(uint8Array.buffer.slice(offset, offset + 8))[0];
            offset += 8;
            return num;
        } else if (type === 3) {
            // Boolean
            return uint8Array[offset++] === 1;
        } else if (type === 4) {
            // Array
            const length = new Uint32Array(uint8Array.buffer.slice(offset, offset + 4))[0];
            offset += 4;
            const arr = [];
            for (let i = 0; i < length; i++) {
                arr.push(deserialize());
            }
            return arr;
        } else if (type === 5) {
            // Object
            const length = new Uint32Array(uint8Array.buffer.slice(offset, offset + 4))[0];
            offset += 4;
            const obj = {};
            for (let i = 0; i < length; i++) {
                const key = deserialize(); // Deserialize key (string)
                const value = deserialize(); // Deserialize value
                obj[key] = value;
            }
            return obj;
        } else if (type === 6) {
            // Null
            return null;
        } else {
            throw new Error("Unknown type marker: " + type);
        }
    }

    return deserialize();
}

const test = {
    a: "hohojoho",
    b: { c: [1, "string", { nested: true }, null] },
    d: 1,
    e: true,
    f: null,
};

​x
 
function serializeToArrayBuffer(obj) {    const encoder = new TextEncoder();    let bufferArray = [];​    function serialize(value) {        if (typeof value === "string") {            bufferArray.push(1); // Type marker for string            const encoded = encoder.encode(value);            bufferArray.push(...new Uint8Array(new Uint32Array([encoded.length]).buffer));            bufferArray.push(...encoded);        } else if (typeof value === "number") {            bufferArray.push(2); // Type marker for number            bufferArray.push(...new Uint8Array(new Float64Array([value]).buffer));        } else if (typeof value === "boolean") {            bufferArray.push(3); // Type marker for boolean            bufferArray.push(value ? 1 : 0);        } else if (Array.isArray(value)) {            bufferArray.push(4); // Type marker for array            bufferArray.push(...new Uint8Array(new Uint32Array([value.length]).buffer));            value.forEach((item) => serialize(item));        } else if (value && typeof value === "object") {            bufferArray.push(5); // Type marker for object            const keys = Object.keys(value);            bufferArray.push(...new Uint8Array(new Uint32Array([keys.length]).buffer));            keys.forEach((key) => {                serialize(key); // Serialize key as string                serialize(value[key]); // Serialize value            });        } else if (value === null) {            bufferArray.push(6); // Type marker for null        }    }​    serialize(obj);    return new Uint8Array(bufferArray).buffer;}​function deserializeFromArrayBuffer(buffer) {    const decoder = new TextDecoder();    const uint8Array = new Uint8Array(buffer);    let offset = 0;​    function deserialize() {        const type = uint8Array[offset++];        if (type === 1) {            // String            const length = new Uint32Array(uint8Array.buffer.slice(offset, offset + 4))[0];            offset += 4;            const str = decoder.decode(uint8Array.slice(offset, offset + length));            offset += length;            return str;        } else if (type === 2) {            // Number            const num = new Float64Array(uint8Array.buffer.slice(offset, offset + 8))[0];            offset += 8;            return num;        } else if (type === 3) {            // Boolean            return uint8Array[offset++] === 1;        } else if (type === 4) {            // Array            const length = new Uint32Array(uint8Array.buffer.slice(offset, offset + 4))[0];            offset += 4;            const arr = [];            for (let i = 0; i < length; i++) {                arr.push(deserialize());            }            return arr;        } else if (type === 5) {            // Object            const length = new Uint32Array(uint8Array.buffer.slice(offset, offset + 4))[0];            offset += 4;            const obj = {};            for (let i = 0; i < length; i++) {                const key = deserialize(); // Deserialize key (string)                const value = deserialize(); // Deserialize value                obj[key] = value;            }            return obj;        } else if (type === 6) {            // Null            return null;        } else {            throw new Error("Unknown type marker: " + type);        }    }​    return deserialize();}​const test = {    a: "hohojoho",    b: { c: [1, "string", { nested: true }, null] },    d: 1,    e: true,    f: null,};​

Tests:

arraybuffer
const buffer = serializeToArrayBuffer(test); const result = deserializeFromArrayBuffer(buffer);
const buffer = serializeToArrayBuffer(test);
const result = deserializeFromArrayBuffer(buffer);

json

const jsonStr = JSON.stringify(test);
const result = JSON.parse(jsonStr);

 
const jsonStr = JSON.stringify(test);const result = JSON.parse(jsonStr);

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
arraybuffer
json

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 15 days ago)

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

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
arraybuffer	30950.8 Ops/sec
json	1657721.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 5 months ago):

The benchmark under discussion compares two serialization methods to transform a JavaScript object into different formats: one using JSON serialization, and the other using a custom implementation based on ArrayBuffer. It evaluates the performance of these two approaches in terms of how many executions (or operations) can be completed per second.

Options Compared

ArrayBuffer Serialization
- Implementation: This method utilizes a custom serialization function (serializeToArrayBuffer) which converts a JavaScript object into an ArrayBuffer. It identifies types such as strings, numbers, booleans, arrays, and objects, and uses type markers to facilitate deserialization.
- Testing Code:
```
const buffer = serializeToArrayBuffer(test);
const result = deserializeFromArrayBuffer(buffer);
```
JSON Serialization
- Implementation: This method employs JavaScript's built-in JSON.stringify() to convert the object into a JSON string and then JSON.parse() to convert it back to a JavaScript object.
- Testing Code:
```
const jsonStr = JSON.stringify(test);
const result = JSON.parse(jsonStr);
```

Pros and Cons of Each Approach

ArrayBuffer Serialization

Pros:
- Efficiency in Binary Data Handling: ArrayBuffer provides a more efficient representation for binary data, which can improve performance when dealing with large data sets or when binary operations are required.
- Custom Format Control: Offers more control over the serialization format, enabling developers to implement specific optimizations depending on the data types they expect.
Cons:
- Complex Implementation: More complex to write and maintain due to the need for custom serialization/deserialization logic. This increases the likelihood of introducing bugs.
- Limited Readability: The serialized data is less human-readable compared to JSON, making debugging more challenging.

JSON Serialization

Pros:
- Simplicity and Readability: The JSON format is widely recognized and human-readable, making it easier to debug and monitor.
- Built-in Support: Native functionality provided by JavaScript, making it straightforward and less error-prone.
Cons:
- Performance Limitations: Generally slower for large or complex data structures, as it does not provide the same level of optimization as a binary format like ArrayBuffer.
- Type Restrictions: JSON serialization does not support certain data types (e.g., functions, undefined), limiting its flexibility compared to other serialization protocols.

Benchmark Results

From the benchmark results provided, we observe the following:

JSON Serialization: Performed significantly better, with approximately 2,371,188.75 executions per second.
ArrayBuffer Serialization: Registered only around 53,362.84 executions per second, indicating that this approach is much slower in this particular test scenario.

Other Considerations and Alternatives

Alternatives to Consider:
- Protocol Buffers: A method developed by Google that allows for more efficient serialization of structured data, suitable for performance-critical applications. It may be more complex to set up but often results in better performance than JSON serialization.
- MessagePack: Similar to JSON but provides a more efficient binary serialization format. It is more compact than JSON and can be faster, but it also lacks the human-readability that JSON offers.
- CBOR (Concise Binary Object Representation): Another binary serialization format, similar in concept to MessagePack, known for its compactness and ease of use.

In conclusion, when choosing between these serialization methods, developers should consider the nature of their data, performance needs, ease of use, and ecosystem requirements, weighing the complexities against the benefits offered by each approach.

LLMs can make mistakes. Check important info.

### Options Compared

1. **ArrayBuffer Serialization**
   - **Implementation**: This method utilizes a custom serialization function (`serializeToArrayBuffer`) which converts a JavaScript object into an ArrayBuffer. It identifies types such as strings, numbers, booleans, arrays, and objects, and uses type markers to facilitate deserialization.
   - **Testing Code**: 
     ```javascript
     const buffer = serializeToArrayBuffer(test);
     const result = deserializeFromArrayBuffer(buffer);
     ```

2. **JSON Serialization**
   - **Implementation**: This method employs JavaScript's built-in `JSON.stringify()` to convert the object into a JSON string and then `JSON.parse()` to convert it back to a JavaScript object.
   - **Testing Code**:
     ```javascript
     const jsonStr = JSON.stringify(test);
     const result = JSON.parse(jsonStr);
     ```

### Pros and Cons of Each Approach

#### ArrayBuffer Serialization
- **Pros**:
  - **Efficiency in Binary Data Handling**: ArrayBuffer provides a more efficient representation for binary data, which can improve performance when dealing with large data sets or when binary operations are required.
  - **Custom Format Control**: Offers more control over the serialization format, enabling developers to implement specific optimizations depending on the data types they expect.

- **Cons**:
  - **Complex Implementation**: More complex to write and maintain due to the need for custom serialization/deserialization logic. This increases the likelihood of introducing bugs.
  - **Limited Readability**: The serialized data is less human-readable compared to JSON, making debugging more challenging.

#### JSON Serialization
- **Pros**:
  - **Simplicity and Readability**: The JSON format is widely recognized and human-readable, making it easier to debug and monitor.
  - **Built-in Support**: Native functionality provided by JavaScript, making it straightforward and less error-prone.

- **Cons**:
  - **Performance Limitations**: Generally slower for large or complex data structures, as it does not provide the same level of optimization as a binary format like ArrayBuffer.
  - **Type Restrictions**: JSON serialization does not support certain data types (e.g., functions, undefined), limiting its flexibility compared to other serialization protocols.

### Benchmark Results

From the benchmark results provided, we observe the following:

- **JSON Serialization**: Performed significantly better, with approximately 2,371,188.75 executions per second.
- **ArrayBuffer Serialization**: Registered only around 53,362.84 executions per second, indicating that this approach is much slower in this particular test scenario.

### Other Considerations and Alternatives

- **Alternatives to Consider**:
  - **Protocol Buffers**: A method developed by Google that allows for more efficient serialization of structured data, suitable for performance-critical applications. It may be more complex to set up but often results in better performance than JSON serialization.
  - **MessagePack**: Similar to JSON but provides a more efficient binary serialization format. It is more compact than JSON and can be faster, but it also lacks the human-readability that JSON offers.
  - **CBOR (Concise Binary Object Representation)**: Another binary serialization format, similar in concept to MessagePack, known for its compactness and ease of use.

Related benchmarks:

json vs arraybuffer (version: 1)

Comparing performance of: arraybuffer vs json

Created: 5 months ago by: Guest

Jump to the latest result

arraybuffer