Kuinka käytimme WebAssemblya verkkosovelluksen nopeuttamiseen 20 kertaa

Tässä artikkelissa käsitellään tapausta, jolla selainsovellusta voidaan nopeuttaa korvaamalla JavaScript-laskelmat WebAssemblylla.

WebAssembly - mikä se on?

Lyhyesti sanottuna tämä on binäärikäskymuoto pinopohjaiselle virtuaalikoneen. Wasmia (lyhytnimi) kutsutaan usein ohjelmointikieleksi, mutta sitä ei ole. Ohjemuoto suoritetaan selaimessa JavaScriptin kanssa.

On tärkeää, että WebAssembly voidaan hankkia kääntämällä lähteitä sellaisilla kielillä kuin C/C++, Rust, Go. Tässä käytetään tilastollista kirjoitusta ja ns. litteää muistimallia. Koodi, kuten edellä mainittiin, on tallennettu kompaktissa binäärimuodossa, mikä tekee siitä melkein yhtä nopean kuin sovelluksen suorittaminen komentorivin avulla. Nämä ominaisuudet ovat johtaneet WebAssemblyn suosion kasvuun.

Muistutamme sinua: kaikille "Habrin" lukijoille - 10 000 ruplan alennus ilmoittautuessaan mille tahansa Skillbox-kurssille "Habr" -tarjouskoodilla.

Skillbox suosittelee: Käytännön kurssi "Mobile Developer PRO".

Tällä hetkellä Wasmia käytetään monissa sovelluksissa Doom 3:n kaltaisista peleistä web-portteihin, kuten Autocad ja Figma. Wasmia käytetään myös sellaisilla aloilla kuin palvelimettomassa tietojenkäsittelyssä.

Tässä artikkelissa on esimerkki Wasmin käyttämisestä analytiikan verkkopalvelun nopeuttamiseen. Selvyyden vuoksi otimme toimivan C-kielellä kirjoitetun sovelluksen, joka on käännetty WebAssemblyksi. Tulosta käytetään JS:n huonosti toimivien osien korvaamiseen.

Sovelluksen muuntaminen

Esimerkissä käytetään geneetikoille tarkoitettua fastq.bio-selainpalvelua. Työkalun avulla voit arvioida DNA-sekvensoinnin (salauksen) laatua.

Tässä on esimerkki sovelluksesta toiminnassa:

Prosessin yksityiskohtiin ei kannata mennä, koska ne ovat varsin monimutkaisia ​​ei-asiantuntijoille, mutta lyhyesti sanottuna tiedemiehet voivat käyttää yllä olevaa infografiaa ymmärtääkseen, menikö DNA-sekvensointiprosessi sujuvasti ja mitä ongelmia ilmeni.

Tällä palvelulla on vaihtoehtoja, työpöytäohjelmia. Mutta fastq.bio antaa sinun nopeuttaa työtäsi visualisoimalla tiedot. Useimmissa muissa tapauksissa sinun on kyettävä työskentelemään komentorivin kanssa, mutta kaikilla geneetikoilla ei ole tarvittavaa kokemusta.

Kaikki toimii yksinkertaisesti. Syöte on tekstitiedoston muodossa esitettyä dataa. Tämä tiedosto on luotu erityisillä sekvensointityökaluilla. Tiedosto sisältää luettelon DNA-sekvensseistä ja kunkin nukleotidin laatupisteet. Tiedostomuoto on .fastq, josta palvelu sai nimensä.

Toteutus JavaScriptissä

Käyttäjän ensimmäinen askel työskennellessään fastq.bio:n kanssa on valita sopiva tiedosto. Tiedosto-objektin avulla sovellus lukee satunnaisen näytteen tiedoista tiedostosta ja käsittelee kyseisen erän. JavaScriptin tehtävänä on suorittaa yksinkertaisia ​​merkkijonotoimintoja ja laskea mittareita. Yksi niistä on nukleotidien A, C, G ja T lukumäärä eri DNA-fragmenteissa.

Kun tarvittavat indikaattorit on laskettu, ne visualisoidaan Plotly.js:n avulla ja palvelu alkaa toimia uudella datanäytteellä. Pyörittäminen tehdään UX:n laadun parantamiseksi. Jos käsittelet kaikkia tietoja kerralla, prosessi jäätyy joksikin aikaa, koska tiedostot, joissa on sekvensointitulokset, vievät satoja gigatavuja tiedostotilaa. Palvelu ottaa kooltaan 0,5–1 MB datapalstoja ja toimii niiden kanssa askel askeleelta rakentaen graafista dataa.

Näin se toimii:

Punainen suorakulmio sisältää merkkijonomuunnosalgoritmin visualisoinnin saamiseksi. Tämä on palvelun laskentaintensiivisin osa. Kannattaa yrittää korvata se Wasmilla.

WebAssemblyn testaus

