Übung 11 - WebAssembly

11.1 - WebAssembly-Modul von Hand erstellen

 gcd.wat
                                
    (module
    (export "gcd" (func $gcd))
    (func $gcd (param $a i32) (param $b i32) (result i32) (local $temp i32)
    local.get $a
    i32.eqz
    if
        local.get $b
        return
    end
    local.get $b
    i32.eqz
    if
        local.get $a
        return
    end
    loop $do
    get_local $a
    get_local $b
    i32.rem_s
    set_local $temp

    get_local $b
    set_local $a

    get_local $temp
    set_local $b

    i32.const 0
    get_local $b
    i32.ne
    br_if $do
    end

        local.get $a
    ))
                                
 gcd.html
                                
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>GCD</title>
    </head>
    <body>
    <h1>Open the console to see results.</h1>
    <button onClick="fetchAndInstantiate()">Start</button>
    </body>
    <script>
        async function fetchAndInstantiate(){
            const response = await fetch("gcd.wasm")
            const buffer = await response.arrayBuffer();
            const wasm = await WebAssembly.instantiate(buffer);
            const gcd = wasm.instance.exports.gcd;
            for(let i=1; i<=100; i++){
                for(let j=1; j<=100; j++){
                    console.log("GCD of " + i + " and "+ j + ": " + gcd(i,j))
                }
            }
        }
    </script>
    </html>

11.2 - Performanz-Messungen und -Vergleich

Bis 100.000 gibt es 9592 Primzahlen.

Benchmark

Against my expectations, the JavaScript variant is a lot faster than the WebAssembly variant. Since WASM is closer to the hardware and doesn't have to be interpreted, I expected it to be faster. However, unlike JavaScript, it can't apply improvements (while compiling).

                        
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Sora&display=swap" rel="stylesheet">
        <style>
            body {
                font-family: 'Sora', serif;
            }
        </style>

    </head>
    <body>
    <h1>Benchmark - Both methods are executed 10 times for measurement.</h1>
    <h3 style="color: red">Execution takes some time.</h3>
    <button id="button">Start</button>
    <div style="display: flex">
        <div style="width: 25%">
            <h2>WebAssembly</h2>
            <ol id="walist">
            </ol>
            <div id="wares"></div>
        </div>
        <div style="width: 25%">
            <h2>JavaScript</h2>
            <ol id="jslist"></ol>
            <div id="jsres"></div>
        </div>
    </div>
    <p id="p"></p>
    <script type="module">
        import {wasmInstance} from './prime.mjs';
        import {countPrimes} from './prime.js'

        const prime = wasmInstance.exports.main;

        let watimes = [];
        let jstimes = [];

        let button = document.getElementById("button");
        button.addEventListener('click', async () => {
            await funky("wa");
            await funky("js");
            document.getElementById("p").innerHTML += `Executing with JavaScript is around <b>${Math.round(avg(watimes) / avg(jstimes))}%</b> faster than with WebAssembly.`
        })

        function funky(name) {
            return new Promise((resolve => {
                let times = [];
                let i = 0;
                const step = () => {
                    let start = Date.now();
                    name === "js" ? countPrimes(100000) : prime();
                    let end = Date.now() - start;
                    times.push(end)
                    document.getElementById(name + "list").innerHTML += (`<li>${end} ms</li>`);
                    i++;
                    if (i < 10) {
                        window.requestAnimationFrame(step);
                    } else {
                        document.getElementById(name + "res").innerHTML += `min: ${Math.min(...times)}, \n max: ${Math.max(...times)},\n avg: ${avg(times)}`
                        name==="wa" ? watimes = times : jstimes = times;
                        resolve(times);
                    }
                }
                window.requestAnimationFrame(step);
            }))
        }

        // Based on answer from ChaosPandion on stackoverflow https://stackoverflow.com/a/3762623/15212696
        function avg(array) {
            return array.reduce((pv, cv) => pv + cv, 0) / array.length;
        }

    </script>

    </body>
    </html>

Javascript

                                
    // based on stackoverflow answer from Ted Hopp https://stackoverflow.com/a/12287599/15212696
    function countPrimes(max) {
        let sieve = [], i, j;
        let numbers=0;
        for (i = 2; i <= max; ++i) {
            if (!sieve[i]) {
                numbers++;
                for (j = i << 1; j <= max; j += i) {
                    sieve[j] = true;
                }
            }
        }
        return numbers;
    }
    console.log(countPrimes(100000))

WAT Code

                    
    (module
     (table 0 anyfunc)
     (memory $0 1)
     (export "memory" (memory $0))
     (export "main" (func $main))
     (func $main (; 0 ;) (result i32)
      (local $0 i32)
      (local $1 i32)
      (local $2 i32)
      (local $3 i32)
      (local $4 i32)
      (set_local $1
       (i32.const 0)
      )
      (set_local $2
       (i32.const 2)
      )
      (set_local $4
       (i32.const 0)
      )
      (loop $label$0
       (set_local $3
        (i32.const 0)
       )
       (block $label$1
        (loop $label$2
         (set_local $0
          (i32.add
           (get_local $3)
           (i32.const 2)
          )
         )
         (block $label$3
          (block $label$4
           (br_if $label$4
            (i32.ne
             (get_local $1)
             (get_local $3)
            )
           )
           (set_local $4
            (i32.add
             (get_local $4)
             (i32.const 1)
            )
           )
           (br $label$3)
          )
          (br_if $label$1
           (i32.eqz
            (i32.rem_s
             (get_local $2)
             (get_local $0)
            )
           )
          )
         )
         (set_local $3
          (i32.add
           (get_local $3)
           (i32.const 1)
          )
         )
         (br_if $label$2
          (i32.lt_s
           (get_local $0)
           (get_local $2)
          )
         )
        )
       )
       (set_local $1
        (i32.add
         (get_local $1)
         (i32.const 1)
        )
       )
       (br_if $label$0
        (i32.ne
         (tee_local $2
          (i32.add
           (get_local $2)
           (i32.const 1)
          )
         )
         (i32.const 100000)
        )
       )
      )
      (get_local $4)
     )
    )

Higher Language (C)

                    
    int main(void)
    {
        int numbers = 0;
     for (int i=2; i<100000; i++)
     {
      for (int j=2; j<=i; j++)
      {
        if (i == j)
          numbers++;
        else if (i%j == 0)
          break;
      }
     }
    return numbers;
    }