Cumu acceleremu una applicazione web 20 volte cù WebAssembly

Cumu acceleremu una applicazione web 20 volte cù WebAssembly

Questu articulu discute un casu per accelerà una applicazione di navigatore rimpiazzendu i calculi JavaScript cù WebAssembly.

WebAssembly - chì hè?

In breve, questu hè un furmatu di struzzioni binari per una macchina virtuale basata in stack. Wasm (nome curtu) hè spessu chjamatu lingua di prugrammazione, ma ùn hè micca. U furmatu di istruzzioni hè eseguitu in u navigatore cù JavaScript.

Hè impurtante chì WebAssembly pò esse acquistatu cumpilendu fonti in lingue cum'è C/C++, Rust, Go. Quì typing statistiche è u chjamatu mudellu di memoria piatta sò usati. U codice, cum'è l'esitatu sopra, hè guardatu in un furmatu binariu compactu, facendu quasi cum'è veloce cum'è eseguisce l'applicazione cù a linea di cummanda. Queste capacità anu purtatu à a crescita di a popularità di WebAssembly.

Ramintemu: per tutti i lettori di "Habr" - un scontu di 10 000 rubles quandu si iscrizzione in ogni cursu Skillbox cù u codice promozionale "Habr".

Skillbox consiglia: Corso praticu "Sviluppatore Mobile PRO".

Attualmente, Wasm hè adupratu in parechje applicazioni, da ghjochi cum'è Doom 3 à applicazioni web-ported cum'è Autocad è Figma. Wasm hè ancu usatu in settori cume l'informatica senza servitore.

Questu articulu furnisce un esempiu di utilizà Wasm per accelerà un serviziu web analiticu. Per a chiarezza, avemu pigliatu una applicazione di travagliu scritta in C, chì hè cumpilata in WebAssembly. U risultatu serà utilizatu per rimpiazzà e sezioni sottumessi di JS.

Trasformazione di l'applicazione

L'esempiu aduprà u serviziu di u navigatore fastq.bio, chì hè destinatu à i geneticisti. U strumentu vi permette di valutà a qualità di a sequenza di DNA (deciphering).

Eccu un esempiu di l'applicazione in azzione:

Cumu acceleremu una applicazione web 20 volte cù WebAssembly

I ditaglii di u prucessu ùn valenu a pena di andà in quantu sò abbastanza cumplessi per i non-specialisti, ma in breve, i scientisti ponu utilizà l'infografica sopra per capiscenu se u prucessu di sequenza di l'ADN hè andatu bè è quali prublemi sò stati.

Stu serviziu hà altirnativa, prugrammi desktop. Ma fastq.bio permette di accelerà u vostru travagliu visualizendu e dati. In a maiò parte di l'altri casi, avete bisognu di pudè travaglià cù a linea di cummanda, ma micca tutti i genetici anu l'experientia necessaria.

Tuttu travaglia solu. L'input hè dati presentati in forma di un schedariu di testu. Stu schedariu hè generatu da strumenti di sequenza specializati. U schedariu cuntene una lista di sequenze di DNA è un puntu di qualità per ogni nucleotide. U furmatu di u schedariu hè .fastq, per quessa chì u serviziu hà u so nome.

Implementazione in JavaScript

U primu passu di l'utilizatore quandu travaglia cù fastq.bio hè di selezziunà u schedariu apprupriatu. Utilizendu l'ughjettu File, l'applicazione leghje una mostra aleatoria di dati da un schedariu è processa quellu batch. U travagliu di JavaScript quì hè di fà operazioni simplici di stringa è di calculà metriche. Unu di elli hè u numeru di nucleotides A, C, G è T in diversi frammenti di DNA.

Dopu avè calculatu l'indicatori necessarii, sò visualizati cù Plotly.js, è u serviziu cumencia à travaglià cù una nova mostra di dati. U chunking hè fattu per migliurà a qualità di l'UX. Se travagliate cù tutte e dati in una volta, u prucessu si congelarà per qualchì tempu, postu chì i schedari cù i risultati di sequenza occupanu centinaie di gigabyte di spaziu di u schedariu. U serviziu piglia pezzi di dati chì varienu in grandezza da 0,5 à 1 MB è travaglia cun elli passu à passu, custruendu dati grafichi.

Eccu cumu funziona:

Cumu acceleremu una applicazione web 20 volte cù WebAssembly

U rectangulu rossu cuntene l'algoritmu di trasfurmazioni di stringa per ottene a visualizazione. Questa hè a parte più intensiva in computazione di u serviziu. Vale a pena di pruvà à rimpiazzà cù Wasm.

Testu WebAssembly

