11: WebAssembly

Mehr Programmiersprachen für das Web


Auf dieser Seite

    11.1 WebAssembly-Modul von Hand erstellen

    WAT-Code

        
          
          (module
            (export "ggT" (func $ggT))
            (func $ggT (param $first i32)(param $second i32)(result i32)(local $div i32)
              local.get $first
              i32.eqz
              if
                local.get $second
                return
              end
              local.get $second
              i32.eqz
              if
                local.get $first
                return
              end
              loop $loop
                local.get $first
                local.get $second
                i32.rem_u
                local.set $div
                local.get $second
                local.set $first
                local.get $div
                local.set $second
                local.get $second
                i32.eqz
                if
                  local.get $first
                  return
                end
                br $loop
              end
    
              local.get $first
            )
          )
        
        
      

    Test-Code

        
          
          const response = await fetch('ggt.wasm');
          const buffer = await response.arrayBuffer();
          const wasm = await WebAssembly.instantiate(buffer);
          const ggT = wasm.instance.exports.ggT;
    
          const tbody = document.querySelector('#table > tbody');
    
          const getRandomNumber = () => {
            return Math.floor(Math.random() * 100)
          }
    
          for (let i=0; i < 50; i++) {
            const first = getRandomNumber();
            const second = getRandomNumber();
            const result = ggT(first, second);
    
            const tr = document.createElement('tr');
            tr.innerHTML = `
              ${first} ${second} ${result}
            `;
    
            tbody.appendChild(tr);
          }
        
        
      

    11.2 Performanz-Messungen und -Vergleich

    Wie viele Primzahlen gibt es bis 100.000?

    9593

    JS-Code für Primzahl-Algorithmus

        
          
          const isPrime = number => {
            let prime = true;
    
            for (let i = 2; i < number - 1; i++) {
              if (number % i == 0) {
                prime = false;
                break;
              }
            }
    
            return prime;
          }
    
          const resultDiv = document.querySelector('#result');
          let primes = 0;
    
          const start = Date.now();
          for (let i = 1; i < 100_001; i++) {
            if (isPrime(i)) {
              primes++;
            }
          }
        
        
      

    WAT-Code

    Ich habe den Code in Go geschrieben. Die Go CLI kann direkt zu WASM compilen. Wenn ich dieses File dann zu WAT transformiere, hat diese Datei etwa 630.000 Zeilen. Diese Datei ist hier zu finden.

    Quelltext

        
          
          package main
    
          import (
          "fmt"
          "time"
          )
    
          func main() {
            primes := 0
    
            startTime := time.Now()
    
            for i := 1; i < 100_001; i++ {
              if isPrime(i) {
                primes++
              }
            }
    
            endTime := time.Now()
    
            fmt.Println(endTime.Sub(startTime))
          }
    
          func isPrime (number int) bool {
            prime := true
    
            for i := 2; i < 100_001; i++ {
              if number%i == 0 {
                prime = false
                break
              }
            }
    
            return prime
          }
        
        
      

    Messergebnisse

    JS (10 mal ausgeführt):
    Min: 1376ms
    Max: 1419ms
    Avg: 1393,6ms

    Web Assembly:
    Min: 6,7s
    Max: 6,8s
    Avg: 6,75s

    Wie viel schneller ist WebAssembly?

    Bei mir war der Web Assembly Code immer langsamer. Der JS Code war fast 5 mal schneller.

    Wie erklären Sie sich die Performanz-Unterschiede?

    Kann mir den großen Unterschied nicht erklären. Der Web Assembly und JS Code sind 1:1 gleich.
    © Jona Ittermann 2022