Veb-ilovani 20 marta tezlashtirish uchun WebAssembly-dan qanday foydalanganmiz

Ushbu maqolada JavaScript hisoblarini WebAssembly bilan almashtirish orqali brauzer ilovasini tezlashtirish masalasi muhokama qilinadi.

WebAssembly - bu nima?

Muxtasar qilib aytganda, bu stekga asoslangan virtual mashina uchun ikkilik ko'rsatmalar formati. Wasm (qisqa ism) ko'pincha dasturlash tili deb ataladi, lekin unday emas. Yo'riqnoma formati JavaScript bilan birga brauzerda bajariladi.

WebAssembly-ni C/C++, Rust, Go kabi tillardagi manbalarni kompilyatsiya qilish orqali olish juda muhim. Bu erda statistik terish va yassi xotira modeli deb ataladigan model qo'llaniladi. Kod, yuqorida aytib o'tilganidek, ixcham ikkilik formatda saqlanadi, bu uni buyruq qatori yordamida dasturni ishga tushirish kabi tez qiladi. Ushbu imkoniyatlar WebAssembly mashhurligining o'sishiga olib keldi.

Sizga eslatib o'tamiz: "Habr" ning barcha o'quvchilari uchun - "Habr" promo-kodidan foydalangan holda har qanday Skillbox kursiga yozilishda 10 000 rubl chegirma.

Skillbox tavsiya qiladi: Amaliy kurs "Mobil dasturchi PRO".

Hozirgi vaqtda Wasm Doom 3 kabi o'yinlardan Autocad va Figma kabi veb-portlangan ilovalargacha ko'plab ilovalarda qo'llaniladi. Wasm serversiz hisoblash kabi sohalarda ham qo'llaniladi.

Ushbu maqolada analitik veb-xizmatini tezlashtirish uchun Wasm-dan foydalanish misoli keltirilgan. Aniqlik uchun biz WebAssembly-da tuzilgan C tilida yozilgan ishchi dasturni oldik. Natija JS ning kam ishlaydigan bo'limlarini almashtirish uchun ishlatiladi.

Ilovani o'zgartirish

Misol uchun, genetiklar uchun mo'ljallangan fastq.bio brauzer xizmatidan foydalaniladi. Asbob DNK ketma-ketligi (deshifrlash) sifatini baholash imkonini beradi.

Mana amaldagi ilovaga misol:

Jarayonning tafsilotlari bilan tanishib chiqishning hojati yo'q, chunki ular mutaxassis bo'lmaganlar uchun juda murakkab, ammo qisqasi, olimlar yuqoridagi infografikadan DNK ketma-ketligi jarayoni muammosiz o'tganmi yoki qanday muammolar paydo bo'lganini tushunishlari mumkin.

Ushbu xizmatda muqobillar, ish stoli dasturlari mavjud. Ammo fastq.bio ma'lumotlarni vizualizatsiya qilish orqali ishingizni tezlashtirish imkonini beradi. Ko'pgina boshqa hollarda siz buyruq satri bilan ishlashingiz kerak, ammo barcha genetiklar kerakli tajribaga ega emas.

Hammasi oddiy ishlaydi. Kirish matnli fayl shaklida taqdim etilgan ma'lumotlardir. Ushbu fayl maxsus ketma-ketlik vositalari tomonidan yaratilgan. Faylda DNK ketma-ketliklari ro'yxati va har bir nukleotid uchun sifat ko'rsatkichi mavjud. Fayl formati .fastq, shuning uchun xizmat o'z nomini oldi.

JavaScript-da amalga oshirish

Fastq.bio bilan ishlashda foydalanuvchining birinchi qadami tegishli faylni tanlashdir. Fayl ob'ektidan foydalanib, dastur fayldan ma'lumotlarning tasodifiy namunasini o'qiydi va bu paketni qayta ishlaydi. Bu erda JavaScript-ning vazifasi oddiy string operatsiyalarini bajarish va ko'rsatkichlarni hisoblashdir. Ulardan biri turli DNK fragmentlaridagi A, C, G va T nukleotidlarining soni.

Kerakli ko'rsatkichlarni hisoblab chiqqandan so'ng, ular Plotly.js yordamida vizualizatsiya qilinadi va xizmat yangi ma'lumotlar namunasi bilan ishlay boshlaydi. Bo'laklash UX sifatini yaxshilash uchun amalga oshiriladi. Agar siz bir vaqtning o'zida barcha ma'lumotlar bilan ishlasangiz, jarayon bir muncha vaqt muzlaydi, chunki ketma-ketlik natijalariga ega fayllar yuzlab gigabayt fayl maydonini egallaydi. Xizmat 0,5 dan 1 MB gacha bo'lgan o'lchamdagi ma'lumotlar qismlarini oladi va ular bilan bosqichma-bosqich ishlaydi, grafik ma'lumotlarni yaratadi.

Bu qanday ishlaydi:

Qizil to'rtburchak vizualizatsiyani olish uchun qatorni o'zgartirish algoritmini o'z ichiga oladi. Bu xizmatning eng ko'p hisoblash talab qiladigan qismidir. Uni Wasm bilan almashtirishga arziydi.

WebAssembly sinovdan o'tkazilmoqda

