Map versus consts (v3)

Revision 3 of this benchmark created on

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 ? `:state(${state})` : `[state--${state}]`)
      .get(state));
}
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
StateSelector
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
stateSelector('foo');
stateSelector('bar');
stateSelector('baz');
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])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
css.partial`:is(:state(foo), [state--foo])`;
css.partial`:is(:state(bar), [state--bar])`;
css.partial`:is(:state(baz), [state--baz])`;
ready

Revisions

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