Benchmark: Merging blazing fast 2

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/deepmerge@4.1.1/dist/umd.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

const teamsTheme = {
    root: props => ({
      display: "flex",
      ...(props.open && { flexDirection: "columns" })
    }),
    icon: () => ({
      display: "block"
    }),
    content: () => ({
      display: "inline-block"
    })
  };
  
  const teamsDarkTheme = {
    root: props => ({
      display: "grid"
    })
  };
  
  const teamsConstrastTheme = {
    root: props => ({
      display: "inline-grid"
    })
  };
  
  //
  //
  //
  
  const callable = possibleFunction => (...args) => {
    return typeof possibleFunction === "function"
      ? possibleFunction(...args)
      : possibleFunction;
  };
  
  const mergeComponentStyles = (...sources) => {
    const initial = {};
  
    return sources.reduce((partStylesPrepared, stylesByPart) => {
      _.forEach(stylesByPart, (partStyle, partName) => {
        // Break references to avoid an infinite loop.
        // We are replacing functions with a new ones that calls the originals.
        const originalTarget = partStylesPrepared[partName];
        const originalSource = partStyle;
  
        partStylesPrepared[partName] = styleParam => {
          return _.merge(
            callable(originalTarget)(styleParam),
            callable(originalSource)(styleParam)
          );
        };
      });
  
      return partStylesPrepared;
    }, initial);
  };
  
  const mergeComponentStylesDeepMerge = (...sources) => {
    const initial = {};
  
    return sources.reduce((partStylesPrepared, stylesByPart) => {
      _.forEach(stylesByPart, (partStyle, partName) => {
        // Break references to avoid an infinite loop.
        // We are replacing functions with a new ones that calls the originals.
        const originalTarget = partStylesPrepared[partName];
        const originalSource = partStyle;
  
        partStylesPrepared[partName] = styleParam => {
          return deepmerge(
            callable(originalTarget)(styleParam),
            callable(originalSource)(styleParam)
          );
        };
      });
  
      return partStylesPrepared;
    }, initial);
  };
  
  const mergeComponentStylesWithoutEmptyFrames = (...sources) => {
    const initial = {};
  
    return sources.reduce((partStylesPrepared, stylesByPart) => {
      _.forEach(stylesByPart, (partStyle, partName) => {
        // Break references to avoid an infinite loop.
        // We are replacing functions with a new ones that calls the originals.
        const originalTarget = partStylesPrepared[partName];
        const originalSource = partStyle;
  
        if (originalTarget && originalSource) {
          partStylesPrepared[partName] = styleParam => {
            return _.merge(
              callable(originalTarget)(styleParam),
              callable(originalSource)(styleParam)
            );
          };
        }
  
        if (originalTarget) {
          partStylesPrepared[partName] = callable(originalTarget);
        }
  
        if (originalSource) {
          partStylesPrepared[partName] = callable(originalSource);
        }
      });
  
      return partStylesPrepared;
    }, initial);
  };
  
  var resolveStyles = (styles, props) => {
    if (styles.length === 1) {
      return styles[0](props);
    }
  
    const resolvedStyles = [];
    styles.forEach(styleFn => resolvedStyles.push(styleFn(props)));
  
    return _.merge(...resolvedStyles);
  };
  
  //
  //
  //
  
  var mergedTheme = mergeComponentStyles(
    teamsTheme,
    teamsDarkTheme,
    teamsConstrastTheme
  );
  
  var mergedThemeDeepMerge = mergeComponentStylesDeepMerge(
    teamsTheme,
    teamsDarkTheme,
    teamsConstrastTheme
  );
  
  var mergedThemeCompact = mergeComponentStylesWithoutEmptyFrames(
    teamsTheme,
    teamsDarkTheme,
    teamsConstrastTheme
  );
  
  var flattenTheme = {
    root: [teamsTheme.root, teamsDarkTheme.root, teamsConstrastTheme.root],
    icon: [teamsTheme.icon],
    content: [teamsTheme.content]
  };
  
  var props = {};

Tests:

Original
const styles = { root: mergedTheme.root(props), icon: mergedTheme.icon(props), content: mergedTheme.content(props) }
Compact
const styles = { root: mergedThemeCompact.root(props), icon: mergedThemeCompact.icon(props), content: mergedThemeCompact.content(props) }
Flatten
const styles = { root: resolveStyles(flattenTheme.root, props), icon: resolveStyles(flattenTheme.icon, props), content: resolveStyles(flattenTheme.content, props) }
deepmerge on original
const styles = { root: mergedThemeDeepMerge.root(props), icon: mergedThemeDeepMerge.icon(props), content: mergedThemeDeepMerge.content(props) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Original
Compact
Flatten
deepmerge on original

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

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

Browser/OS: Chrome 77 on Windows

View result in a separate tab

Test name	Executions per second
Original	349110.0 Ops/sec
Compact	2092384.0 Ops/sec
Flatten	702644.5 Ops/sec
deepmerge on original	237840.8 Ops/sec

Merging blazing fast 2 (version: 1)

Comparing performance of: Original vs Compact vs Flatten vs deepmerge on original

Created: 4 years ago by: Registered User

Jump to the latest result

Original

Compact

Flatten

deepmerge on original

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A