Benchmark: js-diff vs deep-diff - Diff creation

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/deep-diff/1.0.2/deep-diff.min.js" integrity="sha512-sKpj+p1Vl1GH12VgyCSFdaz5+yjKfd2z10v2G/l1ZeUNN91hZO2NuzuQeCw8ynaLCdYSXanLEekKRWxeqdXU5Q==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsdiff/4.0.2/diff.min.js" integrity="sha512-pziHjry6XY+CawObjF30gr/WqV3k+7YaBSH3F/YgdJw279osLLT2f2XNFXRb0umygwQPgHJ2vvJoLLLZYj3fzA==" crossorigin="anonymous"></script>

Script Preparation code:

var oldObj = {
  "content": {
    "blocks": {
      "block-0": {
        "id": "block-0",
        "type": "p",
        "leafIds": [
          "leaf-2"
        ]
      },
      "block-1": {
        "id": "block-1",
        "type": "p",
        "leafIds": [
          "leaf-3"
        ]
      }
    },
    "leaves": {
      "leaf-2": {
        "id": "leaf-2",
        "text": "12345"
      },
      "leaf-3": {
        "id": "leaf-3",
        "text": "abcde"
      }
    },
    "blockIds": [
      "block-0",
      "block-1"
    ]
  },
  "selection": {
    "isReversed": false,
    "isCollapsed": true,
    "startEl": "leaf-2",
    "endEl": "leaf-2",
    "startOffset": 12,
    "endOffset": 12
  }
}

var newObj = {
  "content": {
    "blocks": {
      "block-0": {
        "id": "block-0",
        "type": "p",
        "leafIds": [
          "leaf-2"
        ]
      },
      "block-1": {
        "id": "block-1",
        "type": "p",
        "leafIds": [
          "leaf-3"
        ]
      }
    },
    "leaves": {
      "leaf-2": {
        "id": "leaf-2",
        "text": "12345hooba12"
      },
      "leaf-3": {
        "id": "leaf-3",
        "text": "abcde"
      }
    },
    "blockIds": [
      "block-0",
      "block-1"
    ]
  },
  "selection": {
    "isReversed": false,
    "isCollapsed": true,
    "startEl": "leaf-2",
    "endEl": "leaf-2",
    "startOffset": 12,
    "endOffset": 12
  }
}

var serialize = (obj) => JSON.stringify(obj, null, 1)

var oldObjSerialized = serialize(oldObj)

var diffs = []

Tests:

diff
var newObjSerialized = serialize(newObj) var diff = Diff.createPatch('', newObjSerialized, oldObjSerialized, 'a', 'b') diffs.push(diff)
deep-diff
var diff = DeepDiff.diff(newObj, oldObj) diffs.push(diff)
deep-diff serialized
var diff = DeepDiff.diff(newObj, oldObj) diffs.push(JSON.stringify(diff))

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

deep-diff

231K/s

deep-diff serialized

187K/s

diff

86K/s

Fastest: deep-diff (2.7x faster)

View exact numbers

✓ deep-diff: 230,634 ops/sec
• deep-diff serialized: 187,288 ops/sec
• diff: 85,830 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
diff
deep-diff
deep-diff serialized

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.4.1

View result in a separate tab

deep-diff

168K/s

deep-diff serialized

144K/s

diff

64K/s

View exact numbers

Test name	Executions per second
✓ deep-diff	168,431 Ops/sec
deep-diff serialized	143,565 Ops/sec
diff	63,648 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested, compared options, pros/cons of those approaches, and other considerations.

**Benchmark Overview**

The benchmark measures the performance of two diffing libraries: `jsdiff` (also known as "Diff") and `deep-diff`. The test creates two objects (`oldObj` and `newObj`) with similar structures but differing contents. The goal is to find the differences between these two objects.

**Benchmark Definition**

The benchmark consists of three individual test cases, each using a different approach to create a diff:

1. **jsdiff**: Creates a patch using `Diff.createPatch`, which generates a unified diff (a format for comparing text).
2. **deep-diff**: Uses the `diff` function from `deep-diff` to compute the differences between two objects.
3. **deep-diff serialized**: Converts the result of `DeepDiff.diff` to a JSON string before pushing it to an array.

**Comparison Options**

The benchmark compares three approaches:

* **jsdiff (Unified Diff)**: Generates a unified diff, which is a text-based format that represents the differences between two objects.
* **deep-diff**: Computes the differences using a more object-oriented approach, which can be faster and more efficient for complex objects.
* **deep-diff serialized**: Converts the result of `DeepDiff.diff` to a JSON string before pushing it to an array. This approach is likely slower due to the additional serialization step.

**Pros and Cons**

* **jsdiff (Unified Diff)**:
	+ Pros: Simple, widely supported, and easy to implement.
	+ Cons: Can be slow for large objects or complex differences.
* **deep-diff**: Faster and more efficient than `jsdiff` for complex objects. However, it may have a higher overhead due to its object-oriented approach.
* **deep-diff serialized**:
	+ Pros: Allows for easier comparison of results between libraries.
	+ Cons: Slower due to the additional serialization step.

**Other Considerations**

* The benchmark uses `serialize` function to convert objects to strings, which can affect performance. This function is not specific to either library and may impact overall results.
* The test cases use identical object structures for `oldObj` and `newObj`, which simplifies the comparison. However, in real-world scenarios, these objects might have different structures or properties.

**Latest Benchmark Result**

The latest benchmark result shows that:

* **deep-diff** is faster than both `jsdiff` and `deep-diff serialized`.
* The execution rates are relatively high, suggesting that the differences between these libraries are significant but not excessively large.

Keep in mind that this benchmark may not be representative of all use cases or scenarios. It's essential to consider the specific requirements and constraints of your project when choosing a diffing library.

js-diff vs deep-diff - Diff creation (version: 2)

Comparing performance of: `diff vs deep-diff vs deep-diff serialized`

Created: 5 years ago by: Registered User

Go to the latest result

diff

deep-diff

deep-diff serialized

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 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):

js-diff vs deep-diff - Diff creation (version: 2)

Comparing performance of: diff vs deep-diff vs deep-diff serialized

Created: 5 years ago by: Registered User

Go to the latest result

diff

deep-diff

deep-diff serialized

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 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: `diff vs deep-diff vs deep-diff serialized`