Бид вэб програмыг 20 удаа хурдасгахын тулд WebAssembly-г хэрхэн ашигласан

Энэ нийтлэлд JavaScript тооцооллыг WebAssembly-ээр солих замаар хөтчийн програмыг хурдасгах тохиолдлыг авч үзэх болно.

WebAssembly - энэ юу вэ?

Товчхондоо, энэ нь стек дээр суурилсан виртуал машинд зориулсан хоёртын зааврын формат юм. Wasm (богино нэр) нь ихэвчлэн програмчлалын хэл гэж нэрлэгддэг боловч тийм биш юм. Зааврын форматыг JavaScript-ийн хамт хөтөч дээр гүйцэтгэдэг.

WebAssembly-ийг C/C++, Rust, Go гэх мэт хэл дээрх эх сурвалжийг эмхэтгэх замаар олж авах нь чухал юм. Энд статистик бичих, хавтгай санах ой гэж нэрлэгддэг загварыг ашигладаг. Дээр дурьдсанчлан код нь авсаархан хоёртын форматаар хадгалагддаг бөгөөд энэ нь командын мөрийг ашиглан програмыг ажиллуулахтай адил хурдан юм. Эдгээр чадварууд нь WebAssembly-ийн нэр хүндийг өсгөхөд хүргэсэн.

Бид танд сануулж байна: "Хабр" -ын бүх уншигчдад - "Habr" сурталчилгааны кодыг ашиглан Skillbox-ын аль ч курст бүртгүүлэхдээ 10 рублийн хөнгөлөлт.

Skillbox зөвлөж байна: Практик курс "Мобайл хөгжүүлэгч PRO".

Одоогийн байдлаар Wasm нь Doom 3 гэх мэт тоглоомуудаас эхлээд Autocad, Figma зэрэг вэбээр ажилладаг програмуудад ашиглагддаг. Wasm нь сервергүй тооцоолол гэх мэт салбарт бас ашиглагддаг.

Энэ нийтлэлд аналитик вэб үйлчилгээг хурдасгахын тулд Wasm ашиглах жишээг үзүүлэв. Тодорхой болгохын тулд бид WebAssembly-д эмхэтгэсэн C хэл дээр бичигдсэн ажлын програмыг авсан. Үр дүн нь JS-ийн дутуу гүйцэтгэлтэй хэсгүүдийг солиход ашиглагдана.

Хэрэглээний хувиргалт

Жишээ нь генетикчдэд зориулагдсан fastq.bio хөтчийн үйлчилгээг ашиглах болно. Энэхүү хэрэгсэл нь ДНХ-ийн дарааллыг (тайлах) чанарыг үнэлэх боломжийг олгодог.

Ажиллаж байгаа програмын жишээ энд байна:

Процессын нарийн ширийнийг нарийн ширийн зүйл нь мэргэжилтэн бус хүмүүст нэлээд төвөгтэй байдаг тул тайлбарлах нь үнэ цэнэтэй зүйл биш боловч товчхондоо эрдэмтэд дээрх инфографикийг ашиглан ДНХ-ийн дараалал тогтоох үйл явц саадгүй явагдаж байгаа эсэх, ямар асуудал үүссэнийг ойлгох боломжтой.

Энэ үйлчилгээ нь өөр хувилбарууд, ширээний програмуудтай. Гэхдээ fastq.bio нь өгөгдлийг дүрслэн харуулах замаар ажлаа хурдасгах боломжийг олгодог. Бусад ихэнх тохиолдолд та командын мөртэй ажиллах чадвартай байх хэрэгтэй, гэхдээ бүх генетикчдэд шаардлагатай туршлага байдаггүй.

Бүх зүйл энгийнээр ажилладаг. Оролт нь текст файл хэлбэрээр үзүүлсэн өгөгдөл юм. Энэ файлыг тусгай дарааллын хэрэгслүүдээр үүсгэсэн. Энэ файл нь ДНХ-ийн дарааллын жагсаалт болон нуклеотид бүрийн чанарын оноог агуулна. Файлын формат нь .fastq, ийм учраас үйлчилгээ нь ийм нэртэй болсон.

