Kako smo uporabili WebAssembly za 20-kratno pospešitev spletne aplikacije

Ta članek obravnava primer za pospešitev aplikacije brskalnika z zamenjavo izračunov JavaScript z WebAssembly.

WebAssembly - kaj je to?

Na kratko, to je binarni format navodil za virtualni stroj, ki temelji na skladu. Wasm (kratko ime) se pogosto imenuje programski jezik, vendar ni. Format navodil se izvede v brskalniku skupaj z JavaScriptom.

Pomembno je, da je WebAssembly mogoče pridobiti s prevajanjem virov v jezikih, kot so C/C++, Rust, Go. Tu se uporabljata statistična tipizacija in tako imenovani model ploščatega pomnilnika. Koda, kot je omenjeno zgoraj, je shranjena v kompaktni binarni obliki, zaradi česar je skoraj tako hitra kot zagon aplikacije z uporabo ukazne vrstice. Te zmogljivosti so privedle do rasti priljubljenosti WebAssembly.

Spomnimo: za vse bralce "Habr" - popust v višini 10 rubljev ob vpisu v kateri koli tečaj Skillbox s promocijsko kodo "Habr".

Skillbox priporoča: Praktični tečaj "Mobilni razvijalec PRO".

Trenutno se Wasm uporablja v številnih aplikacijah, od iger, kot je Doom 3, do spletnih prenosov, kot sta Autocad in Figma. Wasm se uporablja tudi na področjih, kot je računalništvo brez strežnikov.

Ta članek ponuja primer uporabe Wasm za pospešitev analitične spletne storitve. Zaradi jasnosti smo vzeli delujočo aplikacijo, napisano v C, ki je prevedena v WebAssembly. Rezultat bo uporabljen za zamenjavo neučinkovitih delov JS.

Preoblikovanje aplikacije

Primer bo uporabil storitev brskalnika fastq.bio, ki je namenjena genetikom. Orodje vam omogoča ovrednotenje kakovosti sekvenciranja (dešifriranja) DNK.

Tukaj je primer aplikacije v akciji:

V podrobnosti postopka se ni vredno spuščati, saj so precej zapleteni za nestrokovnjake, a skratka, znanstveniki lahko uporabijo zgornjo infografiko, da razumejo, ali je postopek zaporedja DNK potekal gladko in kakšne težave so se pojavile.

Ta storitev ima alternative, namizne programe. Toda fastq.bio vam omogoča, da pospešite svoje delo z vizualizacijo podatkov. V večini drugih primerov morate znati delati z ukazno vrstico, vendar vsi genetiki nimajo potrebnih izkušenj.

Vse deluje preprosto. Vhod so podatki, predstavljeni v obliki besedilne datoteke. To datoteko ustvarijo specializirana orodja za določanje zaporedja. Datoteka vsebuje seznam zaporedij DNK in oceno kakovosti za vsak nukleotid. Format datoteke je .fastq, zato je storitev dobila ime.

Implementacija v JavaScriptu

Prvi korak uporabnika pri delu s fastq.bio je izbira ustrezne datoteke. Z uporabo predmeta File aplikacija prebere naključni vzorec podatkov iz datoteke in obdela ta paket. Naloga JavaScripta tukaj je izvajanje preprostih nizovnih operacij in izračun meritev. Eden od njih je število nukleotidov A, C, G in T na različnih fragmentih DNK.

Po izračunu potrebnih indikatorjev se ti vizualizirajo s pomočjo Plotly.js in storitev začne delovati z novim vzorcem podatkov. Razdelitev je narejena za izboljšanje kakovosti UX. Če delate z vsemi podatki hkrati, bo postopek za nekaj časa zamrznil, saj datoteke z rezultati zaporedja zasedejo na stotine gigabajtov prostora. Storitev zajema podatke v velikosti od 0,5 do 1 MB in dela z njimi korak za korakom ter gradi grafične podatke.

Вот как это работи:

Rdeči pravokotnik vsebuje algoritem za transformacijo niza za pridobitev vizualizacije. To je računalniško najbolj intenziven del storitve. Vredno ga je poskusiti zamenjati z Wasmom.

Testiranje WebAssembly

