Hvordan vi accelererede en webapplikation 20 gange ved hjælp af WebAssembly

Denne artikel diskuterer et tilfælde af at fremskynde en browserapplikation ved at erstatte JavaScript-beregninger med WebAssembly.

WebAssembly - hvad er det?

Kort sagt er dette et binært instruktionsformat til en stablet virtuel maskine. Ofte kaldes Wasm (forkortet navn) et programmeringssprog, men det er det ikke. Instruktionsformatet udføres i browseren sammen med JavaScript.

Det er vigtigt, at WebAssembly kan opnås ved at kompilere kilder på sprog som C/C++, Rust, Go. Den bruger statistisk indtastning og den såkaldte flade hukommelsesmodel. Koden, som nævnt ovenfor, er gemt i et kompakt binært format, hvilket gør det næsten lige så hurtigt, som hvis programmet blev kørt fra kommandolinjen. Disse funktioner har ført til stigningen i popularitet af WebAssembly.

Påmindelse: for alle læsere af "Habr" - en rabat på 10 rubler ved tilmelding til ethvert Skillbox-kursus ved hjælp af "Habr"-kampagnekoden.

Skillbox anbefaler: Praktisk kursus "Mobiludvikler PRO".

Wasm bruges i øjeblikket i mange applikationer, fra spil som Doom 3 til webporterede apps som Autocad og Figma. Wasm anvendes også i et sådant område som serverløs computing.

Denne artikel giver et eksempel på brug af Wasm til at fremskynde en analysewebservice. For klarhedens skyld tog vi en fungerende applikation skrevet i C, som vil blive kompileret i WebAssembly. Resultatet vil blive brugt til at erstatte lavtydende JS-sektioner.

Applikationstransformation

Eksemplet vil bruge browsertjenesten fastq.bio, som er beregnet til genetikere. Værktøjet giver dig mulighed for at evaluere kvaliteten af ​​DNA-sekventering (afkodning).

Her er et eksempel på en applikation i aktion:

Detaljerne i processen behøver ikke gives, da de er ret komplekse for ikke-specialister, men kort sagt kan videnskabsmænd bruge ovenstående infografik til at forstå, om DNA-sekventeringsprocessen gik glat, og hvilke problemer der opstod.

Denne service har alternativer, desktop-programmer. Men fastq.bio lader dig fremskynde tingene ved at visualisere dataene. I de fleste andre tilfælde skal du kunne arbejde med kommandolinjen, men ikke alle genetikere har den nødvendige erfaring.

Alt fungerer simpelthen. Inputtet er data præsenteret som en tekstfil. Denne fil er genereret af specialiserede sekventeringsværktøjer. Filen indeholder en liste over DNA-sekvenser og en kvalitetsscore for hvert nukleotid. Filformatet er .fastq, deraf navnet på tjenesten.

Implementering i JavaScript

Det første trin for brugeren, når man arbejder med fastq.bio, er at vælge den passende fil. Ved at bruge File-objektet læser applikationen et tilfældigt udsnit af data fra filen og behandler denne batch. JavaScripts opgave her er at udføre simple strengoperationer og beregne eksponenter. En af dem er antallet af nukleotid A, C, G og T på forskellige DNA-fragmenter.

Efter at have beregnet de nødvendige indikatorer, visualiseres de ved hjælp af Plotly.js, og tjenesten begynder at arbejde med en ny dataprøve. Opdelingen i fragmenter sker for at forbedre kvaliteten af ​​UX. Hvis du arbejder med alle data på én gang, vil processen hænge i et stykke tid, fordi filerne med resultaterne af sekventeringen optager hundredvis af gigabyte filplads. Tjenesten på den anden side tager datasektioner i størrelse fra 0,5 til 1 MB og arbejder med dem trin for trin og opbygger grafiske data.

Sådan fungerer det:

Det røde rektangel indeholder strengkonverteringsalgoritmen til gengivelse. Dette er den mest beregningsmæssigt belastede del af tjenesten. Det er værd at prøve at erstatte det med Wasm.

Test af WebAssembly

For at vurdere muligheden for at bruge Wasm begyndte projektgruppen at lede efter færdige løsninger til at skabe en QC-metrik (QC - kvalitetskontrol) baseret på fastq-filer. Søgningen blev udført blandt værktøjer skrevet i C, C++ eller Rust, så det var muligt at portere koden til WebAssembly. Derudover bør værktøjet ikke være "rå", en tjeneste, der allerede er testet af videnskabsmænd, var påkrævet.

