Benchmark: StructuredClone vs JSON parse

Script Preparation code:

window.testObject = {
  "clientId": "d4c91d9e-968f-4aac-861a-96d6f00ef182",
  "name": "foundry/query-post-template",
  "isValid": true,
  "originalContent": "",
  "validationIssues": [],
  "attributes": {
    "useFeaturedImageAsBackground": 0,
    "useOverlay": 0,
    "overlayOpacity": 5,
    "postWidth": {
      "all": 4,
      "md": 6,
      "sm": 12
    },
    "gutter": 1,
    "justify": {
      "all": "center"
    },
    "align": {
      "all": "stretch",
      "sm": "start"
    },
    "postPadding": {
      "all": {
        "t": 5,
        "l": 3,
        "r": 3,
        "b": 3
      }
    },
    "background": {
      "color": "",
      "images": false
    },
    "innerJustify": {
      "all": "center"
    },
    "innerAlign": {
      "all": "stretch",
      "sm": "start"
    },
    "boxShadow": "fcp64f75f34cf18b",
    "fndryBlockId": "fndry-block-6616b81d8d606"
  },
  "innerBlocks": [
    {
      "clientId": "e9a0cbde-fc5b-43d6-bb12-7822e4b8daa1",
      "name": "foundry/post-title",
      "isValid": true,
      "originalContent": "",
      "validationIssues": [],
      "attributes": {
        "level": 3,
        "isLink": false,
        "rel": "",
        "linkTarget": "_self",
        "fndryBlockId": "fndry-block-6616b81e8d60d"
      },
      "innerBlocks": []
    },
    {
      "clientId": "82782445-d9d0-4a7d-b724-272ca9b76eb7",
      "name": "foundry/post-date",
      "isValid": true,
      "originalContent": "",
      "validationIssues": [],
      "attributes": {
        "fndryBlockId": "fndry-block-6616b81e8d60e"
      },
      "innerBlocks": []
    },
    {
      "clientId": "1a4197f7-47c0-4f10-bb90-7890baa03f5c",
      "name": "foundry/button",
      "isValid": true,
      "originalContent": "",
      "validationIssues": [],
      "attributes": {
        "newTab": false,
        "noreferrer": false,
        "noopener": false,
        "margin": {
          "all": {
            "t": "auto"
          }
        },
        "minWidth": 200,
        "minHeight": 60,
        "fndryBlockId": "fndry-block-6616b81e8d60f"
      },
      "innerBlocks": []
    }
  ]
}

Tests:

JSON
JSON.parse(JSON.stringify(testObject));
struc
structuredClone(testObject)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
JSON
struc

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:124.0) Gecko/20100101 Firefox/124.0

Browser/OS: Firefox 124 on Windows

View result in a separate tab

Test name	Executions per second
JSON	119262.3 Ops/sec
struc	93155.6 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, compared options, pros and cons, and other considerations.

**Benchmark Definition**

The benchmark is designed to compare two methods of serializing and deserializing JavaScript objects: `structuredClone` and JSON parsing. Specifically, it tests the performance of these two approaches in cloning a complex object graph.

**Options Compared**

Two options are being compared:

1. **JSON Parsing**: This approach uses the built-in `JSON.parse()` function to serialize the object graph to a string, which is then deserialized using another call to `JSON.parse()`. The resulting object graph should be identical to the original.
2. **Structured Clone**: This approach uses the `structuredClone` function (introduced in JavaScript 2020) to clone the object graph. The resulting cloned object graph should be identical to the original.

**Pros and Cons**

Here are some pros and cons of each approach:

* **JSON Parsing**:
	+ Pros: widely supported, easy to implement, and relatively fast.
	+ Cons: can lead to security issues if not used correctly (e.g., deserializing untrusted input), and may not work well with complex data structures.
* **Structured Clone**:
	+ Pros: designed specifically for serializing and deserializing JavaScript objects, ensures memory safety, and is relatively fast.
	+ Cons: only available in modern browsers that support ECMAScript 2020 or later.

**Other Considerations**

* The benchmark uses a complex object graph with multiple nested properties and arrays to simulate real-world scenarios.
* The test cases are identical for both approaches, ensuring a fair comparison of their performance.
* The benchmark results show the number of executions per second for each browser and device platform.

**Library and Special JS Feature**

In this benchmark, no specific library is used beyond the built-in `JSON.parse()` function. However, the use of `structuredClone` relies on a new JavaScript feature introduced in ECMAScript 2020.

**Alternatives**

If you want to test alternative serialization formats or methods, you could consider using:

* **XML**: Another widely supported serialization format that can be used for deserialization.
* **Binary Serialization**: Using libraries like `lz-string` or `base64` to serialize objects in binary format, which may offer better performance than JSON parsing for large datasets.
* **Custom Serialization Methods**: Implementing custom serialization and deserialization methods using JavaScript functions or other approaches (e.g., using a library like ` serializationjs`).

Keep in mind that each alternative will introduce new variables to consider, such as compatibility with different browsers, implementation complexity, and performance trade-offs.

Related benchmarks:

StructuredClone vs JSON parse (version: 0)

Comparing performance of: JSON vs struc

Created: 2 years ago by: Guest

Jump to the latest result

JSON

struc

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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