Benchmark: Array Buffer vs JSON (use 1 DataVIew)

Script Preparation code:

var cursors = Array.from({
    length: 100
}, (_, i) => ({
    type: `${Math.random() > 0.5 ? "presentation" : "whiteboard"}.cursor`,
    data: {
        id: btoa(`gid://stoege/${Math.random() > 0.5 ? "Pupil" : "Admin"}/${i%2 * 1000}`),
        aCoords: {
            tl: {
                x: Math.ceil(Math.random() * 1920),
                y: Math.ceil(Math.random() * 1080)
            }
        }
    }
}));


class BiderectionalMap {
    constructor() {
        this.keyToValue = new Map();
        this.valueToKey = new Map();
    }
    set(key, value) {
        if (this.keyToValue.has(key)) {
            const oldValue = this.keyToValue.get(key);
            this.valueToKey.delete(oldValue);
        }
        if (this.valueToKey.has(value)) {
            const oldKey = this.valueToKey.get(value);
            this.keyToValue.delete(oldKey);
        }
        this.keyToValue.set(key, value);
        this.valueToKey.set(value, key);
    }
    get(input) {
        if (typeof input === "number" && this.keyToValue.has(input)) {
            return this.keyToValue.get(input);
        } else if (typeof input === "string" && this.valueToKey.has(input)) {
            return this.valueToKey.get(input);
        } else {
            return undefined;
        }
    }
}

var eventTypes = new BiderectionalMap();
eventTypes.set(0, "undefined");
eventTypes.set(1, "presentation.cursor");
eventTypes.set(2, "whiteboard.cursor");

function rolesKV(key){
	switch(key){
      case 1: return "Admin";
      case 2: return "Pupil";
      default: return "undefined";
    }
};

function rolesVK(value){
	switch(value){
      case "Admin": return 1;
      case "Pupil": return 2;
      default: return 0;
    }
};

var m_atob = get_m_atob();
var m_btoa = get_m_btoa();

function crazyCompressor(cursor){
    /*
    Bytes   Bits    Max Value
      1     8       256                           — Role
      2     16    65,536                        — X and Y
      4     32    4,294,967,296                 — ID
      
      1    + 2 + 2 + 4  +  1    = 10
      Role + X + Y + ID + Type
    */
    const MAX_UINT32_VALUE = 4294967296;
    const buffer = new ArrayBuffer(10);
    const fullView = new DataView(buffer, 0, 10);
  
    const getId = (encodedId) => {
        const extractedId = m_atob(encodedId).match(/([\w:]+)\/([0-9]+)/);
        if (extractedId.length < 3)
            throw new Error("Incorrect id format");
        const [_, role, rawId] = extractedId;
        const id = Number(rawId);
        if (id > MAX_UINT32_VALUE - 1)
            throw new Error("ID is bigger than max uint32 value");
        return [role, id];
    };

    const getXY = (coords) => {
        const { x, y } = coords.tl;
        return [x, y];
    };
    const [role, id] = getId(cursor.data.id);
    const [x, y] = getXY(cursor.data.aCoords);

    fullView.setUint8(0, rolesVK(role));
    fullView.setUint32(1, id);
    fullView.setUint16(5, x);
    fullView.setUint16(7, y);
    fullView.setUint8(9, eventTypes.get(cursor.type));

    return buffer;
};
function crazyDecompressor(buffer){
    const fullView = new DataView(buffer, 0, 10);
 
    return {
        type: eventTypes.get(fullView.getUint8(0)),
        data: {
            id: m_btoa(`gid://stoege/${rolesKV(fullView.getUint8(9))}/${fullView.getUint32(1)}`),
            aCoords: {
                tl: {
                    x: fullView.getUint16(5),
                    y: fullView.getUint16(7)
                }
            }
        }
    };
};


function get_m_atob() {
    const results = new Map();
    return (encodedString) => {
        if (results.has(encodedString))
            return results.get(encodedString);
        results.set(encodedString, atob(encodedString));
        return results.get(encodedString);
    };
}

function get_m_btoa() {
    const results = new Map();
    return (decodedString) => {
        if (results.has(decodedString))
            return results.get(decodedString);
        results.set(decodedString, btoa(decodedString));
        return results.get(decodedString);
    };
}

function JSONCompressor(cursor) {
    return JSON.stringify(cursor);
};

function JSONDecompressor(cursorStr) {
    return JSON.parse(cursorStr);
};

Tests:

ArrayBuffer
const compressed = cursors.map(crazyCompressor); const decompressed = compressed.map(crazyDecompressor);
JSON
const compressed = cursors.map(JSONCompressor); const decompressed = compressed.map(JSONDecompressor);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
ArrayBuffer
JSON

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/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Linux

View result in a separate tab

Test name	Executions per second
ArrayBuffer	4859.1 Ops/sec
JSON	8914.1 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 benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares two methods of compressing and decompressing data: using an `ArrayBuffer` (which is essentially a binary buffer) versus using JSON (JavaScript Object Notation).

**Options Compared**

There are three options compared:

1. **Crazy Compressor**: This function takes a cursor object as input and returns the compressed data in a custom format.
2. **JSON Compressor**: This function takes a cursor object as input and returns the compressed data as a JSON string.
3. **JSON Decompressor**: This function takes a JSON string as input and returns the decompressed cursor object.

**Test Cases**

There are two test cases:

1. **ArrayBuffer**: The first test case uses the Crazy Compressor to compress the data in an `ArrayBuffer`, followed by the Crazy Decompressor to decompress it back into a cursor object.
2. **JSON**: The second test case uses the JSON Compressor to compress the data as a JSON string, followed by the JSON Decompressor to decompress it back into a cursor object.

**What's Being Tested**

The benchmark is testing the performance of these three options:

* Crazy Compressor + Crazy Decompressor (ArrayBuffer)
* JSON Compressor + JSON Decompressor (JSON)

The results will show which option performs better in terms of execution speed per second.

**Key Concepts**

Some key concepts to understand here are:

* **Binary buffers**: An `ArrayBuffer` is a binary buffer that can store a sequence of bytes.
* **JSON**: JavaScript Object Notation is a lightweight data interchange format.
* **Compression and decompression**: The process of reducing the size of data (compressing) and restoring it to its original form (decompressing).

**Implications**

Understanding this benchmark requires knowledge of binary buffers, JSON, and compression algorithms. It's likely that the Crazy Compressor is using a custom algorithm for compressing data in an `ArrayBuffer`, while the JSON Compressor and Decompressor are using built-in JavaScript functions (`JSON.stringify` and `JSON.parse`). The results will help determine which option is faster for this specific use case.

Related benchmarks:

Array Buffer vs JSON (use 1 DataVIew) (version: 1)

Comparing performance of: ArrayBuffer vs JSON

Created: one year ago by: Registered User

Jump to the latest result

ArrayBuffer

JSON

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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