Per valutà a pussibilità di usà Wasm, u gruppu di u prughjettu hà cuminciatu à circà suluzioni pronti per a creazione di metriche QC (QC - cuntrollu di qualità) basatu nantu à i schedari fastq. A ricerca hè stata realizata trà l'arnesi scritti in C, C++ o Rust, perchè era pussibule di portà u codice à WebAssembly. Inoltre, l'uttellu ùn deve esse "crudu"; un serviziu chì era digià statu pruvatu da i scientisti era necessariu.

In u risultatu, a scelta hè stata fatta in favore di seqtk. L'applicazione hè abbastanza populari, hè open-source, a lingua fonte hè C.

Prima di cunvertisce in Wasm, vale a pena guardà u principiu di compilazione di seqtk per u desktop. Sicondu u Makefile, eccu ciò chì avete bisognu:

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

In principiu, pudete cumpilà seqtk cù Emscripten. S'ellu ùn hè micca quì, facemu. Image Docker.

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

Se u vulete Pudete assemblà sè stessu, ma ci vole tempu.

In un containeru, pudete facilmente aduprà emcc cum'è una alternativa à gcc:

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

Cambiamenti minimi:

Invece di uscita à un schedariu binariu, Emscripten usa .wasm è .js per generà i schedari, chì hè utilizatu per eseguisce u modulu WebAssemby.

A bandiera USE_ZLIB hè aduprata per sustene a biblioteca zlib. A biblioteca hè stata distribuita è purtata à WebAssembly, è Emscripten l'include in u prugettu.

U sistema di fugliale virtuale Emscriptpten hè attivatu. Questu FS simile à POSIX, in esecuzione in RAM in u navigatore. Quandu a pagina hè rinfriscata, a memoria hè sguassata.

Per capisce perchè un sistema di fugliale virtuale hè necessariu, vale a pena paragunà a manera di eseguite seqtk da a linea di cummanda cù a manera di eseguite un modulu WebAssembly compilatu.

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

L'accessu à u sistema di fugliale virtuale hè necessariu per ùn riscrivà seqtk per a stringa piuttostu cà l'input di file. In questu casu, u fragmentu di dati hè visualizatu cum'è un schedariu data.fastq in u FS virtuale cù una chjama à main() seqtk nantu à questu.

Eccu a nova architettura:

Cumu acceleremu una applicazione web 20 volte cù WebAssembly

A figura mostra chì invece di calculi in u filu principale di u navigatore, WebWorkers. Stu metudu permette di fà calculi in un filu di fondo senza affettà a risposta di u navigatore. Ebbè, u controller WebWorker principia u Worker, gestionendu a so interazzione cù u filu principale.

U cumandamentu seqtk hè eseguitu cù u Worker nantu à u schedariu muntatu. Dopu à a fine di l'esekzione, u travagliu pruduce un risultatu in a forma di una Promessa. Quandu un missaghju hè ricevutu da u filu principale, u risultatu hè utilizatu per aghjurnà i grafici. È cusì in parechje iterazioni.

E prestazioni di WebAssembly?

Per evaluà u cambiamentu in u rendiment, u squadra di u prugettu hà utilizatu l'operazioni di lettura per secondu paràmetru. U tempu chì ci vole à custruisce grafici interattivi ùn hè micca cunsideratu postu chì e duie implementazioni utilizanu JavaScript.

Quandu si usa a suluzione out-of-the-box, l'aumentu di u rendiment era nove volte.

Cumu acceleremu una applicazione web 20 volte cù WebAssembly

Questu hè un risultatu eccellente, ma, cum'è risulta, ci hè ancu l'uppurtunità di ottimisimu. U fattu hè chì un gran numaru di risultati di l'analisi QC ùn sò micca usati da seqtk, perchè ponu esse sguassati. Sè vo fate questu, u risultatu migliurà da 13 volte cumparatu à JS.

Cumu acceleremu una applicazione web 20 volte cù WebAssembly

Hè stata ottenuta solu cummentendu i cumandamenti printf ().

Ma ùn hè micca tuttu. U fattu hè chì in questu stadiu, fastq.bio riceve i risultati di l'analisi chjamendu diverse funzioni C. Ognunu di elli calculate u so propiu inseme di caratteristiche, perchè ogni fragmentu di u schedariu hè lettu duie volte.

Per aggira stu prublema, hè statu decisu di cumminà duie funzioni in una sola. In u risultatu, a produtividade hè aumentata da 20 volte.

Cumu acceleremu una applicazione web 20 volte cù WebAssembly

Hè da nutà chì un risultatu cusì eccezziunale ùn pò micca sempre esse ottinutu. In certi casi, u rendiment calarà, cusì vale a pena evaluà ogni casu.

In cunclusione, pudemu dì chì Wasm furnisce l'uppurtunità di migliurà u rendiment di l'applicazione, ma avete bisognu di usà cun prudenza.

Skillbox consiglia:

Source: www.habr.com

Add a comment