🥇Ako sme pomocou WebAssembly zrýchlili webovú aplikáciu 20-násobne

V tomto článku sa zaoberáme prípadovou štúdiou urýchlenia webovej aplikácie výmenou JavaScriptových výpočtov za WebAssembly.

Čo je WebAssembly?

Jednoducho povedané, je to binárny formát inštrukcií pre zásobníkovú virtuálnu mašinu. Často sa skrátene nazýva Wasm, ale nie je to programovací jazyk. Formát inštrukcií sa vykonáva v prehliadači vedľa JavaScriptu.

Je dôležité, že WebAssembly možno získať kompiláciou zdrojových kódov v takých jazykoch, ako sú C/C++, Rust, Go. Používa sa statická typizácia a tzv. plochý model pamäte. Kód, ako bolo uvedené vyššie, sa uchováva v kompaktnom binárnom formáte, takže sa vykonáva takmer tak rýchlo, ako keby aplikácia bola spustená pomocou príkazového riadku. Tieto možnosti prispeli k rastu popularity WebAssembly.

Pripomíname: pre všetkých čitateľov „Habr“ — zľava 10 000 rubľov pri zapísaní na akýkoľvek kurz Skillbox s promo kódom „Habr“.
Skillbox odporúča: Praktický kurz „Mobilný vývojár PRO“.

V súčasnosti sa Wasm používa v mnohých aplikáciách, od hier ako Doom 3 po portované webové aplikácie ako Autocad a Figma. Wasm sa používa aj v oblasti bezserverových výpočtov.

V tomto článku je uvedený príklad použitia Wasm na urýchlenie analytického webového služby. Pre prehľadnosť sme vzali fungujúcu aplikáciu napísanú v C, ktorá sa skompiluje do WebAssembly. Výsledok sa použije na nahradenie menej výkonných častí JS.

Transformácia aplikácie

V príklade sa bude používať webový servis fastq.bio, ktorý je určený pre genetických vedcov. Nástroj umožňuje vyhodnotiť kvalitu sekvenovania (dešifrovania) DNA.

Tu je príklad aplikácie v akcii:

Detaily procesu netreba uvádzať, pretože sú dosť zložité pre nešpecialistov, ale zjednodušene povedané, vedci môžu na vyššie uvedenej infografike zistiť, či proces sekvenovania DNA prebehol hladko a aké problémy sa objavili.

Tento servis má alternatívy, desktopové programy. Ale fastq.bio umožňuje urýchliť prácu vizualizovaním dát. V väčšine iných prípadoch je potrebné vedieť pracovať s príkazovým riadkom, ale nie všetci genetici majú potrebné skúsenosti.

Všetko funguje jednoducho. Na vstupe sú dáta predložené vo forme textového súboru. Tento súbor sa generuje špecializovanými nástrojmi na sekvencovanie. V súbore sa nachádza zoznam sekvencií DNA a hodnotenie kvality pre každú nukleotid. Formát súboru je .fastq, a preto služba dostala toto meno.

Realizácia v JavaScripte

Prvý krok používateľa pri práci s fastq.bio je výber príslušného súboru. Použitím objektu File aplikácia číta náhodnú vzorku dát zo súboru a spracováva tento balík. Úlohou JavaScriptu je vykonávanie jednoduchých operácií so reťazcami a výpočet metrík. Jednou z nich je počet nukleotidov A, C, G a T v rôznych fragmentoch DNA.

Po vypočítaní potrebných metrík sú vizualizované pomocou Plotly.js, a služba začína pracovať s novou vzorkou dát. Rozdelenie na fragmenty bolo vytvorené na zlepšenie kvality UX. Ak by sme pracovali so všetkými dátami naraz, proces by sa na chvíľu zastavil, pretože súbory s výsledkami sekvencovania zaberajú stovky gigabajtov úložného priestoru. Služba berie úseky dát od 0,5 do 1 MB a pracuje s nimi krok za krokom, pričom vytvára grafické dáta.

Takto to funguje:

V červenom obdĺžniku je umiestnený algoritmus reťazcových transformácií na získanie vizualizácie. To je najviac výpočtovo náročná časť služby. Stojí za to vyskúšať nahradiť ju Wasm.

Testujeme WebAssembly

Na zhodnotenie možnosti použitia Wasm sa tím projektu zaoberal hľadaním hotových riešení na vytvorenie QC metriky (QC - kvalitná kontrola) na základe súborov fastq. Hľadanie bolo vedené medzi nástrojmi napísanými v C, C++ alebo Rust, aby sa dala možnosť preniesť kód na WebAssembly. Okrem toho nástroj nemal byť 'surový', vyžadoval sa servis, ktorý bol už overený vedcami.

