benchmark-array-includes-vs-regex.html

---
title: "Benchmark Array#includes vs RegExp literal &
instance"
layout: example.njk
scripts:
- url: https://unpkg.com/lodash@4.17.15/lodash.js
- url: https://unpkg.com/benchmark@2.1.4/benchmark.js
---

<div x-data="page()" class="flex flex-col w-full">
  <div class="flex flex-row w-full align-start">
    <button
      @click="run()"
      class="flex bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
    >
      Start Benchmark
    </button>
    <div class="flex py-2 px-4">
      Status:&nbsp;
      <template x-if="isRunning">
        <label>Running</label>
      </template>
      <template x-if="!isRunning && !message">
        <label>Ready</label>
      </template>
      <template x-if="!isRunning && message">
        <label>Completed</label>
      </template>
    </div>
  </div>
  <ul>
    <template x-for="entry in output" :key="entry">
      <li x-text="entry"></li>
    </template>
  </ul>
  <template x-if="message">
    <div class="block mt-20 p-4 border border-solid border-gray-500 rounded">
      <h3 class="font-semibold">Summary</h3>
      <div x-text="message"></div>
    </div>
  </template>
  <script>
    function page() {
      const array = [
        "allowfullscreen",
        "allowpaymentrequest",
        "async",
        "autofocus",
        "autoplay",
        "checked",
        "controls",
        "default",
        "defer",
        "disabled",
        "formnovalidate",
        "hidden",
        "ismap",
        "itemscope",
        "loop",
        "multiple",
        "muted",
        "nomodule",
        "novalidate",
        "open",
        "readonly",
        "required",
        "reversed",
        "selected",
        "typemustmatch",
      ];
      const regex = new RegExp(array.join("|"));
      const literalRegex = /allowfullscreen|allowpaymentrequest|async|autofocus|autoplay|checked|controls|default|defer|disabled|formnovalidate|hidden|ismap|itemscope|loop|multiple|muted|nomodule|novalidate|open|readonly|required|reversed|selected|typemustmatch/;
      // add tests
      const match = "hidden";
      const noMatch = "class";

      const suite = new Benchmark.Suite();
      suite
        .add("RegExpInstance#test - match", function () {
          regex.test(match);
        })
        .add("Array#includes - match", function () {
          array.includes(match);
        })
        .add("RegExpLiteral#test - match", function () {
          literalRegex.test(match);
        })
        .add("RegExpInstance#test - no match", function () {
          regex.test(noMatch);
        })
        .add("Array#includes - no match", function () {
          array.includes(noMatch);
        })
        .add("RegExpInstance#test - no match", function () {
          literalRegex.test(noMatch);
        });

      return {
        isRunning: false,
        message: "",
        output: [],
        suite,
        tests: suite.map((t) => t.name),
        run() {
          // cache Alpine instance under $vm (Vue.js instance).
          const $vm = this;
          // reset
          this.message = "";
          this.output = [];
          // set to "running"
          this.isRunning = true;
          this.suite
            .on("cycle", function (event) {
              $vm.output = [...$vm.output, String(event.target)];
            })
            .on("complete", function () {
              $vm.message = `Fastest is ${this.filter("fastest").map(
                "name"
              )}\nSlowest is ${this.filter("slowest").map("name")}`;
              $vm.isRunning = false;
            })
            .run({ async: true });
        },
      };
    }
  </script>
</div>