Hoe ons 'n webtoepassing 20 keer versnel het met WebAssembly

Hoe ons 'n webtoepassing 20 keer versnel het met WebAssembly

Hierdie artikel bespreek 'n geval van die bespoediging van 'n blaaiertoepassing deur JavaScript-berekeninge met WebAssembly te vervang.

WebAssembly - wat is dit?

Kortom, dit is 'n binêre instruksieformaat vir 'n gestapelde virtuele masjien. Wasm (verkorte naam) word dikwels 'n programmeertaal genoem, maar dit is nie. Die instruksieformaat word saam met JavaScript in die blaaier uitgevoer.

Dit is belangrik dat WebAssembly verkry kan word deur bronne saam te stel in tale soos C / C ++, Rust, Go. Dit gebruik statistiese tik en die sogenaamde plat geheue model. Die kode, soos hierbo genoem, word in 'n kompakte binêre formaat gestoor, wat dit amper so vinnig maak asof die toepassing vanaf die opdragreël uitgevoer word. Hierdie kenmerke het gelei tot die toename in gewildheid van WebAssembly.

Ons herinner: vir alle lesers van "Habr" - 'n afslag van 10 000 roebels wanneer u inskryf vir enige Skillbox-kursus met behulp van die "Habr"-promosiekode.

Skillbox beveel aan: Praktiese kursus "Mobiele ontwikkelaar PRO".

Wasm word tans in baie toepassings gebruik, van speletjies soos Doom 3 tot web-geporteerde toepassings soos Autocad en Figma. Wasm word ook toegepas in so 'n veld soos bedienerlose rekenaars.

Hierdie artikel verskaf 'n voorbeeld van die gebruik van Wasm om 'n analitiese webdiens te bespoedig. Vir duidelikheid het ons 'n werkende toepassing geneem wat in C geskryf is, wat in WebAssembly saamgestel sal word. Die resultaat sal gebruik word om laeprestasie JS-afdelings te vervang.

Toepassingstransformasie

Die voorbeeld sal die fastq.bio-blaaierdiens gebruik, wat vir genetici bedoel is. Die instrument laat jou toe om die kwaliteit van DNA-volgordebepaling (dekodering) te evalueer.

Hier is 'n voorbeeld van toepassing in aksie:

Hoe ons 'n webtoepassing 20 keer versnel het met WebAssembly

Die besonderhede van die proses hoef nie gegee te word nie aangesien dit redelik kompleks is vir nie-spesialiste, maar kortliks kan wetenskaplikes die bogenoemde infografika gebruik om te verstaan ​​of die DNA-volgordebepalingsproses glad verloop het en watter probleme ontstaan ​​het.

Hierdie diens het alternatiewe, lessenaarprogramme. Maar met fastq.bio kan jy dinge bespoedig deur die data te visualiseer. In die meeste ander gevalle moet jy met die opdragreël kan werk, maar nie alle genetici het die nodige ervaring nie.

Alles werk eenvoudig. Die invoer is data wat as 'n tekslêer aangebied word. Hierdie lêer word gegenereer deur gespesialiseerde volgordebepalingsinstrumente. Die lêer bevat 'n lys van DNS-volgordes en 'n kwaliteittelling vir elke nukleotied. Die lêerformaat is .fastq, vandaar die naam van die diens.

Implementering in JavaScript

Die eerste stap vir die gebruiker wanneer hy met fastq.bio werk, is om die toepaslike lêer te kies. Deur die lêer-objek te gebruik, lees die toepassing 'n ewekansige steekproef van data uit die lêer en verwerk hierdie bondel. Die taak van JavaScript hier is om eenvoudige stringbewerkings uit te voer en eksponente te bereken. Een daarvan is die aantal nukleotiede A, C, G en T op verskillende DNA-fragmente.

Nadat die vereiste aanwysers bereken is, word hulle gevisualiseer met behulp van Plotly.js, en die diens begin met 'n nuwe datamonster werk. Die verdeling in fragmente word gedoen om die kwaliteit van UX te verbeter. As jy met al die data gelyktydig werk, sal die proses vir 'n rukkie hang, want die lêers met die resultate van die volgordebepaling neem honderde gigagrepe se lêerspasie op. Die diens, aan die ander kant, neem data-afdelings wat in grootte wissel van 0,5 tot 1 MB en werk stap vir stap daarmee saam en bou grafiese data.

Dit is hoe dit werk:

Hoe ons 'n webtoepassing 20 keer versnel het met WebAssembly

Die rooi reghoek bevat die string-omskakelingsalgoritme vir lewering. Dit is die mees rekenaargelaaide deel van die diens. Dit is die moeite werd om te probeer om dit met Wasm te vervang.

Toets WebAssembly

