Map versus consts (v10)

Revision 10 of this benchmark created on

Description

same as v9, but storing css.partial tagged templates instead of raw template literals.

Preparation HTML

<script type="module">
import { css } from "https://unpkg.com/@microsoft/fast-element@2.0.0/dist/fast-element.min.js"

globalThis.css = css;

const CustomStatesSetSupported = CSS.supports('selector(:state(g))');

const statesMap = new Map();

globalThis.stateSelector = function stateSelector(state) {
  return (statesMap.get(state) ??
    statesMap
      .set(state, CustomStatesSetSupported ? css.partial`:state(${state})` : css.partial`[state--${state}]`)
      .get(state));
}
</script>

Setup

const fooState = stateSelector('foo');
const barState = stateSelector('bar');
const bazState = stateSelector('baz');

const fooPartial = css.partial`:is(:state(foo), [state--foo])`;
const barPartial = css.partial`:is(:state(bar), [state--bar])`;
const bazPartial = css.partial`:is(:state(baz), [state--baz])`;

Test runner

Ready to run.

Testing in
TestOps/sec
StateSelector
`${stateSelector('foo')}`;
`${stateSelector('bar')}`;
`${stateSelector('baz')}`;
ready
CSS Partial
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
ready
state consts
`${fooState}`;
`${barState}`;
`${bazState}`;
ready
partial consts
`${fooPartial}`;
`${barPartial}`;
`${bazPartial}`;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.