Ako sme použili WebAssembly na 20-násobné zrýchlenie webovej aplikácie

Tento článok popisuje prípad zrýchlenia aplikácie prehliadača nahradením výpočtov JavaScriptu pomocou WebAssembly.

WebAssembly - čo to je?

Stručne povedané, toto je binárny formát inštrukcie pre virtuálny stroj založený na zásobníku. Wasm (skrátený názov) sa často nazýva programovací jazyk, ale nie je to tak. Formát inštrukcie sa vykonáva v prehliadači spolu s JavaScriptom.

Je dôležité, aby WebAssembly bolo možné získať kompiláciou zdrojov v jazykoch ako C/C++, Rust, Go. Tu sa používa štatistické typovanie a takzvaný plochý pamäťový model. Kód, ako je uvedené vyššie, je uložený v kompaktnom binárnom formáte, vďaka čomu je takmer taký rýchly ako spustenie aplikácie pomocou príkazového riadku. Tieto schopnosti viedli k rastu popularity WebAssembly.

Pripomíname vám: pre všetkých čitateľov „Habr“ - zľava 10 000 rubľov pri registrácii do akéhokoľvek kurzu Skillbox pomocou propagačného kódu „Habr“.

Skillbox odporúča: Praktický kurz "Mobile Developer PRO".

V súčasnosti sa Wasm používa v mnohých aplikáciách, od hier ako Doom 3 až po webové aplikácie ako Autocad a Figma. Wasm sa používa aj v takých oblastiach, ako sú počítače bez servera.

Tento článok poskytuje príklad použitia Wasm na zrýchlenie analytickej webovej služby. Pre prehľadnosť sme zobrali funkčnú aplikáciu napísanú v C, ktorá je skompilovaná do WebAssembly. Výsledok sa použije na nahradenie nedostatočne výkonných sekcií JS.

Transformácia aplikácie

V príklade bude použitá služba prehliadača fastq.bio, ktorá je určená pre genetikov. Nástroj umožňuje vyhodnotiť kvalitu sekvenovania DNA (dešifrovanie).

Tu je príklad aplikácie v akcii:

Podrobnosti procesu sa neoplatí rozoberať, pretože sú pre laikov pomerne zložité, ale v skratke môžu vedci použiť vyššie uvedenú infografiku, aby pochopili, či proces sekvenovania DNA prebehol hladko a aké problémy sa vyskytli.

Táto služba má alternatívy, desktopové programy. Fastq.bio vám však umožňuje urýchliť prácu vizualizáciou údajov. Vo väčšine ostatných prípadov musíte vedieť pracovať s príkazovým riadkom, no nie všetci genetici majú potrebné skúsenosti.

Všetko funguje jednoducho. Vstupom sú dáta prezentované vo forme textového súboru. Tento súbor je generovaný špecializovanými sekvenčnými nástrojmi. Súbor obsahuje zoznam sekvencií DNA a skóre kvality pre každý nukleotid. Formát súboru je .fastq, preto služba dostala svoj názov.

Implementácia v JavaScripte

Prvým krokom používateľa pri práci s fastq.bio je výber vhodného súboru. Pomocou objektu File aplikácia načíta náhodnú vzorku údajov zo súboru a spracuje túto dávku. Úlohou JavaScriptu je vykonávať jednoduché reťazcové operácie a počítať metriky. Jedným z nich je počet nukleotidov A, C, G a T na rôznych fragmentoch DNA.

Po výpočte potrebných ukazovateľov sa vizualizujú pomocou Plotly.js a služba začne pracovať s novou vzorkou údajov. Rozdelenie sa vykonáva na zlepšenie kvality UX. Ak pracujete so všetkými údajmi naraz, proces na nejaký čas zamrzne, keďže súbory s výsledkami sekvenovania zaberajú stovky gigabajtov súborového priestoru. Služba preberá kusy údajov s veľkosťou od 0,5 do 1 MB a pracuje s nimi krok za krokom, pričom vytvára grafické údaje.

Tu je postup, ako to funguje:

Červený obdĺžnik obsahuje algoritmus transformácie reťazca na získanie vizualizácie. Ide o výpočtovo najnáročnejšiu časť služby. Stojí za to skúsiť ho nahradiť Wasm.

Testovanie WebAssembly

