Benchmark: Lodash.isEqual vs JSON.stringify Equality Comparison for More Complicated Arrays

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

Script Preparation code:

// Benchmark test data for JSON.stringify vs deep equality
// 10 objects with realistic fills, strokes, and blur arrays

window.testFramesFills1 = [
  [
    {
      fill: "#FF5733",
      type: "SOLID",
      blendMode: "normal",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FIT",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 255, g: 87, b: 51, a: 1 }
    }
  ],
  [
    {
      fill: "linear-gradient(90deg, #FF5733 0%, #33FF57 100%)",
      type: "GRADIENT_LINEAR",
      blendMode: "normal",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FIT",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 255, g: 87, b: 51, a: 1 },
      stops: [
        { position: 0, color: { r: 255, g: 87, b: 51, a: 1 } },
        { position: 1, color: { r: 51, g: 255, b: 87, a: 1 } }
      ],
      start: [0, 0],
      end: [100, 0]
    }
  ],
  [
    {
      fill: "#3357FF",
      type: "SOLID",
      blendMode: "multiply",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "CROP",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 51, g: 87, b: 255, a: 0.8 }
    }
  ],
  [
    {
      fill: "https://example.com/texture.jpg",
      type: "IMAGE",
      blendMode: "normal",
      visible: true,
      imgUrl: "https://example.com/texture.jpg",
      scaleFactor: 1.5,
      scaleMode: "TILE",
      uvTransform: { a: 1.5, b: 0, c: 0, d: 1.5, tx: 10, ty: 10 },
      color: { r: 255, g: 255, b: 255, a: 1 }
    }
  ],
  [
    {
      fill: "radial-gradient(circle, #FF5733 0%, #33FF57 50%, #3357FF 100%)",
      type: "GRADIENT_RADIAL",
      blendMode: "screen",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FIT",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 255, g: 87, b: 51, a: 1 },
      stops: [
        { position: 0, color: { r: 255, g: 87, b: 51, a: 1 } },
        { position: 0.5, color: { r: 51, g: 255, b: 87, a: 1 } },
        { position: 1, color: { r: 51, g: 87, b: 255, a: 1 } }
      ]
    }
  ],
  [
    {
      fill: "#FFFF33",
      type: "SOLID",
      blendMode: "overlay",
      visible: false,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FIT",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 255, g: 255, b: 51, a: 0.6 }
    }
  ],
  [
    {
      fill: "#33FFFF",
      type: "SOLID",
      blendMode: "normal",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FILL",
      uvTransform: { a: 2, b: 0.5, c: -0.5, d: 2, tx: 20, ty: -10 },
      color: { r: 51, g: 255, b: 255, a: 1 }
    }
  ],
  [
    {
      fill: "#FF33FF",
      type: "SOLID",
      blendMode: "difference",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FIT",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 255, g: 51, b: 255, a: 0.9 }
    }
  ],
  [
    {
      fill: "https://example.com/pattern.png",
      type: "IMAGE",
      blendMode: "normal",
      visible: true,
      imgUrl: "https://example.com/pattern.png",
      scaleFactor: 0.5,
      scaleMode: "CROP",
      uvTransform: { a: 0.5, b: 0, c: 0, d: 0.5, tx: 5, ty: 5 },
      color: { r: 255, g: 255, b: 255, a: 1 }
    }
  ],
  [
    {
      fill: "#000000",
      type: "SOLID",
      blendMode: "normal",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FIT",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 0, g: 0, b: 0, a: 1 }
    }
  ]
];

