Hoe't wy WebAssembly brûkten om in webapplikaasje 20 kear te fersnellen

Hoe't wy WebAssembly brûkten om in webapplikaasje 20 kear te fersnellen

Dit artikel besprekt in saak foar it fersnellen fan in browserapplikaasje troch JavaScript-berekkeningen te ferfangen mei WebAssembly.

WebAssembly - wat is it?

Koartsein, dit is in binêre ynstruksje opmaak foar in stapel-basearre firtuele masine. Wasm (koarte namme) wurdt faaks in programmeartaal neamd, mar dat is it net. It ynstruksjeformaat wurdt útfierd yn 'e browser tegearre mei JavaScript.

It is wichtich dat WebAssembly kin wurde krigen troch boarnen te kompilearjen yn talen lykas C/C++, Rust, Go. Hjir wurde statistysk typen en it saneamde platte ûnthâldmodel brûkt. De koade, lykas hjirboppe neamd, wurdt opslein yn in kompakte binêre opmaak, wêrtroch it hast sa rap is as it útfieren fan de applikaasje mei de kommandorigel. Dizze mooglikheden hawwe laat ta de groei fan 'e populariteit fan WebAssembly.

Wy herinnerje: foar alle lêzers fan "Habr" - in koarting fan 10 roebel by it ynskriuwen fan in Skillbox-kursus mei de promoasjekoade "Habr".

Skillbox advisearret: Praktyske kursus "Mobiele ûntwikkelder PRO".

Op it stuit wurdt Wasm brûkt yn in protte applikaasjes, fan spultsjes lykas Doom 3 oant webporteare applikaasjes lykas Autocad en Figma. Wasm wurdt ek brûkt yn sokke gebieten as serverless computing.

Dit artikel jout in foarbyld fan it brûken fan Wasm om in analytyske webtsjinst te fersnellen. Foar dúdlikens namen wy in wurkjende applikaasje skreaun yn C, dy't is gearstald yn WebAssembly. It resultaat sil brûkt wurde om ûnderprestearjende seksjes fan JS te ferfangen.

Applikaasje transformaasje

It foarbyld sil de fastq.bio-blêdertsjinst brûke, dy't bedoeld is foar genetici. It ark lit jo de kwaliteit fan DNA-sekwinsje (ûntsiferjen) evaluearje.

Hjir is in foarbyld fan de applikaasje yn aksje:

Hoe't wy WebAssembly brûkten om in webapplikaasje 20 kear te fersnellen

De details fan it proses binne net wurdich om yn te gean, om't se frij kompleks binne foar net-spesjalisten, mar koartsein kinne wittenskippers de boppesteande infografyk brûke om te begripen oft it DNA-sekwinsjeproses soepel gie en hokker problemen ûntstienen.

Dizze tsjinst hat alternativen, buroblêdprogramma's. Mar fastq.bio lit jo jo wurk fersnelle troch de gegevens te visualisearjen. Yn 'e measte oare gefallen moatte jo mei de kommandorigel wurkje kinne, mar net alle genetisy hawwe de nedige ûnderfining.

Alles wurket gewoan. De ynfier is gegevens presintearre yn 'e foarm fan in teksttriem. Dit bestân wurdt generearre troch spesjalisearre sequencing-ark. It bestân befettet in list mei DNA-sekwinsjes en in kwaliteitskoare foar elke nukleotide. It bestânsformaat is .fastq, en dêrom krige de tsjinst syn namme.

Implementaasje yn JavaScript

De earste stap fan 'e brûker by it wurkjen mei fastq.bio is om it passende bestân te selektearjen. Mei it brûken fan it File-objekt lêst de applikaasje in willekeurige stekproef fan gegevens út in bestân en ferwurket dy batch. De taak fan JavaScript hjir is om ienfâldige tekenrige operaasjes út te fieren en metriken te berekkenjen. Ien fan har is it oantal nukleotiden A, C, G en T op ferskate DNA-fragminten.

Nei it berekkenjen fan de nedige yndikatoaren, wurde se visualisearre mei Plotly.js, en de tsjinst begjint te wurkjen mei in nije gegevensmonster. De chunking wurdt dien om de kwaliteit fan 'e UX te ferbetterjen. As jo ​​​​mei alle gegevens tagelyk wurkje, sil it proses in skoft befrieze, om't de bestannen mei de sequencing-resultaten hûnderten gigabytes oan triemromte ynnimme. De tsjinst nimt stikken gegevens fariearjend yn grutte fan 0,5 oant 1 MB en wurket mei har stap foar stap, it bouwen fan grafyske gegevens.

Dit is hoe't it wurket:

Hoe't wy WebAssembly brûkten om in webapplikaasje 20 kear te fersnellen

It reade rjochthoeke befettet it algoritme foar stringtransformaasje foar it krijen fan fisualisaasje. Dit is it meast computationally yntinsive diel fan 'e tsjinst. It is de muoite wurdich om te besykjen it te ferfangen troch Wasm.

WebAssembly testen

