Jak jsme 20krát zrychlili webovou aplikaci pomocí WebAssembly

Tento článek popisuje případ zrychlení aplikace prohlížeče nahrazením výpočtů JavaScriptu pomocí WebAssembly.

WebAssembly – co to je?

Stručně řečeno, toto je binární formát instrukce pro skládaný virtuální stroj. Wasm (zkrácený název) se často nazývá programovací jazyk, ale není tomu tak. Formát instrukce se provádí v prohlížeči spolu s JavaScriptem.

Je důležité, že WebAssembly lze získat kompilací zdrojů v jazycích, jako jsou C / C ++, Rust, Go. Využívá statistické typování a tzv. plochý paměťový model. Kód, jak již bylo zmíněno výše, je uložen v kompaktním binárním formátu, díky kterému je téměř stejně rychlý, jako kdyby se aplikace spouštěla ​​z příkazového řádku. Tyto funkce vedly k nárůstu popularity WebAssembly.

Připomínáme: pro všechny čtenáře "Habr" - sleva 10 000 rublů při zápisu do jakéhokoli kurzu Skillbox pomocí propagačního kódu "Habr".

Skillbox doporučuje: Praktický kurz "Mobile Developer PRO".

Wasm se v současné době používá v mnoha aplikacích, od her jako Doom 3 po webové aplikace jako Autocad a Figma. Wasm se také používá v takové oblasti, jako je výpočetní technika bez serveru.

Tento článek poskytuje příklad použití Wasm k urychlení analytické webové služby. Pro názornost jsme vzali funkční aplikaci napsanou v C, která se zkompiluje do WebAssembly. Výsledek bude použit k nahrazení sekcí JS s nízkým výkonem.

Transformace aplikace

V příkladu bude použita služba prohlížeče fastq.bio, která je určena pro genetiky. Nástroj umožňuje vyhodnotit kvalitu sekvenování DNA (dekódování).

Zde je příklad aplikace v akci:

Podrobnosti o procesu není třeba uvádět, protože jsou pro laiky poměrně složité, ale stručně řečeno, vědci mohou použít výše uvedenou infografiku, aby pochopili, zda proces sekvenování DNA proběhl hladce a jaké problémy vznikly.

Tato služba má alternativy, desktopové programy. Fastq.bio vám ale umožňuje urychlit práci vizualizací dat. Ve většině ostatních případů musíte umět pracovat s příkazovým řádkem, ale ne všichni genetici mají potřebné zkušenosti.

Vše funguje jednoduše. Vstupem jsou data prezentovaná jako textový soubor. Tento soubor je generován specializovanými sekvenčními nástroji. Soubor obsahuje seznam sekvencí DNA a skóre kvality pro každý nukleotid. Formát souboru je .fastq, odtud název služby.

Implementace v JavaScriptu

Prvním krokem pro uživatele při práci s fastq.bio je výběr příslušného souboru. Pomocí objektu File aplikace načte náhodný vzorek dat ze souboru a zpracuje tuto dávku. Úkolem JavaScriptu je zde provádět jednoduché operace s řetězci a počítat exponenty. Jedním z nich je počet nukleotidů A, C, G a T na různých fragmentech DNA.

Po výpočtu požadovaných ukazatelů jsou vizualizovány pomocí Plotly.js a služba začne pracovat s novým vzorkem dat. Rozdělení na fragmenty se provádí pro zlepšení kvality UX. Pokud budete pracovat se všemi daty najednou, proces se na chvíli zasekne, protože soubory s výsledky sekvenování zabírají stovky gigabajtů souborového prostoru. Služba na druhou stranu bere datové sekce o velikosti od 0,5 do 1 MB a pracuje s nimi krok za krokem a vytváří grafická data.

Zde je návod, jak to funguje:

Červený obdélník obsahuje algoritmus převodu řetězce pro vykreslování. Jedná se o výpočetně nejvíce zatíženou část služby. Stojí za to zkusit ho nahradit Wasm.

Testování WebAssembly