V dôsledku toho bola voľba učinená v prospech seqtk. Aplikácia je dosť populárna, je open-source, pôvodný jazyk je C.

Pred transformáciou do Wasm je potrebné pozrieť sa na princíp kompilácie seqtk pre desktop. Podľa Makefile je to, čo potrebujeme:

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

V podstate, seqtk je možné skompilovať pomocou Emscripten. Ak ho nemáme, vystačíme si týmto spôsobom Docker.

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

Pri želaní je možné ho zostaviť aj samostatne, ale to si vyžaduje čas.

Vo vnútri kontajnera je bez problémov možné použiť emcc ako alternatívu k gcc:

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

Minimálne zmeny:

Namiesto výstupu do binárneho súboru Emscripten generuje súbory .wasm a .js, ktoré sa používajú na spustenie modulu WebAssembly.

Pre podporu knižnice zlib sa používa flag USE_ZLIB. Knižnica je rozšírená a prenesená na WebAssembly, pričom Emscripten ju zahŕňa do projektu.

Aktivuje sa virtuálny súborový systém Emscripten. To je FS podobná POSIX, ktorá funguje v pamäti v rámci prehliadača. Po aktualizácii stránky sa pamäť vymaže.

Aby sme pochopili, na čo je potrebný virtuálny súborový systém, mali by sme porovnať spôsob spúšťania seqtk z príkazového riadku so spôsobom spúšťania skompilovaného modulu WebAssembly.

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

Prístup k virtuálnemu súborovému systému je potrebný, aby sme nemuseli prepisovať seqtk na vstup zo stringu namiesto súboru. V tomto prípade sa fragment dát zobrazuje ako súbor data.fastq vo virtuálnom FS s vyvolaním main() seqtk.

Tu je nová architektúra:

Obrázok ukazuje, že namiesto výpočtov v hlavnom vlákne prehliadača sa používajú WebWorkers. Tento spôsob umožňuje vykonávať výpočty v pozadí, bez zhoršenia reakčnosti prehliadača. Ovládač WebWorker spúšťa pracovníka a riadi jeho interakciu s hlavným vláknom.

Príkaz seqtk sa spúšťa pomocou pracovníka na namontovanom súbore. Po dokončení vykonania pracovník vracia výsledok vo forme Promise. Keď hlavné vlákno prijme správu, výsledok sa použije na aktualizáciu grafov. A tak v niekoľkých iteráciách.

Aká je výkonnosť WebAssembly?

Na posúdenie zmeny výkonu tím projektu použil parameter počtu operácií čítania za sekundu. Čas na vytvorenie interaktívnych grafov sa nezohľadňuje, pretože v oboch implementáciách sa používa JavaScript.

Pri použití riešenia "z krabice" sa zvýšil výkon deväťkrát.

To je skvelý výsledok, ale ako sa ukázalo, existuje možnosť optimalizovať ho ešte viac. V skutočnosti sa mnoho výsledkov QC analýzy nekontroluje pomocou seqtk, a preto je možné ich odstrániť. Ak to urobíme, výsledok v porovnaní s JS sa zlepšuje 13-krát.

Dosiahlo sa to jednoduchým zakomentovaním príkazov printf().

Ale to ešte nie je všetko. Ide o to, že v tejto fáze fastq.bio získava výsledky analýzy pomocou volania rôznych funkcií C. Každá z nich počíta svoj vlastný súbor charakteristík, takže každý fragment súboru sa čítal dvakrát.

Aby sme sa vyhli tomuto problému, rozhodli sme sa skombinovať dve funkcie do jednej. Výsledkom je 20-násobné zvýšenie výkonu.

Je potrebné poznamenať, že takéhoto pozoruhodného výsledku sa dá dosiahnuť len zriedka. V niektorých prípadoch výkon klesá, takže je dôležité zhodnotiť každý konkrétny prípad.

Na záver môžeme povedať, že Wasm skutočne umožňuje zlepšiť výkon aplikácie, ale jeho použitie by malo byť rozumné.

Skillbox odporúča:

Dvojročný praktický kurz „Som webový vývojár PRO“.

Online kurz C# vývojár od základov.

Praktický ročný kurz „PHP vývojár od 0 do PRO“.

Zdroj: habr.com