Kako smo pomoću WebAssembly ubrzali web aplikaciju 20 puta

U ovom članku razmatra se slučaj ubrzavanja pregledničkih aplikacija zamjenom JavaScript izračuna s WebAssembly-jem.

Što je WebAssembly?

Ukratko, to je binarni format instrukcija za stakastu virtualnu mašinu. Često se skraćeno naziva Wasm i smatra se programskim jezikom, ali to nije točno. Format instrukcija izvršava se u pregledniku zajedno s JavaScript-om.

Važno je da se WebAssembly može dobiti kompiliranjem izvora na jezicima poput C/C++, Rust, Go. Ovdje se primjenjuje statička tipizacija i takozvani ravni model memorije. Kod, kao što je ranije rečeno, pohranjuje se u kompaktnom binarnom formatu, što omogućuje gotovo jednaku brzinu izvršavanja kao kada se aplikacija pokreće putem komandne linije. Ove mogućnosti su dovele do rasta popularnosti WebAssembly-a.

Podsjećamo: za sve čitatelje "Habra" — popust od 10 000 rubalja prilikom upisa na bilo koji tečaj Skillbox uz promo kod "Habr".

Skillbox preporučuje: Praktični tečaj «Mobilni programer PRO».

Do sada se Wasm koristi u mnogim aplikacijama, od igara poput Doom 3 do portiranih web aplikacija poput Autocad-a i Figme. Wasm se koristi i u području serverless izračuna.

U ovom članku naveden je primjer korištenja Wasm za ubrzavanje analitičkog web servisa. Za ilustraciju smo uzeli radnu aplikaciju napisanu u C-u koja će se kompajlirati u WebAssembly. Rezultat će se koristiti za zamjenu manje učinkovitih dijelova JS-a.

Transformacija aplikacije

U primjeru će se koristiti preglednički servis fastq.bio, koji je namijenjen genetičarima. Alat omogućuje procjenu kvalitete sekvenciranja (dekodiranja) DNK.

Evo primjera aplikacije u radu:

Detalji procesa ne trebaju biti navedeni, jer su prilično složeni za ne stručnjake, ali ukratko, znanstvenici putem gore navedene infografike mogu razumjeti je li proces sekvenciranja DNK prošao glatko i koji su izazovi nastali.

Ova usluga ima alternative, desktop programe. No, fastq.bio omogućuje ubrzanje rada vizualizacijom podataka. U većini drugih slučajeva potrebno je znati raditi s komandnom linijom, ali nisu svi genetičari posjeduju potrebna iskustva.

Sve radi jednostavno. Na ulazu su podaci predstavljeni u obliku tekstualne datoteke. Ova datoteka se generira specijaliziranim alatima za sekvenciranje. U datoteci se nalazi popis DNA sekvenci i procjena kvalitete za svaki nukleotid. Format datoteke je .fastq, pa je servis i dobio to ime.

Implementacija u JavaScriptu

Prvi korak korisnika prilikom rada s fastq.bio je odabir odgovarajuće datoteke. Koristeći objekt File, aplikacija čita slučajni uzorak podataka iz datoteke i obrađuje ovu grupu. Zadatak JavaScript-a ovdje je izvršavanje jednostavnih operacija sa stringovima i brojanje pokazatelja. Jedan od njih je broj nukleotida A, C, G i T na različitim fragmentima DNA.

Nakon izračuna potrebnih pokazatelja, oni se vizualiziraju pomoću Plotly.js, a servis počinje raditi s novim uzorkom podataka. Razdvajanje na fragmente napravljeno je radi poboljšanja kvalitete UX-a. Ako se radi sa svim podacima odjednom, proces će se zadržati neko vrijeme, jer datoteke s rezultatima sekvenciranja zauzimaju stotine gigabajta diska. Servis uzima dijelove podataka veličine od 0,5 do 1 MB i radi s njima korak po korak, gradeći grafičke podatke.

Evo kako to radi:

U crvenom pravokutniku nalazi se algoritam za string transformacije za dobivanje vizualizacije. Ovo je najviše opterećeni dio servisa s aspekta računanja. Vrijedi pokušati zamijeniti ga s Wasm.

Testiranje WebAssembly-a