window.testFramesFills2 = [
  [
    {
      fill: "#FF5733",
      type: "SOLID",
      blendMode: "normal",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FIT",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 255, g: 87, b: 51, a: 1 }
    }
  ],
  [
    {
      fill: "linear-gradient(90deg, #FF5733 0%, #33FF57 100%)",
      type: "GRADIENT_LINEAR",
      blendMode: "normal",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FIT",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 255, g: 87, b: 51, a: 1 },
      stops: [
        { position: 0, color: { r: 255, g: 87, b: 51, a: 1 } },
        { position: 1, color: { r: 51, g: 255, b: 87, a: 1 } }
      ],
      start: [0, 0],
      end: [100, 0]
    }
  ],
  [
    {
      fill: "#3357FF",
      type: "SOLID",
      blendMode: "multiply",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "CROP",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 51, g: 87, b: 255, a: 0.8 }
    }
  ],
  [
    {
      fill: "https://example.com/texture.jpg",
      type: "IMAGE",
      blendMode: "normal",
      visible: true,
      imgUrl: "https://example.com/texture.jpg",
      scaleFactor: 1.5,
      scaleMode: "TILE",
      uvTransform: { a: 1.5, b: 0, c: 0, d: 1.5, tx: 10, ty: 10 },
      color: { r: 255, g: 255, b: 255, a: 1 }
    }
  ],
  [
    {
      fill: "radial-gradient(circle, #FF5733 0%, #33FF57 50%, #3357FF 100%)",
      type: "GRADIENT_RADIAL",
      blendMode: "screen",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FIT",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 255, g: 87, b: 51, a: 1 },
      stops: [
        { position: 0, color: { r: 255, g: 87, b: 51, a: 1 } },
        { position: 0.5, color: { r: 51, g: 255, b: 87, a: 1 } },
        { position: 1, color: { r: 51, g: 87, b: 255, a: 1 } }
      ]
    }
  ],
  [
    {
      fill: "#FFFF33",
      type: "SOLID",
      blendMode: "overlay",
      visible: false,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FIT",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 255, g: 255, b: 51, a: 0.6 }
    }
  ],
  [
    {
      fill: "#33FFFF",
      type: "SOLID",
      blendMode: "normal",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FILL",
      uvTransform: { a: 2, b: 0.5, c: -0.5, d: 2, tx: 20, ty: -10 },
      color: { r: 51, g: 255, b: 255, a: 1 }
    }
  ],
  [
    {
      fill: "#FF33FF",
      type: "SOLID",
      blendMode: "difference",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FIT",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 255, g: 51, b: 255, a: 0.9 }
    }
  ],
  [
    {
      fill: "https://example.com/pattern.png",
      type: "IMAGE",
      blendMode: "normal",
      visible: true,
      imgUrl: "https://example.com/pattern.png",
      scaleFactor: 0.5,
      scaleMode: "CROP",
      uvTransform: { a: 0.5, b: 0, c: 0, d: 0.5, tx: 5, ty: 5 },
      color: { r: 255, g: 255, b: 255, a: 1 }
    }
  ],
  [
    {
      fill: "#000000",
      type: "SOLID",
      blendMode: "normal",
      visible: true,
      imgUrl: "",
      scaleFactor: 1,
      scaleMode: "FIT",
      uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
      color: { r: 0, g: 0, b: 0, a: 1 }
    }
  ]
];

window.testFramesStrokes1 = [
  [
    {
      line_cap: "round",
      line_join: "round",
      miter_limit: 4,
      position: "center",
      width: 2,
      fill: {
        fill: "#FF0000",
        type: "SOLID",
        blendMode: "normal",
        visible: true,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 255, g: 0, b: 0, a: 1 }
      },
      visible: true
    }
  ],
  [
    {
      line_cap: "square",
      line_join: "miter",
      miter_limit: 10,
      position: "inside",
      width: 4,
      fill: {
        fill: "#00FF00",
        type: "SOLID",
        blendMode: "normal",
        visible: true,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 0, g: 255, b: 0, a: 1 }
      },
      visible: true
    }
  ],
  [
    {
      line_cap: "butt",
      line_join: "bevel",
      miter_limit: 2,
      position: "outside",
      width: 1,
      fill: {
        fill: "#0000FF",
        type: "SOLID",
        blendMode: "normal",
        visible: false,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 0, g: 0, b: 255, a: 1 }
      },
      visible: false
    }
  ],
  [
    {
      line_cap: "round",
      line_join: "round",
      miter_limit: 8,
      position: "center",
      width: 3,
      fill: {
        fill: "#FFFF00",
        type: "SOLID",
        blendMode: "multiply",
        visible: true,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 255, g: 255, b: 0, a: 0.8 }
      },
      visible: true
    }
  ],
  [
    {
      line_cap: "square",
      line_join: "miter",
      miter_limit: 4,
      position: "inside",
      width: 5,
      fill: {
        fill: "#FF00FF",
        type: "SOLID",
        blendMode: "normal",
        visible: true,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 255, g: 0, b: 255, a: 1 }
      },
      visible: true
    }
  ],
  [],
  [
    {
      line_cap: "butt",
      line_join: "round",
      miter_limit: 6,
      position: "outside",
      width: 2,
      fill: {
        fill: "#00FFFF",
        type: "SOLID",
        blendMode: "screen",
        visible: true,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 0, g: 255, b: 255, a: 1 }
      },
      visible: true
    }
  ],
  [],
  [
    {
      line_cap: "round",
      line_join: "bevel",
      miter_limit: 4,
      position: "center",
      width: 1,
      fill: {
        fill: "#808080",
        type: "SOLID",
        blendMode: "normal",
        visible: true,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 128, g: 128, b: 128, a: 1 }
      },
      visible: true
    }
  ],
  []
];

