Run results for: Merge class styles

Run details:

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

Browser: Chrome 115

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

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

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')

Run results for: Merge class styles

Array join

String template

Proxy array join

Proxy string template

Function array join

Function string template