Kuidas me oma veebirakendust WebAssembly abil 20 korda kiirusel kiirusime

Kuidas me oma veebirakendust WebAssembly abil 20 korda kiirusel kiirusime

Selles artiklis käsitleme juhtumianalüüsi brauserirakenduse kiirendamiseks, asendades JavaScripti arvutused WebAssembly'ga.

Mis on WebAssembly?

Lühidalt öeldes on see binaarsete juhiste formaat virna virtuaalmašinale. Sageli nimetatakse Wasm'iks (lühendatud nimetus) programmeerimiskeelt, kuid see ei ole nii. Juhiste formaat täidetakse brauseris koos JavaScriptiga.

Oluline on, et WebAssembly't saab genereerida C/C++-s, Rustis, Go-s jms keeles kirjutatud lähtekoodide kompileerimise abil. Siin rakendatakse staatilist tüpiseerimist ja nn tasapinnalist mälu mudelit. Kood, nagu eespool mainitud, salvestatakse kompaktse binaarvorminguna, mistõttu toimub täitmine peaaegu sama kiiresti, kui kui rakendus käivitatakse käsurealt. Need võimalused ongi viinud WebAssembly populaarsuse kasvuni.

Tuletame meelde: kõigile «Habr» lugejatele – 10 000 rubla allahindlus igale Skillboxi kursusele, kasutades sooduskoodi «Habr».

Skillbox soovitab: Praktiline kursus «Mobiilne arendaja PRO».

Praegu kasutatakse Wasm'i paljudes rakendustes, alates mängudest nagu Doom 3 kuni veebirakenduste, näiteks Autocad ja Figma, portfoolioteni. Wasm'i kasutatakse ka serverless arvutuste valdkonnas.

Selles artiklis toome näite Wasm'i kasutamisest analüütilise veebiteenuse kiirendamiseks. Selguse huvides kogusime töötava rakenduse, mis on kirjutatud C-s ja kompileeritakse WebAssembly'ks. Tulemust kasutatakse madala tootlikkusega JS-osade asendamiseks.

Rakenduse transformatsioon

Näites kasutatakse brauseriteenust fastq.bio, mis on mõeldud geneetikutele. Tööriist võimaldab hinnata DNA järjestamise (dekodeerimise) kvaliteeti.

Siin on näide rakendusest töös:

Kuidas me oma veebirakendust WebAssembly abil 20 korda kiirusel kiirusime

Protsessi üksikasju pole mõtet tuua, kuna need on mittespetsialistidele üsna keerulised, kuid lühidalt öeldes saavad teadlased eelpool mainitud infograafika järgi aru, kas DNA järjestamise protsess kulges sujuvalt ja millised probleemid tekkisid.

Sel teenusel on alternatiive, lauarakendusi. Kuid fastq.bio võimaldab kiirendada tööd, visualiseerides andmeid. Enamikus muudest juhtudest on vajalik osata käsureaga töötada, kuid mitte kõikidel geneetikutel pole vajalikku kogemust.

Kõik töötab lihtsalt. Sisendiks on andmed, mis esitatakse tekstifailina. See fail genereeritakse spetsialiseeritud sekveneerimisriistade abil. Fail sisaldab DNA järjestuste loetelu ja kvaliteedi hindamist iga nukleotiidi jaoks. Faili formaat on .fastq, seega sai teenus sellise nime.

Teostus JavaScriptis

Kasutaja esimene samm fastq.bio kasutamisel on sobiva faili valimine. Kasutades objekti File, loeb rakendus faili juhuslikku andmeproovi ja töötleb seda paketti. JavaScripti ülesanne on siin lihtsate stringitegevuste teostamine ja näitajate arvestamine. Üks neist on nukleotiidide A, C, G ja T arv erinevates DNA fragmentides.

Pärast vajalike näitajate arvutamist visualiseeritakse need Plotly.js abil ning teenus hakkab töötama uue andmeprooviga. Fragmentide jaotamine on tehtud, et parandada kasutajakogemust. Kui töötada kõigi andmetega korraga, jääb protsess ajutiselt seisma, kuna sekveneerimise tulemuste failid võtavad sadu gigabaite failiruumi. Teenus võtab aga andmepalad suurusega 0,5 kuni 1 MB ja töötab nendega samm-sammult, koostades graafilisi andmeid.

Nii see töötab:

Kuidas me oma veebirakendust WebAssembly abil 20 korda kiirusel kiirusime

Punases ristkülikus on paigutatud stringi muundamise algoritm visualiseerimise saamiseks. See on teenuse arvutuslikult kõige koormatum osa. Tasub proovida seda asendada Wasmi abil.

Testime WebAssemblyt

