WebAssemble reducerer Figmas belastningstid med 3x

En casestudie med WebAssemble

Illustration oprettet til Figma af Chris Hamamoto

WebAssemble blev netop frigivet i marts, men har allerede skabt en masse spænding i websamfundet. Det er et nyt binært format til maskinkode, der er specifikt designet med browsere i tankerne. Da apps, der er kompileret til WebAssemble, kan køre så hurtigt som indbyggede apps, har det potentialet til at ændre den måde, hvorpå software skrives på Internettet.

Mange mennesker er begyndt at eksperimentere med legetøjs-WebAssemble-projekter på siden, men det er svært at se, hvad de virkelige resultater får, medmindre du har en stor kompatibel kodebase til sammenligning. Da vores produkt er skrevet i C ++, som let kan kompileres til WebAssemble, er Figma en perfekt demonstration af dette nye formats magt. Hvis du ikke har brugt Figma før, er det et browserbaseret interfaceværktøj med en kraftig 2D WebGL-gengivelsesmotor, der understøtter meget store dokumenter.

Vi troede, at vores fund ville være nyttige for websamfundet som et eksempel på WebAssembles indvirkning. Spoiler: det er meget hurtigere.

Oversigt over WebAssemble

WebAssemble giver udviklere mulighed for at oprette oplevelser på skrivebordskvalitet på nettet uden at gå på kompromis med ydeevnen. Alle større browsere tilføjer support til det og afsætter betydelige ressourcer til at gøre det så hurtigt som muligt.

Før WebAssemble kunne C ++ -kode køres i browseren ved at krydskompilere den til en undergruppe af JavaScript kendt som asm.js. Undermængden asm.js er dybest set JavaScript, hvor du kun kan bruge tal (ingen strenge, objekter osv.). Dette er alt hvad du behøver for at køre C ++ -kode, da alt i C ++ enten er et tal eller en markør til et tal, og pegepunkter er også tal. C ++ -adressepladsen er bare et kæmpe JavaScript-array med tal, og pegepunkter er bare indekser i den matrix.

WebAss Assembly er en drop-in erstatning for asm.js, der er mere effektiv på enhver måde. Men det kortlægger stadig 1: 1 med asm.js, så det har de samme begrænsninger. Da det kun kan indlæse og gemme numre, skal det kaldes JavaScript-kode for at gøre noget interessant (oprette DOM-noder, oprette netværksforbindelser osv.). WebAsamlingskode er stadig inde i browsersandkassen og kan kun bruge de browser-API'er, som JavaScript har adgang til.

Der er mange fordele ved at køre C ++ -kode ved hjælp af WebAssemble i stedet for at krydskompilere den til JavaScript:

  • Formatet er meget kompakt, så det tager mindre tid at overføre over netværket end det ækvivalente krydskompilerede JavaScript, selv når det komprimeres.
  • Formatet blev designet til at være så hurtigt som muligt for browseren at analysere. Dette er ikke sandt for JavaScript-syntaks, som er designet til mennesker og indeholder masser af redundans og ekstra regler, der skal kontrolleres, før den kan køres. WebAssemble analyserer omkring 20x hurtigere end asm.js.
  • C ++ -koden er stærkt optimeret af LLVM-værktøjskæden, før den endda er kodet i WebAssemble. Dette betyder, at browseren bare kan oversætte den direkte til native kode uden at foretage nogen optimeringer. I modsætning hertil springer browsere ikke over optimeringer til JavaScript-kode, fordi den normalt er håndskrevet og har brug for mange lag optimeringer for at være hurtig.
  • Det er trivielt for browsere at cache oversættelsen af ​​et WebAssemble-modul til den oprindelige kode. Dette betyder, at anden gang du indlæser en side ved hjælp af et WebAssemble-modul, der er næsten ingen belastningstid! Dette er ikke tilfældet for asm.js, som er blandet med almindelig JavaScript og kræver et komplekst verifikationskort for at validere, at det faktisk følger asm.js-begrænsningerne.
  • WebAssemble har oprindelig support til 64-bit heltal. JavaScript har kun 64-bit flydende numre, så det understøtter kun 53-bit heltal. 64-bit heltal skal emuleres i JavaScript, hvilket kan være meget langsommere.

Hvis du er interesseret i at lære mere om WebAssemble, kan jeg anbefale både Lin Clarks intropræsentation på højt niveau og et lavt niveau af Rasmus Andersson, en designer og ingeniør, der arbejder hos Figma, der beskriver WebAssemble-formatet i fremragende detaljer. De officielle dokumenter har en guide til at komme i gang, hvis du selv vil lege med det.

WebAssemble og Figma

