Kako smo ubrzali web aplikaciju 20 puta koristeći WebAssembly

Ovaj članak govori o slučaju ubrzavanja aplikacije pretraživača zamjenom JavaScript kalkulacija sa WebAssembly.

WebAssembly - šta je to?

Ukratko, ovo je format binarnih instrukcija za složenu virtuelnu mašinu. Često se Wasm (skraćeni naziv) naziva programskim jezikom, ali nije. Format instrukcije se izvršava u pretraživaču zajedno sa JavaScript-om.

Važno je da se WebAssembly može dobiti kompajliranjem izvora na jezicima kao što su C/C++, Rust, Go. Koristi statističko kucanje i takozvani model ravni memorije. Kod, kao što je gore spomenuto, pohranjen je u kompaktnom binarnom formatu, što ga čini skoro jednako brzim kao da se aplikacija pokreće iz komandne linije. Ove karakteristike su dovele do porasta popularnosti WebAssembly-a.

Podsećamo: za sve čitaoce "Habra" - popust od 10 rubalja pri upisu na bilo koji Skillbox kurs koristeći "Habr" promotivni kod.

Skillbox preporučuje: Praktični kurs "Mobile Developer PRO".

Wasm se trenutno koristi u mnogim aplikacijama, od igara kao što je Doom 3 do web-portiranih aplikacija kao što su Autocad i Figma. Wasm se takođe koristi u oblasti kao što je računarstvo bez servera.

Ovaj članak daje primjer korištenja Wasma za ubrzavanje analitičke web usluge. Radi jasnoće, uzeli smo radnu aplikaciju napisanu u C, koja će se kompajlirati u WebAssembly. Rezultat će se koristiti za zamjenu JS sekcija niskih performansi.

Transformacija aplikacije

Primjer će koristiti uslugu pretraživača fastq.bio, koja je namijenjena genetičarima. Alat vam omogućava da procijenite kvalitet sekvenciranja (dekodiranja) DNK.

Evo primjera aplikacije u akciji:

Detalje procesa nije potrebno navoditi jer su prilično složeni za nespecijaliste, ali ukratko, naučnici mogu koristiti gornju infografiku kako bi shvatili da li je proces sekvenciranja DNK prošao glatko i koji su problemi nastali.

Ova usluga ima alternative, desktop programe. Ali fastq.bio vam omogućava da ubrzate svoj rad vizualizacijom podataka. U većini drugih slučajeva, morate biti u mogućnosti da radite sa komandnom linijom, ali nemaju svi genetičari potrebno iskustvo.

Sve radi jednostavno. Ulaz su podaci predstavljeni kao tekstualni fajl. Ovu datoteku generiraju specijalizirani alati za sekvenciranje. Datoteka sadrži listu sekvenci DNK i ocjenu kvaliteta za svaki nukleotid. Format datoteke je .fastq, otuda i naziv usluge.

Implementacija u JavaScript-u

Prvi korak za korisnika kada radi sa fastq.bio je odabir odgovarajuće datoteke. Koristeći objekt File, aplikacija čita nasumični uzorak podataka iz datoteke i obrađuje ovu grupu. Zadatak JavaScript-a ovdje je da izvede jednostavne string operacije i izračuna eksponente. Jedan od njih je broj nukleotida A, C, G i T na različitim fragmentima DNK.

Nakon izračunavanja potrebnih indikatora, oni se vizualiziraju pomoću Plotly.js, a servis počinje raditi s novim uzorkom podataka. Podjela na fragmente se vrši radi poboljšanja kvaliteta UX-a. Ako radite sa svim podacima odjednom, proces će visjeti neko vrijeme, jer datoteke s rezultatima sekvenciranja zauzimaju stotine gigabajta prostora datoteke. Servis, s druge strane, uzima sekcije podataka veličine od 0,5 do 1 MB i radi s njima korak po korak, izgrađujući grafičke podatke.

Ovako to funkcionira:

Crveni pravougaonik sadrži algoritam konverzije stringova za renderovanje. Ovo je kompjuterski najopterećeniji dio usluge. Vrijedi ga pokušati zamijeniti Wasmom.

Testiranje WebAssembly

