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

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):

LLMs can make mistakes. Check important info.

It seems like you're analyzing a benchmarking report for JavaScript theme merging and rendering.

Based on the provided data, here are my observations:

1. **Benchmark Test Cases**: There are four test cases, each with a unique name (Original, Compact, Flatten, and "deepmerge on original").
2. **Browser Information**: The raw UA string indicates that all tests were run in Chrome 77 on Windows 10.
3. **Device Platform**: All tests were executed on desktop devices.
4. **Operating System**: All tests were executed on Windows operating systems.
5. **Executions Per Second (EPS)**:
	* Original: 349,110
	* Compact: 2,096,383
	* Flatten: 702,644
	* "deepmerge on original": 237,840
6. **Test Performance**:
	* The order of the tests from fastest to slowest is Compact > Flatten > deepmerge on original > Original.
7. **Conclusion**: Based on the EPS values, the most efficient way to render themes appears to be using the "Compact" approach.

Please let me know if you'd like me to help with anything else!

Latest run results:

Run details: (Test run date: 5 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	2092383.8 Ops/sec
Flatten	702644.5 Ops/sec
deepmerge on original	237840.8 Ops/sec

Related benchmarks:

Merging blazing fast 2 (version: 1)

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

Created: 5 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

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):