window.testFramesStrokes2 = [
  [
    {
      line_cap: "round",
      line_join: "round",
      miter_limit: 4,
      position: "center",
      width: 2,
      fill: {
        fill: "#FF0000",
        type: "SOLID",
        blendMode: "normal",
        visible: true,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 255, g: 0, b: 0, a: 1 }
      },
      visible: true
    }
  ],
  [
    {
      line_cap: "square",
      line_join: "miter",
      miter_limit: 10,
      position: "inside",
      width: 4,
      fill: {
        fill: "#00FF00",
        type: "SOLID",
        blendMode: "normal",
        visible: true,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 0, g: 255, b: 0, a: 1 }
      },
      visible: true
    }
  ],
  [
    {
      line_cap: "butt",
      line_join: "bevel",
      miter_limit: 2,
      position: "outside",
      width: 1,
      fill: {
        fill: "#0000FF",
        type: "SOLID",
        blendMode: "normal",
        visible: false,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 0, g: 0, b: 255, a: 1 }
      },
      visible: false
    }
  ],
  [
    {
      line_cap: "round",
      line_join: "round",
      miter_limit: 8,
      position: "center",
      width: 3,
      fill: {
        fill: "#FFFF00",
        type: "SOLID",
        blendMode: "multiply",
        visible: true,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 255, g: 255, b: 0, a: 0.8 }
      },
      visible: true
    }
  ],
  [
    {
      line_cap: "square",
      line_join: "miter",
      miter_limit: 4,
      position: "inside",
      width: 5,
      fill: {
        fill: "#FF00FF",
        type: "SOLID",
        blendMode: "normal",
        visible: true,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 255, g: 0, b: 255, a: 1 }
      },
      visible: true
    }
  ],
  [],
  [
    {
      line_cap: "butt",
      line_join: "round",
      miter_limit: 6,
      position: "outside",
      width: 2,
      fill: {
        fill: "#00FFFF",
        type: "SOLID",
        blendMode: "screen",
        visible: true,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 0, g: 255, b: 255, a: 1 }
      },
      visible: true
    }
  ],
  [],
  [
    {
      line_cap: "round",
      line_join: "bevel",
      miter_limit: 4,
      position: "center",
      width: 1,
      fill: {
        fill: "#808080",
        type: "SOLID",
        blendMode: "normal",
        visible: true,
        imgUrl: "",
        scaleFactor: 1,
        scaleMode: "FIT",
        uvTransform: { a: 1, b: 0, c: 0, d: 1, tx: 0, ty: 0 },
        color: { r: 128, g: 128, b: 128, a: 1 }
      },
      visible: true
    }
  ],
  []
];

window.testFramesBlur1 = [
  [{ target: "self", radius: 5, alpha: 0.8, sigma: 2.5 }],
  [{ target: "self", radius: 10, alpha: 1, sigma: 5 }],
  [],
  [{ target: "self", radius: 2, alpha: 0.6, sigma: 1 }],
  [{ target: "self", radius: 15, alpha: 0.9, sigma: 7.5 }],
  [{ target: "self", radius: 8, alpha: 0.7, sigma: 4 }],
  [],
  [{ target: "self", radius: 3, alpha: 0.5, sigma: 1.5 }],
  [{ target: "self", radius: 12, alpha: 0.85, sigma: 6 }],
  []
];

window.testFramesBlur2 = [
  [{ target: "self", radius: 5, alpha: 0.8, sigma: 2.5 }],
  [{ target: "self", radius: 10, alpha: 1, sigma: 5 }],
  [],
  [{ target: "self", radius: 2, alpha: 0.6, sigma: 1 }],
  [{ target: "self", radius: 15, alpha: 0.9, sigma: 7.5 }],
  [{ target: "self", radius: 8, alpha: 0.7, sigma: 4 }],
  [],
  [{ target: "self", radius: 3, alpha: 0.5, sigma: 1.5 }],
  [{ target: "self", radius: 12, alpha: 0.85, sigma: 6 }],
  []
];

Tests:

_.isEqual
const fillsEqual = _.isEqual(window.testFramesFills1[0], window.testFramesFills2[0]); const strokesEqual = _.isEqual(window.testFramesStrokes1[0], window.testFramesStrokes2[0]); const blurEqual = _.isEqual(window.testFramesBlur1[0], window.testFramesBlur2[0]); console.log(fillsEqual, strokesEqual, blurEqual);
JSON.stringify
const fillsEqual = JSON.stringify(window.testFramesFills1[0]) === JSON.stringify(window.testFramesFills2[0]); const strokesEqual = JSON.stringify(window.testFramesStrokes1[0]) === JSON.stringify(window.testFramesStrokes2[0]); const blurEqual = JSON.stringify(window.testFramesBlur1[0]) === JSON.stringify(window.testFramesBlur2[0]); console.log(fillsEqual, strokesEqual, blurEqual);
JSON.stringify with sorted keys
const sortedStringify = (obj) => JSON.stringify(obj, Object.keys(obj || {}).sort()); const fillsEqual = sortedStringify(window.testFramesFills1[0]) === sortedStringify(window.testFramesFills2[0]); const strokesEqual = sortedStringify(window.testFramesStrokes1[0]) === sortedStringify(window.testFramesStrokes2[0]); const blurEqual = sortedStringify(window.testFramesBlur1[0]) === sortedStringify(window.testFramesBlur2[0]); console.log(fillsEqual, strokesEqual, blurEqual);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
_.isEqual
JSON.stringify
JSON.stringify with sorted keys

Lodash.isEqual vs JSON.stringify Equality Comparison for More Complicated Arrays (version: 1)

Test on isEqual performance

Comparing performance of: _.isEqual vs JSON.stringify vs JSON.stringify with sorted keys

Created: 10 months ago by: Guest

Jump to the latest result

_.isEqual

JSON.stringify

JSON.stringify with sorted keys

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results