JavaScript дээр хэрэгжүүлэх

Хэрэглэгчийн fastq.bio-тэй ажиллах эхний алхам бол тохирох файлыг сонгох явдал юм. File объектыг ашиглан програм нь файлаас санамсаргүй түүврийн өгөгдлийг уншиж, уг багцыг боловсруулдаг. Энд JavaScript-ийн үүрэг бол энгийн мөрт үйлдлийг гүйцэтгэх, хэмжүүрийг тооцоолох явдал юм. Тэдгээрийн нэг нь ДНХ-ийн өөр өөр хэсгүүдийн A, C, G, T нуклеотидын тоо юм.

Шаардлагатай үзүүлэлтүүдийг тооцоолсны дараа тэдгээрийг Plotly.js ашиглан дүрслэн харуулах ба үйлчилгээ нь шинэ өгөгдлийн дээжтэй ажиллаж эхэлдэг. UX-ийн чанарыг сайжруулахын тулд хуваах ажлыг хийдэг. Хэрэв та бүх өгөгдөлтэй нэгэн зэрэг ажиллах юм бол дарааллын үр дүн бүхий файлууд хэдэн зуун гигабайт файлын зай эзэлдэг тул процесс хэсэг хугацаанд зогсох болно. Энэхүү үйлчилгээ нь 0,5-аас 1 МБ хүртэлх хэмжээтэй өгөгдлийн хэсгүүдийг авч, тэдгээртэй алхам алхмаар ажиллаж, график өгөгдлийг бий болгодог.

Энэ нь ингэж ажилладаг:

Улаан тэгш өнцөгт нь дүрслэлийг олж авах мөрийг хувиргах алгоритмыг агуулдаг. Энэ бол үйлчилгээний хамгийн их тооцоолсон хэсэг юм. Үүнийг Wasm-ээр солихыг оролдох нь зүйтэй.

WebAssembly-г туршиж байна

Wasm-ийг ашиглах боломжийг үнэлэхийн тулд төслийн баг fastq файл дээр суурилсан QC хэмжигдэхүүн (QC - чанарын хяналт) үүсгэх бэлэн шийдлүүдийг хайж эхэлсэн. Хайлтыг C, C++ эсвэл Rust хэл дээр бичигдсэн хэрэгслүүдийн дунд явуулсан бөгөөд ингэснээр кодыг WebAssembly руу шилжүүлэх боломжтой болсон. Нэмж дурдахад, багаж нь "түүхий" байх ёсгүй, эрдэмтэд аль хэдийн туршиж үзсэн үйлчилгээ шаардлагатай байсан.

Үүний үр дүнд сонголт нь ашигтайгаар хийгдсэн seqtk. Энэ програм нь нэлээд алдартай, нээлттэй эх сурвалж, эх хэл нь C.

Wasm руу хөрвүүлэхээсээ өмнө ширээний компьютерт зориулсан seqtk эмхэтгэлийн зарчмыг авч үзэх нь зүйтэй. Makefile-ийн дагуу танд хэрэгтэй зүйл:

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

Зарчмын хувьд та Emscripten ашиглан seqtk эмхэтгэж болно. Хэрэв байхгүй бол бид үүнийг хийх болно. Докерын зураг.

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

Хэрэв хүсвэл Та өөрөө угсарч болно, гэхдээ энэ нь цаг хугацаа шаарддаг.

Контейнер дотор та emcc-г gcc-ийн өөр хувилбар болгон хялбархан ашиглаж болно:

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

Хамгийн бага өөрчлөлт:

Хоёртын файл руу гаргахын оронд Emscripten файлуудыг үүсгэхийн тулд .wasm болон .js ашигладаг бөгөөд энэ нь WebAssemby модулийг ажиллуулахад ашиглагддаг.

USE_ZLIB тугийг zlib номын санг дэмжихэд ашигладаг. Номын санг тарааж, WebAssembly руу шилжүүлсэн бөгөөд Emscripten үүнийг төсөлд оруулсан.

