demo-wasm.html


<html>
  <head>
    <title>Demo some wasm</title>
  </head>
  <body>
    <h1>Web assembly demo</h1>
    <div>
      Status: <span id="status"></span><br/>
      Input: <input type="text" id="input" name="input" value="32"/>
          <button onclick="click_ctof();">C to F</button>
          <button onclick="click_ftoc();">F to C</button>
          <button onclick="click_fib();">Fib</button>
          <button onclick="click_fibjs();">Fib (JS)</button>
          <br/>
      Output: <span id="output"></span><br/>
    </div>
    <script src="load.js"></script>
    <script>
      window.onload = () => {
        window.examples_module = load_wasm("examples.wasm", message => {
            document.getElementById("status").innerText = message;
          }
        );
      }
      async function calculate(name) {
        const input = document.getElementById("input"); 
        const output = document.getElementById("output");
        const mod = await examples_module;
        benchmark(() => {
          output.innerText = mod[name](input.value);
        });
      }

      async function click_ctof() {
        calculate("ctof");
      }
      async function click_ftoc() {
        calculate("ftoc");
      }
      async function click_fib() {
        calculate("fib");
      }
      function click_fibjs() {
        const input = document.getElementById("input"); 
        const output = document.getElementById("output");
        benchmark(() => {
          output.innerText = fib(input.value);
        })
      }

      function fib(n) {
        if (n < 2) {
          return 1;
        } else {
          return fib(n-1) + fib(n-2);
        }
      }

      function benchmark(f) {
        const status = document.getElementById("status");
        performance.mark("start");
        f();
        performance.mark("end");
        performance.measure("duration", "start", "end");
        status.innerText = performance.getEntriesByName("duration",
            "measure")[0].duration + "ms";
        performance.clearMarks();
        performance.clearMeasures();
      }
    </script>
  </body>
</html>