Wasm'i kasutamise võimaluse hindamiseks hakkas projekti meeskond otsima valmis lahendusi QC-mõõdikute (QC — quality control) loomiseks fastq failide põhjal. Otsing toimus C, C++ või Rustis kirjutatud tööriistade seas, et oleks võimalik koodi WebAssembly'sse portida. Lisaks ei tohi tööriist olla "too raw", oli vaja teenust, mida teadlased juba testisid.

Tulemuseks tehti valik seqtk. Rakendus on üsna populaarne, see on avatud lähtekoodiga, algkeel on C.

Enne Wasmi muundamist tasub vaadata seqtk kompileerimise põhimõtet lauaarvutile. Vastavalt Makefile'ile on vajalik järgnev:

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

Põhimõtteliselt on seqtk võimalik kompileerida Emscripteni abil. Kui seda pole, saame hakkama sellise meetodiga Docker.

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

Soovi korral võib selle ka ise kokku panna, kuid selleks kulub aega.

Konteineris ei ole probleem, et võtta emcc gcc'i alternatiivina:

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

Muutusi on minimaalset:

Binaarfaili väljundi asemel kasutab Emscripten .wasm ja .js failide genereerimiseks, mis on vajalik WebAssembly mooduli käitamiseks.

Zlib teegi toetamiseks kasutatakse flägi USE_ZLIB. Teek on laialdaselt levinud ja portitud WebAssembly-le, ning Emscripten kaasab selle projekti.

Emscripteni virtuaalne failisüsteem aktiveeritakse. See on POSIX-sarnane FS, mis töötab brauseri sees mälus. Kui lehte uuendatakse, kustutatakse mälu.

Kuna virtuaalne failisüsteem on vajalik, tasub võrrelda seqtk käivitamist käsurivilt ja kompileeritud WebAssembly mooduli käivitamist.

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

Virtuaalsesse failisüsteemi pääsemine on vajalik, et mitte kirjutada seqtk ümber stringi, mitte failide sisendi jaoks. Sel juhul kuvatakse andmefragment failina data.fastq virtuaalses FS-is ja sellele kutsutakse main() seqtk.

Siin on uus arhitektuur:

Kuidas me oma veebirakendust WebAssembly abil 20 korda kiirusel kiirusime

Joonis näitab, et arvutuste tegemiseks peamise brauseri niidi asemel kasutatakse WebWorkers. See meetod võimaldab arvutusi teostada taustprotsessis, halvendamata brauseri reageerimist. WebWorker kontroller käivitab Workeri ja haldab selle suhtlemist peamise niidiga.

Seqtk käivitamine toimub Workeriga monteeritud faili kaudu. Pärast Worker'i töö lõppu antakse tulemus välja Promise'ina. Kui peamine niit saab sõnumi, kasutatakse tulemust graafikute uuendamiseks. Ja nii edasi mitmete iteratsioonide jooksul.

Kuidas on WebAssembly jõudlusega?

Jõudluse muutuse hindamiseks kasutas projekti meeskond lugemisoperatsioonide arvu sekundis. Interaktiivsete graafikute ehitamise aega ei arvestata, kuna mõlemal rakendusel kasutatakse JavaScripti.

Tavalise lahenduse kasutamise korral oli jõudluse kasv üheksa korda.

Kuidas me oma veebirakendust WebAssembly abil 20 korda kiirusel kiirusime

See on suurepärane tulemus, kuid nagu selgus, on ka võimalus seda optimeerida. Asi on selles, et suur hulk QC-analüüsi tulemusi ei ole seqtk'is kasutusel, seega saab need eemaldada. Kui seda teha, paraneb tulemus võrreldes JS-iga 13 korda.

Kuidas me oma veebirakendust WebAssembly abil 20 korda kiirusel kiirusime

Seda õnnestus saavutada lihtsa printf() käskude kommenteerimisega.

Aga see pole veel kõik. Asi on в том, et sel hetkel fastq.bio saab analüüsi tulemused, kutsudes erinevaid C funktsioone. Igaühes neist arvutatakse oma omaduste kogum, nii et iga faili fragmenti loeti kahel korral.

Selle probleemi lahendamiseks otsustati ühendada kaks funktsiooni ühte. Selle tulemuseks oli jõudluse 20-kordne suurenemine.

Kuidas me oma veebirakendust WebAssembly abil 20 korda kiirusel kiirusime

Tuleb märkida, et sellise silmapaistva tulemuse saavutamine ei ole alati võimalik. Mõnel juhul võib jõudlus isegi langeda, mistõttu tasub hinnata iga konkreetset juhtumit.

Kokkuvõtteks võib öelda, et Wasm tõepoolest võimaldab parandada rakenduse jõudlust, kuid seda tuleb kasutada targalt.

Skillbox soovitab:

Allikas: habr.com

Osta usaldusväärne hostimine veebilehtede jaoks DDoS-i kaitsega, VPS VDS serverid 🔥 Osta usaldusväärne hostimine veebilehtede jaoks DDoS-i kaitsega, VPS VDS serverid | ProHoster