Run results for: lodash merge vs deepmerge vs simple clone function (multiple style objects)

Run details:

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

Browser: Chrome 146

Operating system: Windows

Device Platform: Desktop

Date tested: one month ago

Test name	Executions per second
lodash merge	225487.1 Ops/sec
deepmerge.all	173415.3 Ops/sec
simpleDeepClone	753415.4 Ops/sec

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>
<script src='https://unpkg.com/deepmerge@4.3.1/dist/umd.js'></script>

Script Preparation code:

const objects = [
  {},
  {
    color: "rgb(25, 67, 50)",
    width: "134.391px",
    height: "36px",
    fontSize: "34px",
    fontStyle: "normal",
    textAlign: "center",
    fontFamily: "Avenir",
    fontWeight: "bold",
    lineHeight: "36px",
    letterSpacing: "0em",
    textDecoration: "none",
    textAlignLast: "center",
    flexShrink: 0,
    flexBasis: "auto",
    overflowY: "hidden",
    transition: "inherit",
    "&:hover": {
      color: "#ccc",
      width: "130px",
      height: "50px",
    },
    "@media (max-width: 640px)": {
      textAlignLast: "center",
      flexShrink: 0,
      flexBasis: "auto",
      overflowY: "hidden",
      transition: "inherit",
      "&:hover": {
        color: "#ddd",
        width: "160px",
        height: "60px",
        flexShrink: 1,
      },
    },
    "@media (min-width: 641px) and (max-width: 820px)": {
      textAlignLast: "center",
      flexShrink: 0,
      flexBasis: "auto",
      overflowY: "hidden",
      transition: "inherit",
    },
  },
  {
    overflowWrap: "break-word",
    "&:hover": {
      color: "#fff",
    },
    "@media (max-width: 640px)": {
      color: "green",
      flexShrink: 1,
      "&:hover": {
        color: "#cecece",
        flexShrink: 0,
        gap: "5px",
      },
    },
    "@media (min-width: 641px) and (max-width: 820px)": {
      fontStyle: "italic",
      textAlignLast: "both",
    },
  },
];

window.OBJECTS = objects;
window.simpleDeepClone = simpleDeepClone;

function simpleDeepClone(...objects) {
  return objects.reduce((acc, obj) => {
    for (const key in obj) {
      const value = obj[key];
      if (typeof value === "object" && value !== null) {
        acc[key] = simpleDeepClone(acc[key] || {}, value);
      } else {
        acc[key] = value;
      }
    }
    return acc;
  }, {});
}

Tests:

lodash merge
_.merge({}, ...OBJECTS);
deepmerge.all
deepmerge.all([{}, ...OBJECTS]);
simpleDeepClone
simpleDeepClone(...OBJECTS);

Run results for: lodash merge vs deepmerge vs simple clone function (multiple style objects)

lodash merge

deepmerge.all

simpleDeepClone