WebAssembly istifadə edərək veb tətbiqini 20 dəfə necə sürətləndirdik

Bu məqalədə JavaScript hesablamalarını WebAssembly ilə əvəz etməklə brauzer proqramının sürətləndirilməsi məsələsi müzakirə olunur.

WebAssembly - bu nədir?

Bir sözlə, bu yığılmış virtual maşın üçün ikili təlimat formatıdır. Çox vaxt Wasm (qısaldılmış ad) proqramlaşdırma dili adlanır, lakin belə deyil. Təlimat formatı JavaScript ilə birlikdə brauzerdə icra olunur.

WebAssembly-nin C / C ++, Rust, Go kimi dillərdə mənbələri tərtib etməklə əldə edilə bilməsi vacibdir. O, statistik yazıdan və düz yaddaş modelindən istifadə edir. Kod, yuxarıda qeyd edildiyi kimi, kompakt ikili formatda saxlanılır ki, bu da onu demək olar ki, proqramın əmr satırından işə salındığı qədər sürətli edir. Bu xüsusiyyətlər WebAssembly-in populyarlığının artmasına səbəb oldu.

Xatırladırıq: "Habr" ın bütün oxucuları üçün - "Habr" promosyon kodundan istifadə edərək hər hansı bir Skillbox kursuna yazılarkən 10 000 rubl endirim.

Skillbox tövsiyə edir: Praktik kurs "Mobil Developer PRO".

Wasm hazırda Doom 3 kimi oyunlardan tutmuş Autocad və Figma kimi veb-portlu proqramlara qədər bir çox proqramda istifadə olunur. Wasm serversiz hesablama kimi bir sahədə də tətbiq olunur.

Bu məqalə analitik veb xidmətini sürətləndirmək üçün Wasm-dan istifadə nümunəsini təqdim edir. Aydınlıq üçün biz WebAssembly-də tərtib ediləcək C dilində yazılmış işçi tətbiqi götürdük. Nəticə aşağı performanslı JS bölmələrini əvəz etmək üçün istifadə olunacaq.

Tətbiq çevrilməsi

Nümunədə genetiklər üçün nəzərdə tutulmuş fastq.bio brauzer xidmətindən istifadə olunacaq. Alət DNT ardıcıllığının (deşifrənin) keyfiyyətini qiymətləndirməyə imkan verir.

İşdə olan bir tətbiq nümunəsidir:

Qeyri-mütəxəssislər üçün kifayət qədər mürəkkəb olduğu üçün prosesin təfərrüatlarını açıqlamağa ehtiyac yoxdur, lakin bir sözlə, alimlər yuxarıdakı infoqrafikadan istifadə edərək DNT sekvensiyası prosesinin rəvan getdiyini və hansı problemlərin yarandığını başa düşə bilərlər.

Bu xidmətin alternativləri, masa üstü proqramları var. Lakin fastq.bio sizə məlumatları vizuallaşdırmaqla işinizi sürətləndirməyə imkan verir. Əksər hallarda, komanda xətti ilə işləməyi bacarmalısınız, lakin bütün genetiklər lazımi təcrübəyə malik deyil.

Hər şey sadə işləyir. Giriş mətn faylı kimi təqdim olunan məlumatdır. Bu fayl xüsusi ardıcıllıq alətləri tərəfindən yaradılır. Fayl DNT ardıcıllığının siyahısını və hər bir nukleotid üçün keyfiyyət balını ehtiva edir. Fayl formatı .fastq-dir, ona görə də xidmətin adı.

JavaScript-də həyata keçirilməsi

Fastq.bio ilə işləyərkən istifadəçi üçün ilk addım müvafiq faylı seçməkdir. Fayl obyektindən istifadə edərək proqram fayldan verilənlərin təsadüfi nümunəsini oxuyur və bu partiyanı emal edir. Burada JavaScript-in vəzifəsi sadə sətir əməliyyatlarını yerinə yetirmək və eksponentləri hesablamaqdır. Onlardan biri müxtəlif DNT fraqmentlərindəki A, C, G və T nukleotidlərinin sayıdır.

Tələb olunan göstəricilər hesablandıqdan sonra onlar Plotly.js vasitəsilə vizuallaşdırılır və xidmət yeni məlumat nümunəsi ilə işləməyə başlayır. Fraqmentlərə bölünmə UX keyfiyyətini yaxşılaşdırmaq üçün edilir. Bütün verilənlərlə bir anda işləsəniz, proses bir müddət dayanacaq, çünki ardıcıllığın nəticələri olan fayllar yüzlərlə gigabayt fayl sahəsi tutur. Xidmət isə 0,5-dən 1 MB-a qədər ölçüdə olan məlumat bölmələrini götürür və onlarla addım-addım işləyir, qrafik məlumatları yaradır.

İşin necə qurulduğunu təqdim edirik:

Qırmızı düzbucaqlı render üçün sətir çevirmə alqoritmini ehtiva edir. Bu, xidmətin ən hesablama yüklü hissəsidir. Onu Wasm ilə əvəz etməyə çalışmağa dəyər.

WebAssembly sınaqdan keçirilir

