Event listener performance

index.html

<!-- To run this benchmark open this HTML file for these 3 different URLs and check out the memory tab in dev tools to compare memory consumption. -->
<!-- file:///<path to html file>.html#static-handler -->
<!-- file:///<path to html file>.html#bound-handler -->
<!-- file:///<path to html file>.html#arrow-handler -->

<script type="module">
  class StaticHandler extends HTMLElement {
    clicks = 0;

    constructor() {
      super();
      this.addEventListener('click', this);
      this.addEventListener('mousedown', this);
      this.addEventListener('mouseup', this);
    }

    handleEvent(e) {
      switch (e.type) {
        case 'click': {
          ++this.clicks;
          return;
        }
        case 'mousedown': {
          return;
        }
        case 'mousedown': {
          return;
        }
      }
    }
  }

  customElements.define('static-handler', StaticHandler);

  class ArrowHandler extends HTMLElement {
    clicks = 0;

    constructor() {
      super();
      this.addEventListener('click', this.onclick);
      this.addEventListener('onmousedown', this.onmousedown);
      this.addEventListener('mouseup', this.mouseup);
    }

    onclick = () => {
      ++this.clicks;
    };

    onmousedown = () => {};

    mouseup = () => {};
  }

  customElements.define('arrow-handler', ArrowHandler);

  class BoundHandler extends HTMLElement {
    clicks = 0;

    constructor() {
      super();
      this.onclick = this.onclick.bind(this);
      this.onmousedown = this.onmousedown.bind(this);
      this.onmouseup = this.onmouseup.bind(this);
      this.addEventListener('click', this.onclick);
      this.addEventListener('onmouseup', this.onmouseup);
    }

    onclick(e) {
      ++this.clicks;
    }

    onmousedown(e) {}

    onmouseup(e) {}
  }

  customElements.define('bound-handler', BoundHandler);

  // Rules
  const benchmark = (name, length = 1000, samples = 5) => {
    let benchName;

    benchName = `new ${name}()`;
    console.time(benchName);
    const fragment = document.createDocumentFragment();
    for (let i = 0; i < length; i++) {
      fragment.appendChild(document.createElement(name));
    }
    console.timeEnd(benchName);

    document.body.appendChild(fragment);

    const children = document.body.children;
    const event = new Event('click');
    benchName = `${name}.dispatchEvent(clickEvent)`;
    console.time(benchName);
    for (let i = 0; i < length; i++) {
      for (let j = 0; j < samples; j++) {
        children[i].dispatchEvent(event);
      }
    }
    console.timeEnd(benchName);

    console.assert(
      children[0].clicks === samples,
      `expected ${length} clicks, got ${children[0].clicks} instead`
    );
  };

  // Race !
  var instances = 10000; // how many instances ?
  var dispatches = 5; // how many dispatches ?
  benchmark(location.hash.slice(1), instances, dispatches);
</script>