Wasm-dan foydalanish imkoniyatini baholash uchun loyiha jamoasi fastq fayllari asosida QC ko'rsatkichlarini (QC - sifat nazorati) yaratish uchun tayyor echimlarni qidirishni boshladi. Qidiruv C, C++ yoki Rust-da yozilgan vositalar orasida amalga oshirildi, shunda kodni WebAssembly-ga o'tkazish mumkin edi. Bundan tashqari, asbob "xom" bo'lmasligi kerak, olimlar tomonidan allaqachon sinovdan o'tgan xizmat talab qilingan.

Natijada, tanlov foydasiga amalga oshirildi seqtk. Ilova juda mashhur, u ochiq kodli, manba tili C.

Wasm-ga o'tishdan oldin, ish stoli uchun seqtk kompilyatsiya tamoyilini ko'rib chiqishga arziydi. Makefile-ga ko'ra, sizga kerak bo'lgan narsa:

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

Asos sifatida siz Emscripten yordamida seqtk kompilyatsiya qilishingiz mumkin. Agar u erda bo'lmasa, biz buni qilamiz. Docker tasviri.

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

Agar xohlasangiz Siz uni o'zingiz yig'ishingiz mumkin, lekin vaqt talab etadi.

Konteyner ichida siz emccni gcc ga muqobil sifatida osongina ishlatishingiz mumkin:

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

Minimal o'zgarishlar:

Ikkilik faylga chiqarish o'rniga Emscripten fayllarni yaratish uchun .wasm va .js dan foydalanadi, bu WebAssemby modulini ishga tushirish uchun ishlatiladi.

USE_ZLIB bayrog'i zlib kutubxonasini qo'llab-quvvatlash uchun ishlatiladi. Kutubxona tarqatildi va WebAssembly-ga ko'chirildi va Emscripten uni loyihaga kiritdi.

Emscrippten virtual fayl tizimi faollashtirilgan. Bu POSIX-ga o'xshash FS, brauzer ichidagi RAMda ishlaydi. Sahifa yangilanganda xotira tozalanadi.

Virtual fayl tizimi nima uchun kerakligini tushunish uchun seqtk-ni buyruq satridan ishga tushirish usulini kompilyatsiya qilingan WebAssembly moduli bilan solishtirishga arziydi.

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

Virtual fayl tizimiga kirish fayl kiritishdan ko'ra string uchun seqtk ni qayta yozmaslik uchun zarur. Bunday holda, ma'lumotlar fragmenti virtual FSda main() seqtk ga chaqiruv bilan data.fastq fayli sifatida ko'rsatiladi.

Mana yangi arxitektura:

Rasmda ko'rinib turibdiki, asosiy brauzer oqimidagi hisob-kitoblar o'rniga, WebWorkers. Ushbu usul sizga brauzerning javob berish qobiliyatiga ta'sir qilmasdan fon oqimida hisob-kitoblarni amalga oshirish imkonini beradi. Xo'sh, WebWorker boshqaruvchisi Worker-ni ishga tushiradi va uning asosiy ip bilan o'zaro ta'sirini boshqaradi.

Seqtk buyrug'i o'rnatilgan faylda Worker yordamida bajariladi. Bajarish tugagandan so'ng, Ishchi va'da shaklida natija beradi. Xabar asosiy tarmoq tomonidan qabul qilinganda, natija grafiklarni yangilash uchun ishlatiladi. Va shunga o'xshash bir necha takrorlashda.

WebAssembly unumdorligi haqida nima deyish mumkin?

Ishlashdagi o'zgarishlarni baholash uchun loyiha jamoasi soniya parametrini o'qish operatsiyalaridan foydalangan. Interaktiv grafiklarni yaratish uchun ketadigan vaqt hisobga olinmaydi, chunki ikkala dastur ham JavaScript-dan foydalanadi.

Chiqarilgan yechimdan foydalanganda ishlashning o'sishi to'qqiz baravarga etdi.

Bu ajoyib natija, ammo ma'lum bo'lishicha, uni optimallashtirish imkoniyati ham mavjud. Gap shundaki, ko'p sonli QC tahlil natijalari seqtk tomonidan ishlatilmaydi, shuning uchun ularni o'chirib tashlash mumkin. Agar shunday qilsangiz, natija JS bilan solishtirganda 13 barobar yaxshilanadi.

Bunga printf() buyruqlarini sharhlash orqali erishildi.

Lekin bu hammasi emas. Gap shundaki, bu bosqichda fastq.bio turli C funksiyalarini chaqirish orqali tahlil natijalarini oladi.Ularning har biri o‘ziga xos xususiyatlar to‘plamini hisoblab chiqadi, shuning uchun faylning har bir fragmenti ikki marta o‘qiladi.

Ushbu muammoni hal qilish uchun ikkita funktsiyani bitta funktsiyaga birlashtirishga qaror qilindi. Natijada hosildorlik 20 barobar oshdi.

Shuni ta'kidlash kerakki, bunday ajoyib natijaga har doim ham erishib bo'lmaydi. Ba'zi hollarda unumdorlik pasayadi, shuning uchun har bir holatni baholashga arziydi.

Xulosa qilib aytishimiz mumkinki, Wasm ilovaning ishlashini yaxshilash imkoniyatini beradi, ammo siz undan oqilona foydalanishingiz kerak.

Skillbox tavsiya qiladi:

• Ikki yillik amaliy kurs "Men PRO veb-dasturchisiman".
• Onlayn kurs "0 dan C# dasturchisi".
• Amaliy yillik kurs "PHP dasturchisi 0 dan PROgacha".

Manba: www.habr.com