Dit artikel bespreekt een voorbeeld voor het versnellen van een browserapplicatie door JavaScript-berekeningen te vervangen door WebAssembly.
WebAssembly - wat is het?
Kortom, dit is een binair instructieformaat voor een op een stapel gebaseerde virtuele machine. Wasm (korte naam) wordt vaak een programmeertaal genoemd, maar dat is het niet. Het instructieformaat wordt samen met JavaScript in de browser uitgevoerd.
Belangrijk is dat WebAssembly te verkrijgen is door bronnen samen te stellen in talen als C/C++, Rust, Go. Hierbij wordt gebruik gemaakt van statistische typering en het zogenaamde flat memory model. De code wordt, zoals hierboven vermeld, opgeslagen in een compact binair formaat, waardoor deze bijna net zo snel is als het uitvoeren van de applicatie via de opdrachtregel. Deze mogelijkheden hebben geleid tot de groei van de populariteit van WebAssembly.
Herinnering: voor alle lezers van "Habr" - een korting van 10 roebel bij inschrijving voor een Skillbox-cursus met behulp van de promotiecode "Habr".
Skillbox beveelt aan: Praktische cursus .
Momenteel wordt Wasm in veel toepassingen gebruikt, van games als Doom 3 tot webgeporteerde applicaties zoals Autocad en Figma. Wasm wordt ook gebruikt op gebieden als serverloos computergebruik.
Dit artikel geeft een voorbeeld van het gebruik van Wasm om een analysewebservice te versnellen. Voor de duidelijkheid hebben we een werkende applicatie genomen, geschreven in C, die is gecompileerd in WebAssembly. Het resultaat zal worden gebruikt om slecht presterende delen van JS te vervangen.
Applicatietransformatie
In het voorbeeld wordt de browserservice fastq.bio gebruikt, die bedoeld is voor genetici. Met de tool kunt u de kwaliteit van DNA-sequencing (ontcijferen) evalueren.
Hier is een voorbeeld van de applicatie in actie:
Het is niet de moeite waard om op de details van het proces in te gaan, omdat ze behoorlijk complex zijn voor niet-specialisten, maar kortom: wetenschappers kunnen de bovenstaande infographic gebruiken om te begrijpen of het DNA-sequencing-proces soepel verliep en welke problemen zich voordeden.
Deze service heeft alternatieven, desktopprogramma's. Maar met fastq.bio kunt u uw werk versnellen door de gegevens te visualiseren. In de meeste andere gevallen moet je met de commandoregel kunnen werken, maar niet alle genetici hebben de nodige ervaring.
Alles werkt eenvoudig. De invoer bestaat uit gegevens die worden gepresenteerd in de vorm van een tekstbestand. Dit bestand wordt gegenereerd door gespecialiseerde sequencingtools. Het bestand bevat een lijst met DNA-sequenties en een kwaliteitsscore voor elk nucleotide. Het bestandsformaat is .fastq, vandaar dat de service zijn naam heeft gekregen.
Implementatie in JavaScript
De eerste stap van de gebruiker bij het werken met fastq.bio is het selecteren van het juiste bestand. Met behulp van het File-object leest de toepassing een willekeurige steekproef van gegevens uit een bestand en verwerkt die batch. De taak van JavaScript hier is het uitvoeren van eenvoudige tekenreeksbewerkingen en het berekenen van statistieken. Eén daarvan is het aantal nucleotiden A, C, G en T op verschillende DNA-fragmenten.
Nadat de benodigde indicatoren zijn berekend, worden ze gevisualiseerd met Plotly.js en begint de service te werken met een nieuw gegevensvoorbeeld. Het chunken wordt gedaan om de kwaliteit van de UX te verbeteren. Als u met alle gegevens tegelijk werkt, loopt het proces enige tijd vast, omdat de bestanden met de sequencing-resultaten honderden gigabytes aan bestandsruimte in beslag nemen. De service gebruikt stukjes gegevens variërend in grootte van 0,5 tot 1 MB en werkt er stap voor stap mee, waarbij grafische gegevens worden opgebouwd.
Вот как это работает:
De rode rechthoek bevat het stringtransformatie-algoritme voor het verkrijgen van visualisatie. Dit is het meest rekenintensieve deel van de service. Het is de moeite waard om het te vervangen door Wasm.
WebAssembly testen
Om de mogelijkheid van het gebruik van Wasm te beoordelen, ging het projectteam op zoek naar kant-en-klare oplossingen voor het creëren van QC-metrieken (QC - kwaliteitscontrole) op basis van fastq-bestanden. Er werd gezocht tussen tools geschreven in C, C++ of Rust, zodat het mogelijk was de code over te zetten naar WebAssembly. Bovendien mocht de tool niet ‘ruw’ zijn; er was een dienst nodig die al door wetenschappers was getest.
Als gevolg hiervan werd de keuze gemaakt ten gunste van . De applicatie is behoorlijk populair, het is open-source, de brontaal is C.
Voordat u naar Wasm converteert, is het de moeite waard om naar het compilatieprincipe van seqtk voor de desktop te kijken. Volgens de Makefile heb je het volgende nodig:
# Compile to binary
$ gcc seqtk.c
-o seqtk
-O2
-lm
-lzIn principe kunt u seqtk compileren met Emscripten. Als het er niet is, doen we het maar. .
$ docker pull robertaboukhalil/emsdk:1.38.26
$ docker run -dt --name wasm-seqtk robertaboukhalil/emsdk:1.38.26Desgewenst , maar het kost tijd.
In een container kun je emcc eenvoudig gebruiken als alternatief voor gcc:
# Compile to WebAssembly
$ emcc seqtk.c
-o seqtk.js
-O2
-lm
-s USE_ZLIB=1
-s FORCE_FILESYSTEM=1Minimale wijzigingen:
In plaats van uit te voeren naar een binair bestand, gebruikt Emscripten .wasm en .js om de bestanden te genereren, die worden gebruikt om de WebAssemby-module uit te voeren.
De vlag USE_ZLIB wordt gebruikt om de zlib-bibliotheek te ondersteunen. De bibliotheek is gedistribueerd en geporteerd naar WebAssembly, en Emscripten neemt deze op in het project.
Het virtuele bestandssysteem Emscrippten is geactiveerd. Dit , uitgevoerd in RAM in de browser. Wanneer de pagina wordt vernieuwd, wordt het geheugen gewist.
Om te begrijpen waarom een virtueel bestandssysteem nodig is, is het de moeite waard om de manier waarop u seqtk vanaf de opdrachtregel uitvoert, te vergelijken met de manier waarop u een gecompileerde WebAssembly-module uitvoert.
# On the command line
$ ./seqtk fqchk data.fastq
# In the browser console
> Module.callMain(["fqchk", "data.fastq"])Het verkrijgen van toegang tot het virtuele bestandssysteem is noodzakelijk om seqtk niet te herschrijven voor string in plaats van voor bestandsinvoer. In dit geval wordt het gegevensfragment weergegeven als een data.fastq-bestand in de virtuele FS met een aanroep van main() seqtk erop.
Dit is de nieuwe architectuur:
De figuur laat zien dat in plaats van berekeningen in de hoofdthread van de browser, . Met deze methode kunt u berekeningen uitvoeren in een achtergrondthread zonder de responsiviteit van de browser te beïnvloeden. Welnu, de WebWorker-controller start de Worker en beheert de interactie met de hoofdthread.
De opdracht seqtk wordt uitgevoerd met Worker op het aangekoppelde bestand. Na voltooiing van de uitvoering produceert de Werker een resultaat in de vorm van een Belofte. Wanneer een bericht door de hoofdthread wordt ontvangen, wordt het resultaat gebruikt om de grafieken bij te werken. En zo verder in verschillende iteraties.
Hoe zit het met de prestaties van WebAssembly?
Om de verandering in de prestaties te evalueren, gebruikte het projectteam de parameter Leesbewerkingen per seconde. Er wordt geen rekening gehouden met de tijd die nodig is om interactieve grafieken te bouwen, aangezien beide implementaties JavaScript gebruiken.
Bij gebruik van de out-of-the-box oplossing was de prestatieverbetering negen keer zo groot.
Dit is een uitstekend resultaat, maar het blijkt dat er ook een mogelijkheid is om het te optimaliseren. Feit is dat een groot aantal QC-analyseresultaten niet door seqtk wordt gebruikt en dus kan worden verwijderd. Als je dit doet, verbetert het resultaat 13 keer vergeleken met JS.
Dit werd bereikt door eenvoudigweg commentaar te geven op de printf()-opdrachten.
Maar dat is niet alles. Feit is dat fastq.bio in dit stadium de analyseresultaten ontvangt door verschillende functies in C aan te roepen, elk berekent zijn eigen reeks kenmerken, zodat elk fragment van het bestand twee keer wordt gelezen.
Om dit probleem te omzeilen, werd besloten om twee functies in één te combineren. Als gevolg hiervan nam de productiviteit twintig keer toe.
Het is vermeldenswaard dat een dergelijk uitstekend resultaat niet altijd kan worden bereikt. In sommige gevallen zullen de prestaties afnemen, dus het is de moeite waard om elk geval te evalueren.
Concluderend kunnen we zeggen dat Wasm een mogelijkheid biedt om de applicatieprestaties te verbeteren, maar dat je er verstandig mee moet omgaan.
Skillbox beveelt aan:
- Tweejarige praktijkopleiding .
- Online cursus .
- Praktische jaarcursus .
Bron: www.habr.com