Za oceno možnosti uporabe Wasm je projektna skupina začela iskati že pripravljene rešitve za ustvarjanje QC metrik (QC – nadzor kakovosti) na podlagi datotek fastq. Iskanje je bilo izvedeno med orodji, napisanimi v C, C++ ali Rust, tako da je bilo mogoče kodo prenesti na WebAssembly. Poleg tega orodje ne sme biti "surovo", potrebna je bila storitev, ki so jo že testirali znanstveniki.

Kot rezultat, je bila izbira narejena v korist seqtk. Aplikacija je precej priljubljena, je odprtokodna, izvorni jezik je C.

Pred pretvorbo v Wasm si je vredno ogledati princip prevajanja seqtk za namizje. Glede na Makefile potrebujete naslednje:

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

Načeloma lahko seqtk prevedete z uporabo Emscriptena. Če ga ni, se znajdemo. Dockerjeva slika.

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

Če želite Sestavite ga lahko sami, vendar je potreben čas.

Znotraj vsebnika lahko preprosto uporabite emcc kot alternativo gcc:

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

Minimalne spremembe:

Namesto izhoda v binarno datoteko Emscripten uporablja .wasm in .js za ustvarjanje datotek, ki se uporabljajo za zagon modula WebAssemby.

Zastavica USE_ZLIB se uporablja za podporo knjižnice zlib. Knjižnica je bila distribuirana in prenesena v WebAssembly, Emscripten pa jo vključuje v projekt.

Virtualni datotečni sistem Emscrippten je aktiviran. to POSIX-u podoben FS, ki se izvaja v RAM-u znotraj brskalnika. Ko se stran osveži, se pomnilnik izbriše.

Da bi razumeli, zakaj je potreben navidezni datotečni sistem, je vredno primerjati način zagona seqtk iz ukazne vrstice z načinom zagona prevedenega modula WebAssembly.

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

Pridobitev dostopa do navideznega datotečnega sistema je potrebna, da ne bi prepisali seqtk za niz in ne za vnos datoteke. V tem primeru je fragment podatkov prikazan kot datoteka data.fastq v navideznem FS s klicem main() seqtk na njem.

Tukaj je nova arhitektura:

Slika prikazuje, da namesto izračunov v glavni niti brskalnika WebWorkers. Ta metoda vam omogoča izvajanje izračunov v niti v ozadju, ne da bi to vplivalo na odzivnost brskalnika. No, krmilnik WebWorker zažene Workerja in upravlja njegovo interakcijo z glavno nitjo.

Ukaz seqtk se zažene s programom Worker na nameščeni datoteki. Po zaključku izvršitve delavec ustvari rezultat v obliki obljube. Ko glavna nit prejme sporočilo, se rezultat uporabi za posodobitev grafov. In tako naprej v več ponovitvah.

Kaj pa zmogljivost WebAssembly?

Da bi ocenili spremembo uspešnosti, je projektna skupina uporabila parameter branja na sekundo. Čas, potreben za izdelavo interaktivnih grafov, ni upoštevan, saj obe implementaciji uporabljata JavaScript.

Pri uporabi že pripravljene rešitve se je zmogljivost povečala za devetkrat.

To je odličen rezultat, a kot kaže, obstaja tudi možnost, da ga optimiziramo. Dejstvo je, da seqtk ne uporablja velikega števila rezultatov analiz QC, zato jih je mogoče izbrisati. Če to storite, se rezultat izboljša za 13-krat v primerjavi z JS.

To je bilo doseženo s preprostim komentiranjem ukazov printf().

A to še ni vse. Dejstvo je, da na tej stopnji fastq.bio prejme rezultate analize s klicanjem različnih funkcij C. Vsaka od njih izračuna svoj nabor značilnosti, tako da se vsak fragment datoteke prebere dvakrat.

Da bi se izognili tej težavi, je bilo odločeno združiti dve funkciji v eno. Posledično se je produktivnost povečala za 20-krat.

Omeniti velja, da tako izjemnega rezultata ni mogoče vedno doseči. V nekaterih primerih bo zmogljivost padla, zato je vredno oceniti vsak primer.

Za zaključek lahko rečemo, da Wasm ponuja priložnost za izboljšanje delovanja aplikacij, vendar jo morate uporabljati pametno.

Skillbox priporoča:

• Dvoletni praktični tečaj "Sem PRO spletni razvijalec".
• Spletni tečaj "C# razvijalec od 0".
• Praktični enoletni tečaj "PHP razvijalec od 0 do PRO".

Vir: www.habr.com