Benchmark: Merge class styles

Script Preparation code:

styles = { foo: 'class-styles', bar: 'class-styles-2', baz: 'class-styles-3' };
theme = { foo: 'class-theme', bar: 'class-theme-2' };
proxyJoin = new Proxy({}, {
  get: (_, key) => [styles[key], theme?.[key]].join(' ')
});
proxyTplt = new Proxy({}, {
  get: (_, key) => `${styles[key]} ${theme?.[key] ?? ''}`
});
functJoin = (key) => [styles[key], theme?.[key]].join(' ');
functTplt = (key) => `${styles[key]} ${theme?.[key] ?? ''}`;

Tests:

Array join
[styles.bar, theme?.bar].join(' ')
String template
`${styles.bar} ${theme?.bar ?? ''}`
Proxy array join
proxyJoin.bar
Proxy string template
proxyTplt.bar
Function array join
functJoin('bar')
Function string template
functTplt('bar')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array join
String template
Proxy array join
Proxy string template
Function array join
Function string template

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36

Browser/OS: Chrome 115 on Linux

View result in a separate tab

Test name	Executions per second
Array join	4305126.5 Ops/sec
String template	5619879.5 Ops/sec
Proxy array join	2844566.2 Ops/sec
Proxy string template	3467425.8 Ops/sec
Function array join	3044238.8 Ops/sec
Function string template	3749788.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The provided JSON represents the benchmark definition for creating and running JavaScript microbenchmarks. Here's a breakdown of what's being tested:

* The script preparation code defines two objects: `styles` and `theme`. These objects contain class styles and theme properties, respectively.
* A proxy object named `proxyJoin` is created using the `Proxy` constructor. It has a `get` trap that returns an array containing the value of the key in `styles` followed by the value of the same key in `theme`, separated by a space. This is similar to concatenating strings.
* Another proxy object named `proxyTplt` is created using the `Proxy` constructor, with a similar `get` trap but returning a string by concatenating the values of `styles[key]` and `theme?.[key]`. The `?? ''` syntax is used for optional chaining, which returns an empty string if `theme.[key]` is null or undefined.
* Two functions, `functJoin` and `functTplt`, are defined. They take a key as input and return an array joined by spaces (similar to `proxyJoin`) or concatenate the values of `styles[key]` and `theme?.[key]` respectively.

**Options Compared**

The benchmark compares four different approaches:

1. **Array join**: Using the `join()` method on an array, like `[styles.bar, theme?.bar].join(' ')`.
2. **String template**: Using template literals with string interpolation, like `${styles.bar} ${theme?.bar ?? ''}`.
3. **Proxy array join**: Using a proxy object's `get` trap to return the concatenated values, like `proxyJoin.bar`.
4. **Proxy string template**: Similar to the previous one but using a function to concatenate values, like `proxyTplt.bar`.

**Pros and Cons**

Here's a brief summary of each approach:

* **Array join**: Simple, straightforward way to concatenate strings. However, it can be slower due to the overhead of creating an array.
* **String template**: More expressive and flexible than array join, but might have performance implications if not used efficiently (e.g., using `?? ''` for default values).
* **Proxy array join**: Can be faster since it avoids the overhead of concatenating strings at runtime. However, the proxy object creation might introduce additional overhead.
* **Proxy string template**: Similar to string template, but uses a function to concatenate values, which can lead to more efficient caching and reuse.

**Other Considerations**

* **Browser Support**: All four approaches are likely supported by modern browsers, but it's essential to ensure compatibility across different versions and platforms.
* **Code Readability**: The proxy approach might be less readable due to the complex proxy object creation. However, this can also lead to more efficient code.

**Libraries and Special JS Features**

There is no specific library being used in this benchmark. However, it does utilize optional chaining (`?.`) introduced in ECMAScript 2020.

Now that we've explored the benchmark definition, let's look at some potential alternatives:

* **Regular expression concatenation**: Using regular expressions to concatenate strings can be a viable alternative to array join or string templates.
* **Using `String.prototype.split()` and `Array.prototype.join()`**: These methods are widely supported and can provide a simple way to concatenate strings.

Keep in mind that these alternatives might not offer the same performance benefits as the original benchmark, but they could provide an interesting comparison.

Related benchmarks:

Merge class styles (version: 0)

Comparing performance of: Array join vs String template vs Proxy array join vs Proxy string template vs Function array join vs Function string template

Created: one year ago by: Guest

Jump to the latest result

Array join

String template

Proxy array join

Proxy string template

Function array join

Function string template

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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