Za procjenu mogućnosti korištenja Wasm, tim projekta se bavio pronalaskom gotovih rješenja za kreiranje QC metrike (QC — kontrola kvalitete) na osnovu fastq datoteka. Pretraživanje je rađeno među alatima napisanim u C, C++ ili Rust, kako bi se omogućilo prenošenje koda na WebAssembly. Osim toga, alat ne bi trebao biti 'sirov', potreban je servis koji su već testirali znanstvenici.

Kao rezultat, izbor je pao na seqtk. Aplikacija je prilično popularna, open-source je, izvorni jezik — C.

Prije konverzije u Wasm, vrijedi pogledati princip kompilacije seqtk za desktop. Prema Makefile-u, ovo je ono što je potrebno:

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

U principu, seqtk se može kompilirati pomoću Emscripten. Ako ga nemate, može se koristiti na sljedeći način Docker.

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

Ako želite možete ga i sami sastaviti, ali to zahtijeva vrijeme.

Unutar kontejnera bez problema može se koristiti emcc kao alternativu gcc-u:

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

Minimalne promjene:

Umjesto izlaza u binarnu datoteku, Emscripten koristi .wasm i .js za generiranje datoteka koje se koriste za pokretanje modula WebAssembly.

Za podršku zlib biblioteci koristi se zastavica USE_ZLIB. Biblioteka je široko rasprostranjena i portirana na WebAssembly, a Emscripten je uključuje u projekt.

Aktivira se virtualni datotečni sustav Emscriptena. To je POSIX-sličan FS, koji radi u radnoj memoriji unutar preglednika. Kada se stranica osvježava, memorija se čisti.

Da bismo shvatili zašto je potreban virtualni datotečni sustav, valja usporediti način pokretanja seqtk iz naredbenog retka s načinom pokretanja kompajliranog modula WebAssembly.

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

Pristup virtualnom datotečnom sustavu je potreban kako ne bismo morali prepisivati seqtk za unos s retka umjesto iz datoteke. U tom slučaju, fragment podataka se prikazuje kao datoteka data.fastq u virtualnom FS-u s pozivom na main() seqtk-a.

Evo nova arhitektura:

Slika prikazuje da se umjesto izvođenja izračuna u glavnoj niti preglednika koriste WebWorkers. Ovaj pristup omogućava izvođenje izračuna u pozadinskoj niti, ne narušavajući responzivnost preglednika. Kontroler WebWorker pokreće radnika, upravljajući njegovom interakcijom s glavnom niti.

Tim seqtk-a se pokreće putem radnika na montiranoj datoteci. Kada radnik završi s izvršavanjem, rezultat se isporučuje u obliku Promise-a. Kada glavni tok primi poruku, rezultat se koristi za ažuriranje grafova. Tako se provodi kroz nekoliko iteracija.

Što je s performansama WebAssembly-ja?

Kako bismo procijenili promjenu performansi, tim projekta se služio parametrom broja operacija čitanja u sekundi. Vrijeme izrade interaktivnih grafova se ne uzima u obzir, budući da se u obje implementacije koristi JavaScript.

Korištenjem rješenja 'iz kutije' dobitak performansi je iznosio devet puta.

To je izvanredan rezultat, ali se ispostavilo da postoji mogućnost dodatne optimizacije. Naime, veliki broj rezultata QC analize se ne koristi u seqtk-u, pa ih je moguće ukloniti. Ako se to učini, rezultat se poboljšava za 13 puta u usporedbi s JS-om.

To je postignuto jednostavnim komentiranjem printf() komandi.

No i to nije sve. Naime, u ovoj fazi fastq.bio dobiva rezultate analize pozivom različitih C funkcija. Svaka od njih izračunava svoj skup karakteristika, tako da se svaki fragment datoteke čita dvaput.

Kako bismo zaobišli ovaj problem, odlučeno je spojiti dvije funkcije u jednu. Kao rezultat, performanse su povećane 20 puta.

Valja napomenuti da se takvo izvanredno postignuće ne može postići uvijek. U nekim slučajevima performanse opadaju, stoga treba procijeniti svaki konkretni slučaj.

Kao zaključak može se reći da Wasm doista omogućava poboljšanje performansi aplikacije, ali ga treba koristiti mudro.

Skillbox preporučuje:

• Dvoipogodišnji praktični tečaj „Ja sam PRO web programer“.
• Online tečaj «C# developer od 0».
• Praktični godišnji tečaj «PHP programer od nule do PRO».

Izvor: habr.com