Vad är WebAssembly? Nära nativ hastighet i webbläsaren

01Vad är WebAssembly?

WebAssembly är ett andra körformat som webbläsare förstår utöver JavaScript. Det är standardiserat av W3C och fungerar inbyggt i alla stora webbläsare som Chrome, Firefox, Safari och Edge, så användaren behöver inte installera något.

Låt dig inte vilseledas av ordet »assembly« i namnet: Wasm skriver man oftast inte för hand. Du skriver koden i ett språk du är van vid och omvandlar den sedan med en kompilator till en .wasm-fil. Webbläsaren laddar snabbt ned den lilla och kompakta filen, validerar den och översätter den till maskinkod som körs.

Det enklaste svaret på frågan vad är Wasm är kort sagt: ett portabelt och säkert kompileringsmål som för skrivbordsapplikationers prestanda till webbläsaren.

02Hur fungerar WebAssembly?

JavaScript kommer som text. Webbläsaren tolkar den, kör den och optimerar den medan den körs. WebAssembly kommer i stället förkompilerat. Eftersom typerna är kända och strukturen strikt kan webbläsaren köra det med mycket färre gissningar och en förutsägbar hastighet.

1. Utvecklaren skriver koden i ett språk som C++, Rust, Go eller C#.
2. Kompilatorns verktygskedja omvandlar koden till en .wasm-modul.
3. Webbsidan laddar och startar modulen via JavaScript.
4. JavaScript anropar Wasm-funktionerna och visar resultaten i gränssnittet.

const { instance } = await WebAssembly.instantiateStreaming(
  fetch('/hesap.wasm')
);

console.log(instance.exports.topla(2, 3)); // 5

03Skillnaden mellan Wasm och JavaScript

Skillnaden mellan Wasm och JavaScript missförstås ofta. WebAssembly är inte skapat för att ta död på JavaScript utan för att hjälpa till där JavaScript har det svårt. Gränssnitt, händelsehantering och sidinteraktion är fortfarande JavaScripts uppgift.

Wasms verkliga vinst syns vid intensiva beräkningar. Det är dock inte snabbare för allt: att ofta flytta data mellan JavaScript och Wasm kostar extra. Vid små uppgifter kan den kostnaden äta upp vinsten.

04Användningsområden för WebAssembly

Användningsområdena för WebAssembly växer för varje år. Gemensamt är att sådant som tidigare var omöjligt eller mycket långsamt i webbläsaren nu går att göra utan installation.

Design- och mediaverktyg

Professionella designprogram, fotoredigerare och videokonverterare som körs i webbläsaren använder Wasm för sina tunga bearbetningskärnor. Det blir till exempel möjligt att komprimera en video direkt i webbläsaren utan att ladda upp den till en server.

Spel, 3D och simulering

Spelmotorer kan kompilera sin utdata till Wasm. Tillsammans med det nya grafikgränssnittet som vi beskrev i artikeln Vad är WebGPU kan konsolliknande upplevelser byggas i webbläsaren.

Affärsapplikationer och data

Databaser som körs i webbläsaren, PDF-hantering, kryptering, CAD-visare och komplexa beräkningsmotorer drar nytta av Wasm. Befintlig skrivbordskod kan flyttas till webben utan att skrivas om, vilket innebär att bibliotek som utvecklats i åratal bevaras.

Användning utanför webbläsaren

Tack vare gränssnittet WASI kan Wasm också köras på servern, i edge-beräkning och i tilläggssystem. Den lätta och isolerade strukturen gör det till ett attraktivt val för att köra tillägg på ett säkert sätt.

05Vilka språk kan man skriva Wasm i?

Antalet språk som kan kompileras till Wasm är stort, men mognadsgraden varierar. De vanligaste valen är C/C++ och Rust. Rust sticker ut inom området tack vare minnessäkerhet och verktygsstöd, och detaljerna hittar du i artikeln Vad är Rust.

• C och C++: moget och brett stöd via verktygskedjan Emscripten.
• Rust: en smidig brygga till JavaScript med wasm-pack och wasm-bindgen.
• Go: Wasm-utdata med den officiella kompilatorn, men utdatan blir relativt stor.
• C# / .NET: .NET-applikationer i webbläsaren med Blazor.
• AssemblyScript: för dig som vill skriva Wasm med en syntax som liknar TypeScript.

cargo install wasm-pack
wasm-pack build --target web

06Prestanda: var finns den verkliga vinsten?

Att lägga till Wasm på en webbplats gör inte sidan snabbare automatiskt. På en företagswebbplats eller i en butik på en e-handelsplattform är de verkliga orsakerna till långsamhet oftast stora bilder, onödiga skript och serverns svarstid. Sådana problem löser man med arbete på hastighet och prestanda, inte med Wasm.

Wasm gör sig bäst i applikationer som kräver hög prestanda i webbläsaren: beräkningar med miljontals operationer per sekund, bildfilter, komprimering och simulering. Vinsten kan vara betydande i sådana uppgifter, men det är fel att fatta beslut utan att mäta.

07Begränsningar och saker att tänka på

WebAssembly är ett kraftfullt verktyg men passar inte alla projekt. Teamets kunskapsbas, hur enkelt det är att felsöka och underhållskostnaden bör också vägas in i beslutet.

• Felsökning är mer mödosam än i JavaScript, och källkartor är inte alltid felfria.
• Att flytta stora mängder data mellan JavaScript och Wasm kan sänka prestandan.
• Modulens storlek kan växa med språket och biblioteken som används.
• Teamet behöver ha utvecklare som behärskar de språk som kompileras.
• Kompilerade moduler måste också testas, och metoderna i artikeln Vad är mjukvarutestning gäller även här.

08Innan du lägger till Wasm i projektet

Innan du bestämmer dig för WebAssembly måste du definiera problemet rätt. Ofta kommer känslan av långsamhet inte från beräkningar utan från nätverksanrop, stora paket eller onödiga omritningar. Då gör Wasm bara systemet mer komplext utan att lösa problemet.

Rätt tillvägagångssätt är att först hitta flaskhalsen med webbläsarens prestandaverktyg och sedan bara flytta den delen till Wasm. Resten av applikationen kan förbli JavaScript eller TypeScript, så att teamet fortsätter arbeta med verktyg det är vant vid.

1. Identifiera flaskhalsen genom att mäta med profileringsverktyg.
2. Håll indata och utdata för den del som flyttas små och tydliga.
3. Behåll JavaScript-versionen av samma uppgift för jämförelse.
4. Hämta modulen bara när den behövs, med lazy loading.
5. Testa på äldre enheter och mobil under verkliga användarförhållanden.

09WebAssemblys framtid

Standarden mognar varje år med tillägg som trådar (threads), SIMD-instruktioner och stöd för skräpinsamling. Stödet för skräpinsamling har öppnat vägen för att språk som Java, Kotlin och Dart ska kunna kompileras effektivare till Wasm.

I närmaste framtid kommer gränsen mellan webbapplikationer och skrivbordsapplikationer att suddas ut ytterligare. För företag innebär det att kraftfulla affärsapplikationer utan installation blir möjliga. Gränssnittet i en sådan applikation är minst lika viktigt som motorn, och här avgör UI/UX-design användarupplevelsen.