Kako bi procijenio mogućnost korištenja Wasm-a, projektni tim je počeo tražiti gotova rješenja za kreiranje QC metrike (QC – kontrola kvalitete) na osnovu fastq datoteka. Pretraga je obavljena među alatima napisanim na C, C++ ili Rust, tako da je bilo moguće prenijeti kod na WebAssembly. Osim toga, alat ne bi trebao biti "sirov", potrebna je usluga koju su naučnici već testirali.

Kao rezultat toga, izbor je napravljen u korist seqtk. Aplikacija je prilično popularna, otvorenog je koda, izvorni jezik je C.

Prije konverzije u Wasm, trebali biste pogledati princip kompajliranja seqtk-a za desktop. Prema Makefileu, evo šta je potrebno:

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

U principu, možete kompajlirati seqtk koristeći Emscripten. Ako ga nema, snaći ćemo se. Docker way.

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

Po želji možete ga sami sastavitiali za ovo treba vremena.

Unutar kontejnera možete lako uzeti 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, koji se koriste za pokretanje WebAssemby modula.

Oznaka USE_ZLIB se koristi za podršku zlib biblioteci. Biblioteka se distribuira i prenosi na WebAssembly, a Emscripten je uključuje u projekat.

Virtuelni sistem datoteka Emscriptpten je aktiviran. Ovo FS sličan POSIX-u, radi u RAM-u unutar pretraživača. Kada se stranica osvježi, memorija se briše.

Da biste razumeli zašto je potreban virtuelni sistem datoteka, vredi uporediti način na koji pokrećete seqtk iz komandne linije sa načinom na koji pokrećete kompajlirani WebAssembly modul.

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

Dobijanje pristupa virtuelnom sistemu datoteka je neophodno kako se ne bi prepisivao seqtk za unos stringova, a ne za unos datoteke. U ovom slučaju, fragment podataka se prikazuje kao data.fastq datoteka u virtuelnom sistemu datoteka sa pozivom na main() seqtk na njemu.

Evo nove arhitekture:

Slika pokazuje da umjesto da računa u glavnoj niti pretraživača, koristi webworkers. Ova metoda omogućava izvođenje proračuna na pozadinskoj niti bez degradiranja odziva pretraživača. Pa, WebWorker kontroler pokreće Worker, upravljajući njegovom interakcijom s glavnom niti.

Komanda seqtk se pokreće sa Worker-om na montiranom fajlu. Nakon završetka izvršenja, Radnik izdaje rezultat u obliku Obećanja. Kada glavna nit primi poruku, rezultat se koristi za ažuriranje grafikona. I tako u nekoliko iteracija.

Šta je sa performansama WebAssembly-a?

Kako bi procijenio promjenu performansi, projektni tim je koristio parametar operacija čitanja u sekundi. Interaktivno vrijeme crtanja se ne uzima u obzir jer se JavaScript koristi u obje implementacije.

Kada se koristi gotova rješenja, povećanje performansi je bilo devet puta.

Ovo je odličan rezultat, ali, kako se pokazalo, postoji prilika da se optimizira. Činjenica je da veliki broj rezultata QC analize ne koristi seqtk, pa ih se može izbrisati. Ako se to uradi, rezultat je 13 puta bolji nego u JS-u.

To je postignuto jednostavnim komentarisanjem printf() komandi.

Ali to nije sve. Poenta je da u ovoj fazi fastq.bio prima rezultate analize pozivanjem različitih funkcija C. Svaka od njih izračunava svoj skup karakteristika, tako da je svaki fragment datoteke pročitan dva puta.

Kako bi se zaobišao ovaj problem, odlučeno je da se obje funkcije spoje u jednu. Kao rezultat toga, produktivnost se povećala za 20 puta.

Treba napomenuti da se tako izvanredan rezultat ne može uvijek postići. U nekim slučajevima performanse opadaju, pa je vrijedno procijeniti svaki pojedinačni slučaj.

Kao zaključak, možemo reći da Wasm pruža priliku za poboljšanje performansi aplikacije, ali je morate mudro koristiti.

Skillbox preporučuje:

• Dvogodišnji praktični kurs "Ja sam PRO web developer".
• Online kurs "C# programer od 0".
• Praktična godina kursa "PHP programer od 0 do PRO".

izvor: www.habr.com