Om de mooglikheid fan Wasm te beoardieljen, begon it projektteam te sykjen nei klearmakke oplossingen foar it meitsjen fan QC-metriken (QC - kwaliteitskontrôle) basearre op fastq-bestannen. It sykjen waard útfierd ûnder ark skreaun yn C, C++ of Rust, sadat it mooglik wie om de koade nei WebAssembly te portearjen. Derneist soe it ark net "rau" wêze moatte; in tsjinst dy't al troch wittenskippers wie hifke wie ferplicht.

Dêrtroch waard de kar makke yn it foardiel fan seqtk. De applikaasje is frij populêr, it is iepen boarne, de boarnetaal is C.

Foardat jo konvertearje nei Wasm, is it wurdich te sjen nei it kompilaasjeprinsipe fan seqtk foar it buroblêd. Neffens de Makefile is hjir wat jo nedich binne:

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

Yn prinsipe kinne jo seqtk kompilearje mei Emscripten. As it der net is, dogge wy it. Docker ôfbylding.

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

As winsklik Jo kinne it sels gearstalle, mar it duorret tiid.

Binnen in kontener kinne jo emcc maklik brûke as alternatyf foar gcc:

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

Minimum feroarings:

Ynstee fan it útfieren nei in binêre triem, brûkt Emscripten .wasm en .js om de bestannen te generearjen, dy't brûkt wurde om de WebAssemby-module út te fieren.

De USE_ZLIB-flagge wurdt brûkt om de zlib-bibleteek te stypjen. De bibleteek is ferspraat en oerdroegen oan WebAssembly, en Emscripten befettet it yn it projekt.

It firtuele bestânsysteem Emscrippten is aktivearre. Dit POSIX-like FS, rint yn RAM binnen de browser. As de side is ferfarske, wurdt it ûnthâld wiske.

Om te begripen wêrom't in firtuele bestânsysteem nedich is, is it wurdich om de manier wêrop jo seqtk fan 'e kommandorigel útfiere te fergelykjen mei de manier wêrop jo in kompilearre WebAssembly-module útfiere.

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

Tagong krije ta it firtuele bestânsysteem is nedich om seqtk net te herskriuwen foar string ynstee fan triemynfier. Yn dit gefal, de gegevens fragmint wurdt werjûn as in data.fastq triem yn de firtuele FS mei in oprop oan main () seqtk derop.

Hjir is de nije arsjitektuer:

Hoe't wy WebAssembly brûkten om in webapplikaasje 20 kear te fersnellen

De figuer lit sjen dat ynstee fan berekkeningen yn 'e haadblêder thread, WebWorkers. Dizze metoade lit jo berekkeningen útfiere yn in eftergrûntried sûnder ynfloed op de responsiviteit fan 'e browser. No, de WebWorker-controller begjint de Worker, en beheart syn ynteraksje mei de haadthread.

It kommando seqtk wurdt útfierd mei help fan Worker op it opsleine bestân. Nei foltôging fan útfiering produsearret de Arbeider in resultaat yn 'e foarm fan in belofte. As in berjocht wurdt ûntfongen troch de haadthread, wurdt it resultaat brûkt om de grafiken te aktualisearjen. En sa fierder yn ferskate iteraasjes.

Hoe sit it mei WebAssembly-prestaasjes?

Om de feroaring yn prestaasjes te evaluearjen, brûkte it projektteam de parameter lêzen operaasjes per sekonde. De tiid dy't it nimt om ynteraktive grafiken te bouwen wurdt net yn rekken brocht, om't beide ymplemintaasjes JavaScript brûke.

By it brûken fan de out-of-the-box oplossing wie de prestaasjesferheging njoggen kear.

Hoe't wy WebAssembly brûkten om in webapplikaasje 20 kear te fersnellen

Dit is in poerbêst resultaat, mar, sa docht bliken, is d'r in kâns om it ek te optimalisearjen. It feit is dat in grut oantal QC analyze resultaten wurde net brûkt troch seqtk, sadat se kinne wurde wiske. As jo ​​dit dogge, ferbetteret it resultaat mei 13 kear yn ferliking mei JS.

Hoe't wy WebAssembly brûkten om in webapplikaasje 20 kear te fersnellen

It waard berikt troch gewoan kommentaar út de printf () kommando's.

Mar dat is net alles. It feit is dat fastq.bio op dit stadium de analyseresultaten ûntfangt troch ferskate C-funksjes op te roppen. Elk fan harren berekkent syn eigen set fan skaaimerken, sadat elk fragmint fan 'e triem twa kear lêzen wurdt.

Om dit probleem om te kommen, waard besletten om twa funksjes yn ien te kombinearjen. As gefolch, de produktiviteit tanommen mei 20 kear.

Hoe't wy WebAssembly brûkten om in webapplikaasje 20 kear te fersnellen

It is de muoite wurdich opskriuwen dat sa'n treflik resultaat kin net altyd wurde berikt. Yn guon gefallen sille prestaasjes sakje, dus it is de muoite wurdich om elk gefal te evaluearjen.

As konklúzje kinne wy ​​​​sizze dat Wasm wol in kâns biedt om applikaasjeprestaasjes te ferbetterjen, mar jo moatte it ferstannich brûke.

Skillbox advisearret:

Boarne: www.habr.com

Add a comment