Som følge heraf blev valget truffet til fordel for seqtk. Applikationen er ret populær, den er open source, kildesproget er C.

Før du konverterer til Wasm, bør du se på princippet om at kompilere seqtk til skrivebordet. Ifølge Makefile er her, hvad der er nødvendigt:

# Compile to binary
$ gcc seqtk.c 
   -o seqtk 
   -O2 
   -lm 
   -lz

I princippet kan du kompilere seqtk ved hjælp af Emscripten. Hvis det ikke er der, slipper vi. Docker måde.

$ docker pull robertaboukhalil/emsdk:1.38.26
$ docker run -dt --name wasm-seqtk robertaboukhalil/emsdk:1.38.26

Hvis det ønskes, du kan selv samle detmen det tager tid.

Inde i beholderen kan du nemt tage emcc som et alternativ til gcc:

# Compile to WebAssembly
$ emcc seqtk.c 
    -o seqtk.js 
    -O2 
    -lm 
    -s USE_ZLIB=1 
    -s FORCE_FILESYSTEM=1

Minimum ændringer:

I stedet for at outputte til en binær fil, bruger Emscripten .wasm og .js til at generere filer, som bruges til at køre WebAssemby-modulet.

USE_ZLIB-flaget bruges til at understøtte zlib-biblioteket. Biblioteket distribueres og porteres til WebAssembly, og Emscripten inkluderer det i projektet.

Det virtuelle filsystem Emscriptpten er aktiveret. Det her POSIX-lignende FS, kører i RAM inde i browseren. Når siden er opdateret, ryddes hukommelsen.

For at forstå, hvorfor et virtuelt filsystem er nødvendigt, er det værd at sammenligne den måde, du kører seqtk på fra kommandolinjen, med den måde, du kører et kompileret WebAssembly-modul på.

# On the command line
$ ./seqtk fqchk data.fastq
 
# In the browser console
> Module.callMain(["fqchk", "data.fastq"])

At få adgang til det virtuelle filsystem er nødvendigt for ikke at omskrive seqtk for strenginput, ikke filinput. I dette tilfælde vises datafragmentet som en data.fastq-fil i et virtuelt filsystem med et kald til main() seqtk.

Her er den nye arkitektur:

Figuren viser, at den i stedet for at regne i hovedbrowsertråden bruger webarbejdere. Denne metode gør det muligt at udføre beregninger på en baggrundstråd uden at forringe browserens reaktionsevne. Nå, WebWorker-controlleren starter Worker og administrerer dens interaktion med hovedtråden.

Seqtk-kommandoen køres med en Worker på en monteret fil. Efter afslutning af udførelsen udsteder arbejderen resultatet i form af et løfte. Når beskeden modtages af hovedtråden, bruges resultatet til at opdatere graferne. Og så videre i flere gentagelser.

Hvad med ydeevnen af ​​WebAssembly?

For at evaluere ændringen i ydeevne brugte projektteamet parameteren læseoperationer pr. sekund. Interaktiv plotningstid tages ikke i betragtning, fordi JavaScript bruges i begge implementeringer.

Ved brug af out-of-the-box-løsningen var præstationsgevinsten ni gange.

Dette er et fremragende resultat, men som det viste sig, er der mulighed for at optimere det. Faktum er, at et stort antal QC-analyseresultater ikke bruges af seqtk, så de kan slettes. Hvis dette gøres, er resultatet 13 gange bedre end i JS.

Det blev opnået ved blot at kommentere printf() kommandoerne.

Men det er ikke alt. Pointen er, at fastq.bio på dette trin modtager analysens resultater ved at kalde forskellige C-funktioner. Hver af dem beregner sit eget sæt af karakteristika, så hvert fragment af filen blev læst to gange.

For at komme uden om dette problem blev det besluttet at kombinere de to funktioner til én. Som et resultat steg produktiviteten med 20 gange.

Det skal bemærkes, at et sådant enestående resultat ikke altid kan opnås. I nogle tilfælde falder ydeevnen, så det er værd at evaluere hver enkelt sag.

Som konklusion kan vi sige, at Wasm giver mulighed for at forbedre applikationens ydeevne, men den skal bruges med omtanke.

Skillbox anbefaler:

• To-årigt praktisk kursus "Jeg er en PRO webudvikler".
• Online kursus "C# udvikler fra 0".
• Praktisk årskursus "PHP-udvikler fra 0 til PRO".

Kilde: www.habr.com