Emscrippten виртуал файлын систем идэвхжсэн. Энэ POSIX шиг FS, хөтөч доторх RAM-д ажилладаг. Хуудсыг шинэчлэх үед санах ой цэвэрлэгддэг.

Виртуал файлын систем яагаад хэрэгтэйг ойлгохын тулд командын мөрөөс seqtk-г ажиллуулах арга замаа хөрвүүлсэн WebAssembly модулийг ажиллуулах аргатай харьцуулах нь зүйтэй.

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

Виртуал файлын системд хандах эрх авах нь файлын оролтоос илүү мөрт зориулсан seqtk-г дахин бичихгүй байх шаардлагатай. Энэ тохиолдолд өгөгдлийн фрагмент нь main() seqtk руу залгасан виртуал FS-д data.fastq файл хэлбэрээр харагдана.

Энд шинэ архитектур байна:

Зураг дээр үндсэн хөтчийн хэлхээн дэх тооцооллын оронд, WebWorkers. Энэ арга нь хөтчийн хариу үйлдэлд нөлөөлөхгүйгээр арын дэвсгэр дээр тооцоолол хийх боломжийг танд олгоно. WebWorker хянагч нь Worker-ийг эхлүүлж, үндсэн хэлхээтэй харилцах харилцааг удирддаг.

Seqtk командыг суулгасан файл дээр Worker ашиглан ажиллуулна. Гүйцэтгэлийг дуусгасны дараа Ажилчин амлалт хэлбэрээр үр дүнг гаргадаг. Мессежийг үндсэн хэлхээнд хүлээн авах үед үр дүнг графикуудыг шинэчлэхэд ашигладаг. Гэх мэт хэд хэдэн давталтаар.

WebAssembly гүйцэтгэлийн талаар юу хэлэх вэ?

Гүйцэтгэлийн өөрчлөлтийг үнэлэхийн тулд төслийн баг секундэд унших үйлдлийг ашигласан. Интерактив графикийг бүтээхэд шаардагдах хугацааг тооцохгүй, учир нь эдгээр хоёр хэрэгжилт нь JavaScript ашигладаг.

Бэлэн болсон шийдлийг ашиглах үед гүйцэтгэл есөн дахин нэмэгдсэн.

Энэ бол маш сайн үр дүн боловч үүнийг оновчтой болгох боломж байгаа нь харагдаж байна. Баримт нь олон тооны QC шинжилгээний үр дүнг seqtk ашигладаггүй тул устгаж болно. Хэрэв та үүнийг хийвэл үр дүн нь JS-тэй харьцуулахад 13 дахин сайжирна.

Үүнийг зөвхөн printf() командуудыг тайлбарласнаар хүрсэн.

Гэхдээ энэ нь бүгд биш юм. Үнэн хэрэгтээ энэ үе шатанд fastq.bio өөр өөр C функцуудыг дуудаж шинжилгээний үр дүнг хүлээн авдаг.Тэд тус бүр өөрийн гэсэн шинж чанаруудыг тооцдог тул файлын фрагмент бүрийг хоёр удаа уншдаг.

Энэ асуудлыг даван туулахын тулд хоёр функцийг нэг болгон нэгтгэхээр шийдсэн. Үүний үр дүнд бүтээмж 20 дахин нэмэгдсэн.

Ийм гайхалтай үр дүнд үргэлж хүрч чадахгүй гэдгийг тэмдэглэх нь зүйтэй. Зарим тохиолдолд гүйцэтгэл буурах тул тохиолдол бүрийг үнэлэх нь зүйтэй.

Дүгнэж хэлэхэд, Wasm нь програмын гүйцэтгэлийг сайжруулах боломжийг олгодог гэж хэлж болно, гэхдээ та үүнийг ухаалгаар ашиглах хэрэгтэй.

Skillbox зөвлөж байна:

• Хоёр жилийн практик сургалт "Би PRO вэб хөгжүүлэгч".
• Онлайн курс "0-ээс C# хөгжүүлэгч".
• Практик жилийн курс "0-ээс PRO хүртэл PHP хөгжүүлэгч".

Эх сурвалж: www.habr.com