Wasmin käyttömahdollisuuksien arvioimiseksi projektiryhmä aloitti valmiiden ratkaisujen etsimisen fastq-tiedostoihin perustuvien QC-mittareiden (QC - Quality Control) luomiseen. Haku tehtiin C-, C++- tai Rust-kielellä kirjoitetuista työkaluista, jotta koodi oli mahdollista siirtää WebAssemblyyn. Lisäksi työkalu ei saa olla "raaka", vaan vaadittiin tiedemiesten jo testaama palvelu.

Tämän seurauksena valinta tehtiin sen puolesta seqtk. Sovellus on melko suosittu, se on avoimen lähdekoodin, lähdekieli on C.

Ennen Wasmiksi muuntamista kannattaa tarkastella seqtk:n käännösperiaatetta työpöydälle. Makefilen mukaan tässä on mitä tarvitset:

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

Periaatteessa seqtk:n voi kääntää Emscriptenillä. Jos sitä ei ole, pärjäämme. Docker-kuva.

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

Haluttaessa Voit koota sen itse, mutta se vie aikaa.

Säilön sisällä voit helposti käyttää emcc:tä vaihtoehtona gcc:lle:

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

Minimimuutokset:

Binääritiedostoon tulostamisen sijaan Emscripten käyttää .wasm- ja .js-muotoja tiedostojen luomiseen, joita käytetään WebAssemby-moduulin suorittamiseen.

USE_ZLIB-lippua käytetään tukemaan zlib-kirjastoa. Kirjasto on jaettu ja siirretty WebAssemblyyn, ja Emscripten sisällyttää sen projektiin.

Emscrippten-virtuaalinen tiedostojärjestelmä on aktivoitu. Tämä POSIX-tyyppinen FS, joka toimii selaimen RAM-muistissa. Kun sivu päivitetään, muisti tyhjennetään.

Jotta ymmärrät, miksi virtuaalista tiedostojärjestelmää tarvitaan, kannattaa verrata tapaa, jolla suoritat seqtk:n komentoriviltä, ​​tapaan, jolla suoritat käännettyä WebAssembly-moduulia.

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

Pääsy virtuaaliseen tiedostojärjestelmään on välttämätöntä, jotta seqtk ei kirjoiteta uudelleen merkkijonoa varten tiedoston syöttämisen sijaan. Tässä tapauksessa datafragmentti näytetään data.fastq-tiedostona virtuaalisessa FS:ssä, jossa on kutsu main() seqtk:lle.

Tässä uusi arkkitehtuuri:

Kuvasta näkyy, että selaimen pääsäikeen laskelmien sijaan Verkkotyöntekijät. Tämän menetelmän avulla voit suorittaa laskutoimituksia taustasäikeessä vaikuttamatta selaimen reagointikykyyn. WebWorker-ohjain käynnistää Workerin ja hallitsee sen vuorovaikutusta pääsäikeen kanssa.

Seqtk-komento suoritetaan käyttämällä Worker-komentoa asennetussa tiedostossa. Toteutuksen päätyttyä työntekijä tuottaa tuloksen Lupauksen muodossa. Kun pääsäie vastaanottaa viestin, tulosta käytetään kaavioiden päivittämiseen. Ja niin edelleen useissa iteraatioissa.

Entä WebAssemblyn suorituskyky?

Suorituskyvyn muutoksen arvioimiseksi projektiryhmä käytti lukuoperaatioita sekunnissa -parametria. Interaktiivisten kaavioiden rakentamiseen kuluvaa aikaa ei oteta huomioon, koska molemmat toteutukset käyttävät JavaScriptiä.

Valmisratkaisua käytettäessä suorituskyvyn lisäys oli yhdeksänkertainen.

Tämä on erinomainen tulos, mutta kuten käy ilmi, se on myös mahdollista optimoida. Tosiasia on, että seqtk ei käytä suurta määrää QC-analyysituloksia, joten ne voidaan poistaa. Jos teet tämän, tulos paranee 13 kertaa JS:ään verrattuna.

Se saavutettiin yksinkertaisesti kommentoimalla printf()-komentoja.

Mutta siinä ei vielä kaikki. Tosiasia on, että tässä vaiheessa fastq.bio vastaanottaa analyysitulokset kutsumalla eri C-funktioita, joista jokainen laskee oman ominaisuussarjansa, jolloin jokainen tiedoston fragmentti luetaan kahdesti.

Tämän ongelman kiertämiseksi päätettiin yhdistää kaksi toimintoa yhdeksi. Tämän seurauksena tuottavuus kasvoi 20-kertaiseksi.

On syytä huomata, että tällaista erinomaista tulosta ei aina voida saavuttaa. Joissakin tapauksissa suorituskyky heikkenee, joten jokainen tapaus kannattaa arvioida.

Johtopäätöksenä voimme sanoa, että Wasm tarjoaa mahdollisuuden parantaa sovelluksen suorituskykyä, mutta sinun on käytettävä sitä viisaasti.

Skillbox suosittelee:

• Kahden vuoden käytännön kurssi "Olen PRO-verkkokehittäjä".
• Verkkokurssi "C#-kehittäjä 0:sta".
• Käytännön vuoden kurssi "PHP-kehittäjä 0:sta PRO".

Lähde: will.com