Hur vi genom WebAssembly ökade webbläsarens prestanda 20 gånger

I den här artikeln diskuteras ett fall kring att snabba upp ett webbaserat program genom att ersätta JavaScript-beräkningar med WebAssembly.

WebAssembly – vad är det?

Kort sagt är det ett binärt format av instruktioner för en stackbaserad virtuell maskin. Ofta kallas Wasm (förkortningen) för ett programmeringsspråk, men så är det inte. Instruktionsformatet körs i webbläsaren tillsammans med JavaScript.

Det är viktigt att notera att WebAssembly kan genereras genom att kompilera källkod på språk som C/C++, Rust, Go. Här tillämpas statisk typning och den så kallade platta minnesmodellen. Koden, som nämnts tidigare, lagras i ett kompakt binärt format, vilket gör att den körs nästan lika snabbt som om programmet kördes via kommandoraden. Dessa möjligheter har lett till en ökning av WebAssembly:s popularitet.

Påminnelse: för alla läsare av "Habr" — 10 000 rubel rabatt vid registrering för vilken kurs som helst på Skillbox med rabattkoden "Habr".

Skillbox rekommenderar: Praktisk kurs «Mobilutvecklare PRO».

För närvarande används Wasm i många applikationer, från spel som Doom 3 till webbapplikationer som Autocad och Figma. Wasm tillämpas också inom serverless beräkningar.

I denna artikel ges ett exempel på användningen av Wasm för att snabba upp en analytisk webbservice. För att illustrera detta har vi valt ett fungerande program, skrivet i C, som kommer att kompileras till WebAssembly. Resultatet kommer att användas för att ersätta lågpresterande delar av JS.

Transformation av applikationen

I exemplet kommer webbtjänsten fastq.bio att användas, som är avsedd för genetiker. Verktyget gör det möjligt att bedöma kvaliteten på DNA-sekvensering.

Här är ett exempel på programmet i arbete:

Det är inte värt att gå in på detaljerna i processen, eftersom de är ganska komplexa för lekmän, men kort sagt kan forskare utifrån den ovan nämnda infographicen förstå om DNA-sekvenseringsprocessen har gått smidigt och vilka problem som uppstått.

Denna tjänst har alternativ, skrivbordsprogram. Men fastq.bio gör det möjligt att snabba upp arbetet genom att visualisera data. I de flesta andra fall krävs det att man kan arbeta med kommandoraden, men inte alla genetiker har den nödvändiga erfarenheten.

All of this works simply. The input consists of data represented in the form of a text file. This file is generated by specialized tools for sequencing. It contains a list of DNA sequences and a quality assessment for each nucleotide. The file format is .fastq, which is why the service got its name.

Implementation in JavaScript

The first step for the user when working with fastq.bio is to select the appropriate file. Using the File object, the application reads a random sample of data from the file and processes that batch. The task of JavaScript here is to perform simple string operations and count metrics. One of them is the number of nucleotides A, C, G, and T across different DNA fragments.

After calculating the necessary metrics, they are visualized using Plotly.js, and the service begins to work with a new data sample. The segmentation is done to improve UX quality. If you work with all the data at once, the process will hang for a while since sequencing results files take up hundreds of gigabytes of storage space. The service takes data chunks ranging from 0.5 to 1 MB and processes them step by step, building graphical data.

Here’s how it works:

The red rectangle contains the string transformation algorithm for obtaining visualization. This is the most computation-heavy part of the service. It’s worth trying to replace it with Wasm.

Testing WebAssembly

To assess the feasibility of using Wasm, the project team searched for existing solutions to create QC metrics (QC — quality control) based on fastq files. The search was conducted among tools written in C, C++, or Rust to enable code porting to WebAssembly. Additionally, the tool should not be 'raw'; a service that is already validated by scientists was required.

As a result, the choice was made in favor of seqtk. The application is quite popular, it is open-source, and the source language is C.

Before transforming it into Wasm, it is necessary to look at the compilation principle of seqtk for desktop. According to the Makefile, here’s what you need:

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

In principle, seqtk can be compiled using Emscripten. If it’s not available, we can manage with Docker.

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

If desired, it can also be built manually, but that will take time.

Inuti containern kan emcc användas som ett alternativ till gcc utan problem:

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

Minst förändringar:

Istället för att skriva ut till en binärfil används Emscripten för att generera filer .wasm och .js, som används för att köra WebAssembly-modulen.

För att stödja zlib-biblioteket används flaggan USE_ZLIB. Biblioteket är väletablerat och portat till WebAssembly, och Emscripten inkluderar det i projektet.

Den virtuella filsystemet Emscripten aktiveras. Det är ett POSIX-liknande filsystem, som fungerar i RAM-minnet i webbläsaren. När sidan uppdateras rensas minnet.

För att förstå varför ett virtuellt filsystem behövs är det värt att jämföra hur seqtk startas från kommandoraden med hur den kompilerade WebAssembly-modulen startas.

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

Åtkomst till det virtuella filsystemet behövs för att undvika att skriva om seqtk för sträng- snarare än filinmatning. I detta fall avbildas datasegmentet som filen data.fastq i det virtuella filsystemet med ett anrop på den i main() seqtk.

Här är den nya arkitekturen:

Bild visar att istället för beräkningar i huvudtråden i webbläsaren används WebWorkers. Denna metod möjliggör att köra beräkningar i en bakgrundstråd utan att försämra webbläsarens responsivitet. Och WebWorker-kontrollern startar arbetaren och hanterar dess interaktion med huvudtråden.

Kommandot seqtk körs med hjälp av en arbetare på den monterade filen. Efter att arbetaren har avslutat sin körning ger den resultatet i form av ett Promise. När meddelandet mottas av huvudtråden används resultatet för att uppdatera diagrammen. Och det sker i flera iterationer.

Vad sägs om WebAssembly-prestanda?

För att utvärdera prestandaförändringen använde projektlaget antalet läsoperationer per sekund som parameter. Tiden för att bygga interaktiva diagram ingår inte, eftersom JavaScript används i båda implementationerna.

Vid användning av «ur-lådan»-lösningen var prestandaförbättringen nio gånger.

Detta är ett utomordentligt resultat, men som det visade sig finns det även möjlighet att optimera det. Många resultat av QC-analys används inte av seqtk, så dessa kan tas bort. Om detta görs förbättras resultatet jämfört med JS med 13 gånger.

Det uppnåddes genom att helt enkelt kommentera ut printf()-kommandon.

Men det är inte allt. Det handlar om att fastq.bio på detta stadium får analyseresultat genom anrop av olika C-funktioner. Varje funktion beräknar sin egen uppsättning egenskaper, så varje filfragment läses två gånger.

För att lösa detta problem beslutade vi att kombinera två funktioner till en. Resultatet blev en 20-faldig ökning av prestandan.

Det är värt att notera att ett så anmärkningsvärt resultat inte alltid kan uppnås. I vissa fall minskar prestandan, så det är viktigt att bedöma varje enskilt fall.

Som slutsats kan vi säga att Wasm verkligen erbjuder möjlighet att förbättra applikationens prestanda, men det bör användas med omsorg.

Skillbox rekommenderar:

• Tvåårig praktisk kurs «Jag är webbutvecklare PRO».
• Onlinekurs C#-utvecklare från grunden.
• Praktisk årskurs PHP-utvecklare från grunden till PRO.

Källa: habr.com