Wasm-dan istifadə imkanlarını qiymətləndirmək üçün layihə komandası fastq faylları əsasında QC metrikasının (QC - keyfiyyətə nəzarət) yaradılması üçün hazır həllər axtarmağa başladı. Axtarış C, C++ və ya Rust dillərində yazılmış alətlər arasında aparılıb ki, kodu WebAssembly-ə köçürmək mümkün olsun. Bundan əlavə, alət "xam" olmamalıdır, artıq alimlər tərəfindən sınaqdan keçirilmiş bir xidmət tələb olunurdu.

Nəticədə seçim lehinə edildi seqtk. Tətbiq olduqca populyardır, açıq mənbəlidir, mənbə dili C-dir.

Wasm-a çevirməzdən əvvəl, iş masası üçün seqtk tərtib etmə prinsipinə baxmalısınız. Makefile-ə görə, lazım olan budur:

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

Prinsipcə, Emscripten istifadə edərək seqtk tərtib edə bilərsiniz. Əgər orada deyilsə, biz keçəcəyik. Docker yolu.

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

İstədiyində özünüz yığa bilərsinizlakin bu zaman alır.

Konteynerin içərisində gcc-ə alternativ olaraq emcc-i asanlıqla götürə bilərsiniz:

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

Minimum dəyişikliklər:

İkili fayla çıxarmaq əvəzinə, Emscripten WebAssemby modulunu işə salmaq üçün istifadə olunan fayllar yaratmaq üçün .wasm və .js istifadə edir.

USE_ZLIB bayrağı zlib kitabxanasını dəstəkləmək üçün istifadə olunur. Kitabxana paylanır və WebAssembly-ə ötürülür və Emscripten onu layihəyə daxil edir.

Emscriptpten virtual fayl sistemi aktivləşdirilib. Bu POSIX kimi FS, brauzer daxilində RAM-da işləyir. Səhifə yeniləndikdə yaddaş silinir.

Virtual fayl sisteminin nə üçün lazım olduğunu başa düşmək üçün seqtk-ni komanda xəttindən işlətmə üsulunuzu tərtib edilmiş WebAssembly modulunu işlətdiyiniz üsulla müqayisə etməyə dəyər.

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

Virtual fayl sisteminə giriş əldə etmək, fayl daxiletməsi deyil, sətir girişi üçün seqtk-ni yenidən yazmamaq üçün lazımdır. Bu halda məlumat fraqmenti virtual fayl sistemində data.fastq faylı kimi onun üzərində main() seqtk-ə zənglə göstərilir.

Budur yeni arxitektura:

Şəkil göstərir ki, əsas brauzer başlığında hesablama yerinə, istifadə edir veb işçiləri. Bu üsul, brauzerin cavab qabiliyyətini aşağı salmadan arxa planda hesablamalar aparmağa imkan verir. Yaxşı, WebWorker nəzarətçisi İşçini işə salır, onun əsas iplə qarşılıqlı əlaqəsini idarə edir.

Seqtk əmri quraşdırılmış faylda İşçi ilə işlədilir. İcra başa çatdıqdan sonra İşçi nəticəni Vəd şəklində verir. Mesaj əsas mövzu tərəfindən qəbul edildikdə, nəticə qrafikləri yeniləmək üçün istifadə olunur. Və s. bir neçə təkrarlama üçün.

WebAssembly-nin performansı haqqında nə demək olar?

Performansdakı dəyişikliyi qiymətləndirmək üçün layihə qrupu saniyədə oxunma əməliyyatlarından istifadə etdi. JavaScript hər iki tətbiqetmədə istifadə edildiyi üçün interaktiv planın vaxtı nəzərə alınmır.

Qutudan çıxarılan həlli istifadə edərkən, performans artımı doqquz dəfə idi.

Bu əla nəticədir, lakin məlum oldu ki, onu optimallaşdırmaq imkanı var. Fakt budur ki, çox sayda QC analizi nəticələri seqtk tərəfindən istifadə edilmir, buna görə də onlar silinə bilər. Bu edilərsə, nəticə JS-dən 13 dəfə yaxşıdır.

Bu, sadəcə olaraq printf() əmrlərini şərh etməklə əldə edilmişdir.

Ancaq bu, hamısı deyil. Məsələ burasındadır ki, fastq.bio bu mərhələdə müxtəlif C funksiyalarını çağıraraq təhlilin nəticələrini alır.Onların hər biri öz xüsusiyyətləri toplusunu hesablayır ki, faylın hər bir fraqmenti iki dəfə oxunub.

Bu problemi həll etmək üçün iki funksiyanı bir funksiyada birləşdirməyə qərar verildi. Nəticədə məhsuldarlıq 20 dəfə artıb.

Qeyd etmək lazımdır ki, belə görkəmli nəticə həmişə əldə edilə bilməz. Bəzi hallarda performans aşağı düşür, buna görə də hər bir konkret işi qiymətləndirməyə dəyər.

Nəticə olaraq deyə bilərik ki, Wasm proqramın işini yaxşılaşdırmaq imkanı verir, lakin siz ondan ağıllı istifadə etməlisiniz.

Skillbox tövsiyə edir:

• İki illik praktik kurs "Mən PRO veb tərtibatçısıyam".
• Onlayn kurs "0-dan C# tərtibçisi".
• Praktiki il kursu "PHP tərtibçisi 0-dan PRO".

Mənbə: www.habr.com