Om die moontlikheid van die gebruik van Wasm te evalueer, het die projekspan begin soek na klaargemaakte oplossings vir die skep van 'n QC-metriek (QC - kwaliteitbeheer) gebaseer op fastq-lêers. Die soektog is uitgevoer tussen gereedskap wat in C, C ++ of Rust geskryf is, sodat dit moontlik was om die kode na WebAssembly oor te dra. Daarbenewens moet die instrument nie "rou" wees nie, 'n diens wat reeds deur wetenskaplikes getoets is, was nodig.

Gevolglik is die keuse ten gunste van seqtk. Die toepassing is baie gewild, dit is oopbron, die brontaal is C.

Voordat u na Wasm omskakel, moet u kyk na die beginsel van die samestelling van seqtk vir die lessenaar. Volgens die Makefile is hier wat nodig is:

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

In beginsel kan u seqtk saamstel met Emscripten. As dit nie daar is nie, kom ons klaar. Docker manier.

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

Indien verlang jy kan dit self aanmekaarsitmaar dit neem tyd.

Binne die houer kan jy maklik emcc as 'n alternatief vir gcc neem:

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

Minimum veranderinge:

In plaas daarvan om na 'n binêre lêer uit te voer, gebruik Emscripten .wasm en .js om lêers te genereer, wat gebruik word om die WebAssemby-module te laat loop.

Die USE_ZLIB-vlag word gebruik om die zlib-biblioteek te ondersteun. Die biblioteek word versprei en na WebAssembly oorgedra, en Emscripten sluit dit by die projek in.

Die Emscriptpten virtuele lêerstelsel is geaktiveer. Hierdie POSIX-agtige FS, loop in RAM binne die blaaier. Wanneer die bladsy verfris is, word die geheue skoongemaak.

Om te verstaan ​​waarom 'n virtuele lêerstelsel nodig is, is dit die moeite werd om die manier waarop u seqtk vanaf die opdragreël hardloop, te vergelyk met die manier waarop u 'n saamgestelde WebAssembly-module bestuur.

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

Om toegang tot die virtuele lêerstelsel te kry, is nodig om nie seqtk vir string-invoer te herskryf nie, nie lêerinvoer nie. In hierdie geval word die datafragment vertoon as 'n data.fastq-lêer in 'n virtuele lêerstelsel met 'n oproep na main() seqtk daarop.

Hier is die nuwe argitektuur:

Hoe ons 'n webtoepassing 20 keer versnel het met WebAssembly

Die figuur wys dat dit in plaas daarvan om in die hoofblaaierdraad te bereken, dit gebruik webwerkers. Hierdie metode maak dit moontlik om berekeninge op 'n agtergronddraad uit te voer sonder om die blaaier se responsiwiteit te verswak. Wel, die WebWorker-beheerder begin die Werker en bestuur sy interaksie met die hoofdraad.

Die seqtk-opdrag word uitgevoer met 'n Werker op 'n gemonteerde lêer. Na voltooiing van uitvoering, reik die Werker die resultaat uit in die vorm van 'n Belofte. Wanneer die boodskap deur die hoofdraad ontvang word, word die resultaat gebruik om die grafieke op te dateer. En so aan vir verskeie herhalings.

Wat van die prestasie van WebAssembly?

Om die verandering in prestasie te evalueer, het die projekspan die leesbewerkings per sekonde-parameter gebruik. Interaktiewe plottyd word nie in ag geneem nie omdat JavaScript in beide implementerings gebruik word.

Wanneer die out-of-the-box oplossing gebruik word, was die prestasiewins nege keer.

Hoe ons 'n webtoepassing 20 keer versnel het met WebAssembly

Dit is 'n uitstekende resultaat, maar, soos dit geblyk het, is daar 'n geleentheid om dit te optimaliseer. Die feit is dat 'n groot aantal QC-ontledingsresultate nie deur seqtk gebruik word nie, dus kan hulle uitgevee word. As dit gedoen word, is die resultaat 13 keer beter as in JS.

Hoe ons 'n webtoepassing 20 keer versnel het met WebAssembly

Dit is bereik deur bloot kommentaar te lewer op die printf() opdragte.

Maar dit is nie al nie. Die punt is dat fastq.bio op hierdie stadium die resultate van die analise ontvang deur verskeie C-funksies op te roep Elkeen van hulle bereken sy eie stel eienskappe, sodat elke fragment van die lêer twee keer gelees is.

Om hierdie probleem te omseil, is besluit om die twee funksies in een te kombineer. Gevolglik het produktiwiteit met 20 keer toegeneem.

Hoe ons 'n webtoepassing 20 keer versnel het met WebAssembly

Daar moet kennis geneem word dat so 'n uitstekende resultaat nie altyd bereik kan word nie. In sommige gevalle daal prestasie, daarom is dit die moeite werd om elke spesifieke geval te evalueer.

As gevolgtrekking kan ons sê dat Wasm wel 'n geleentheid bied om die werkverrigting van die toepassing te verbeter, maar dit moet verstandig gebruik word.

Skillbox beveel aan:

Bron: will.com

Voeg 'n opmerking