Na posúdenie možnosti využitia Wasm začal projektový tím hľadať hotové riešenia na vytváranie QC metrík (QC - quality control) na základe fastq súborov. Hľadanie prebiehalo medzi nástrojmi napísanými v C, C++ alebo Rust, aby bolo možné preniesť kód do WebAssembly. Okrem toho by nástroj nemal byť „surový“, vyžadovala sa služba, ktorú už vedci testovali.

V dôsledku toho bola voľba urobená v prospech seqtk. Aplikácia je pomerne populárna, je to open-source, zdrojový jazyk je C.

Pred konverziou na Wasm sa oplatí pozrieť sa na princíp kompilácie seqtk pre pracovnú plochu. Podľa súboru Makefile potrebujete:

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

V zásade môžete skompilovať seqtk pomocou Emscripten. Ak tam nie je, vystačíme si. Obrázok Docker.

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

Ak je to žiaduce, Môžete si ho zostaviť sami, ale chce to čas.

Vo vnútri kontajnera môžete jednoducho 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 používa Emscripten na generovanie súborov .wasm a .js, ktoré sa používajú na spustenie modulu WebAssemby.

Príznak USE_ZLIB sa používa na podporu knižnice zlib. Knižnica bola distribuovaná a prenesená do WebAssembly a Emscripten ju zahrnul do projektu.

Virtuálny súborový systém Emscriptten je aktivovaný. Toto FS podobný POSIX, beží v RAM vnútri prehliadača. Keď sa stránka obnoví, pamäť sa vymaže.

Aby ste pochopili, prečo je potrebný virtuálny súborový systém, stojí za to porovnať spôsob, akým spúšťate seqtk z príkazového riadku, so spôsobom, akým spúšťate kompilovaný modul WebAssembly.

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

Získanie prístupu k virtuálnemu súborovému systému je nevyhnutné, aby nedošlo k prepísaniu seqtk pre reťazec namiesto vstupu súboru. V tomto prípade sa dátový fragment zobrazí ako súbor data.fastq vo virtuálnom FS s volaním main() seqtk.

Tu je nová architektúra:

Obrázok ukazuje, že namiesto výpočtov v hlavnom vlákne prehliadača, WebWorkers. Táto metóda vám umožňuje vykonávať výpočty vo vlákne na pozadí bez ovplyvnenia odozvy prehliadača. Radič WebWorker spúšťa Worker a riadi jeho interakciu s hlavným vláknom.

Príkaz seqtk sa spúšťa pomocou Worker na pripojenom súbore. Po dokončení realizácie pracovník vytvorí výsledok vo forme prísľubu. Keď hlavné vlákno prijme správu, výsledok sa použije na aktualizáciu grafov. A tak ďalej v niekoľkých iteráciách.

A čo výkon WebAssembly?

Na vyhodnotenie zmeny výkonu použil projektový tím parameter čítacích operácií za sekundu. Čas potrebný na vytvorenie interaktívnych grafov sa neberie do úvahy, pretože obe implementácie používajú JavaScript.

Pri použití out-of-the-box riešenia bol nárast výkonu deväťnásobný.

Je to vynikajúci výsledok, ale ako sa ukázalo, existuje možnosť ho tiež optimalizovať. Faktom je, že seqtk nepoužíva veľké množstvo výsledkov QC analýzy, takže ich možno vymazať. Ak to urobíte, výsledok sa v porovnaní s JS zlepší 13-krát.

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

To však nie je všetko. Faktom je, že v tejto fáze fastq.bio prijíma výsledky analýzy volaním rôznych funkcií C. Každá z nich vypočítava vlastnú sadu charakteristík, takže každý fragment súboru sa číta dvakrát.

Aby sa tento problém obišiel, bolo rozhodnuté spojiť dve funkcie do jednej. V dôsledku toho sa produktivita zvýšila 20-krát.

Stojí za zmienku, že takýto vynikajúci výsledok nie je možné vždy dosiahnuť. V niektorých prípadoch výkon klesne, preto stojí za to posúdiť každý prípad.

Na záver môžeme povedať, že Wasm poskytuje príležitosť na zlepšenie výkonu aplikácie, ale musíte ju používať rozumne.

Skillbox odporúča:

• Dvojročný praktický kurz "Som PRO web developer".
• Online kurz "C# vývojár od 0".
• Praktický ročníkový kurz "PHP vývojár od 0 po PRO".

Zdroj: hab.com