Pro vyhodnocení možnosti využití Wasm začal projektový tým hledat hotová řešení pro vytvoření QC metriky (QC - quality control) na základě fastq souborů. Vyhledávání probíhalo mezi nástroji napsanými v C, C++ nebo Rustu, aby bylo možné přenést kód do WebAssembly. Nástroj by navíc neměl být „raw“, byla vyžadována služba již testovaná vědci.

V důsledku toho byla volba učiněna ve prospěch seqtk. Aplikace je poměrně populární, je open-source, zdrojový jazyk je C.

Před převodem na Wasm byste se měli podívat na princip kompilace seqtk pro desktop. Podle Makefile je potřeba zde:

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

V zásadě můžete seqtk zkompilovat pomocí Emscripten. Pokud tam není, vystačíme si. Dockerův způsob.

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

Pokud je to žádoucí, můžete si to sestavit samiale to chce čas.

Uvnitř kontejneru můžete snadno vzít emcc jako alternativu k gcc:

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

Minimální změny:

Místo výstupu do binárního souboru používá Emscripten ke generování souborů soubory .wasm a .js, které se používají ke spuštění modulu WebAssemby.

Příznak USE_ZLIB se používá k podpoře knihovny zlib. Knihovna je distribuována a portována do WebAssembly a Emscripten ji zahrnuje do projektu.

Je aktivován virtuální souborový systém Emscriptpten. Tento FS jako POSIXběžící v paměti RAM v prohlížeči. Po obnovení stránky se paměť vymaže.

Abyste pochopili, proč je potřeba virtuální souborový systém, stojí za to porovnat způsob, jakým spouštíte seqtk z příkazového řádku, se způsobem spouštění zkompilovaného modulu WebAssembly.

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

Získání přístupu k virtuálnímu souborovému systému je nezbytné, aby nedošlo k přepsání seqtk pro vstup řetězce, nikoli pro vstup souboru. V tomto případě je datový fragment zobrazen jako soubor data.fastq ve virtuálním systému souborů s voláním main() seqtk.

Zde je nová architektura:

Obrázek ukazuje, že místo počítání v hlavním vláknu prohlížeče používá webworkers. Tato metoda umožňuje provádět výpočty na vlákně na pozadí, aniž by se snížila odezva prohlížeče. Řadič WebWorker spustí Worker a spravuje jeho interakci s hlavním vláknem.

Příkaz seqtk se spouští pomocí Worker na připojeném souboru. Po dokončení realizace vydá Pracovník výsledek ve formě Příslibu. Když je zpráva přijata hlavním vláknem, výsledek se použije k aktualizaci grafů. A tak dále po několik iterací.

A co výkon WebAssembly?

K vyhodnocení změny výkonu použil projektový tým parametr operací čtení za sekundu. Doba interaktivního vykreslování se nebere v úvahu, protože v obou implementacích je použit JavaScript.

Při použití out-of-the-box řešení byl nárůst výkonu devětkrát.

To je vynikající výsledek, ale jak se ukázalo, existuje příležitost jej optimalizovat. Faktem je, že velké množství výsledků QC analýzy seqtk nepoužívá, takže je lze odstranit. Pokud se tak stane, výsledek je 13krát lepší než v JS.

Bylo toho dosaženo jednoduchým zakomentováním příkazů printf().

Ale to není vše. Jde o to, že v této fázi fastq.bio přijímá výsledky analýzy voláním různých funkcí C. Každá z nich vypočítává vlastní sadu charakteristik, takže každý fragment souboru byl přečten dvakrát.

Aby bylo možné tento problém obejít, bylo rozhodnuto spojit obě funkce do jedné. V důsledku toho se produktivita zvýšila 20krát.

Je třeba poznamenat, že tak vynikajícího výsledku nelze vždy dosáhnout. V některých případech výkon klesá, takže se vyplatí hodnotit každý konkrétní případ.

Závěrem lze říci, že Wasm poskytuje příležitost ke zlepšení výkonu aplikace, ale musí být používán moudře.

Skillbox doporučuje:

• Dvouletý praktický kurz "Jsem PRO webový vývojář".
• Online kurz "C# vývojář od 0".
• Praktický roční kurz "PHP vývojář od 0 do PRO".

Zdroj: www.habr.com