Den største fordel, vi så ved at bruge WebAssemble på Figma, var hurtigere belastningstid. Dette er ikke overraskende, da et af WebAssembles primære mål er at reducere belastningstiden. Når vi måler belastningstid på Figma, inkluderer vi tiden til at initialisere vores app, downloade designfilen og gengive hele designet for første gang.

Som du kan se, forbedrede vores indlæsningstid mere end 3x, efter at vi skiftede til WebAssemble uanset dokumentstørrelse. Dette er en enorm forbedring for vores brugere, der ofte opretter meget store designdokumenter og ofte skifter mellem dem.

En yderligere fordel ved belastningstid ved WebAssemble, der ikke er fanget i denne graf, er, at belastningstid ikke længere afhænger af applikationsstørrelse. Så længe brugere har indlæst appen før, skal browseren allerede have oversættelsen fra WebAssemble til den oprindelige kode cache fra sidste gang.

Vi håbede, at aktivering af WebAssemble automatisk ville forbedre downloadstørrelsen, men det endte ikke med at skrumpe meget, især efter komprimering. Det viser sig, at komprimering af asm.js-kode kun ender lidt større end komprimering af den ækvivalente WebAssemble-kode.

WebAssemble-tilstand i verden

I skrivende stund er WebAssemble-understøttelse kun aktiveret som standard i Firefox og Chrome. Edge og Safari arbejder stadig på deres implementeringer og har endnu ikke frigivet dem. Dette vil sandsynligvis ændre sig snart, så du bør kontrollere posten "Kan jeg bruge" for den seneste status.

Selvom WebAssemble-understøttelse er aktiveret i både Firefox og Chrome, bruger Figma faktisk kun WebAssemble i Firefox. Vi ramte nogle showstopper-fejl i Chromes implementering af WebAssemble, som i øjeblikket forhindrer os i at aktivere WebAssemble i Chrome:

  • Bug 719172: I modsætning til Firefox cache ikke Chrome sin oversatte WebAssemble-kode. Dette betyder, at hele appen skal oversættes hver gang siden indlæses, hvilket faktisk gør vores side indlæst langsommere med WebAssemble end den gør med asm.js.
  • Bug 729768: Chromes implementering af WebAssemble går nogle gange ned, når du kører Figmas kode. Vi antager, at dette er en fejl i V8, fordi den samme kode kører fint i Firefox.

En anden ting at huske er, at understøttelse af browser debugger stadig vises. Det blev ikke prioriteret til WebAssemble MVP og er ikke rigtig implementeret endnu. Vi kompilerer stadig til asm.js i stedet for WebAssemble til fejlfinding i mellemtiden.

WebAssemble's fremtid

WebAssemble er splinterny, og det er forståeligt nok stadig uslebne rundt om kanterne. Det er imidlertid en principiel og praktisk tilgang til at opnå native performance på nettet, der er godt rustet til at blive kernen i, hvordan nettet fungerer.

Et spændende aspekt ved WebAssemble er, at det har meget større ambitioner end blot at være et mål for C ++ -kode. Designet er passende til generelle formål, og det skal være let at tilføje WebAssemble som et alternativt outputformat til enhver kompilator, der målretter mod indbygget kode. En officiel LLVM-backend er under udvikling, der, når det er færdigt, vil gøre det let for ethvert sprog, der bruger LLVM-værktøjskæden til at udsende WebAssemble-kode direkte.

WebAssemble har også planer om at udsætte bindinger til JavaScript-affaldsopsamleren på et tidspunkt. Det vil gøre det meget lettere at krydse kompilere sprogindsamlede sprog (Java, C # osv.) Til WebAssemble. Du kan læse mere om kommende WebAssemble-funktioner her.

Et andet overbevisende aspekt af WebAssemble er, at det er en integreret del af webplatformen. Det er naturligt og forventet at oprette webapps, der bruger både JavaScript og WebAssemble-moduler. Hvis du f.eks. Ønsker universal JPEG 2000-support, behøver du ikke længere at vente på, at den understøttes i alle browsere. Bare krydskompilér en dekoder til WebAssemble og kalder den fra JavaScript! Det skal være lige så hurtigt som om det var en del af selve browseren.

Dette kan potentielt forbedre iterationstiden for webplatformen. Browsere kan fokusere på at afsløre hardware-primitiver på lavt niveau (WebGL, Bluetooth, USB osv.) Og overlade udviklingen af ​​biblioteker på højere niveau til samfundet, som kan udvikle sig i et hurtigere tempo.

Selvom WebAss Assembly ikke er helt klar endnu, investerer Figma stadig i det, fordi vi mener, at det er en vigtig del af internetets fremtid.

Kan du lide at arbejde på avancerede webapps? Kom arbejde hos Figma!