Веб қолданбасын 20 есе жылдамдату үшін WebAssembly қалай пайдаландық

Бұл мақалада JavaScript есептеулерін WebAssembly көмегімен ауыстыру арқылы шолғыш қолданбасын жылдамдату жағдайы талқыланады.

WebAssembly - бұл не?

Қысқаша айтқанда, бұл стекке негізделген виртуалды машинаға арналған екілік нұсқаулық пішімі. Wasm (қысқа атау) көбінесе бағдарламалау тілі деп аталады, бірақ олай емес. Нұсқау пішімі браузерде JavaScript-пен бірге орындалады.

WebAssembly-ті C/C++, Rust, Go сияқты тілдердегі дереккөздерді құрастыру арқылы алуға болатыны маңызды. Мұнда статистикалық теру және жалпақ жады деп аталатын модель қолданылады. Код, жоғарыда айтылғандай, ықшам екілік пішімде сақталады, бұл оны пәрмен жолын пайдаланып қолданбаны іске қосу сияқты жылдам етеді. Бұл мүмкіндіктер WebAssembly танымалдығының өсуіне әкелді.

Біз еске саламыз: «Хабрдың» барлық оқырмандары үшін - «Habr» жарнамалық кодын пайдаланып кез келген Skillbox курсына жазылу кезінде 10 000 рубль көлемінде жеңілдік.

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 МБ-қа дейінгі деректер бөліктерін алады және олармен графикалық деректерді құра отырып, кезең-кезеңімен жұмыс істейді.

Міне осылай жұмыс істейді:

Қызыл төртбұрыш визуализацияны алуға арналған жолды түрлендіру алгоритмін қамтиды. Бұл қызметтің ең көп есептеуді қажет ететін бөлігі. Оны Васммен ауыстыруға тырысқан жөн.

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 WebAssemby модулін іске қосу үшін пайдаланылатын файлдарды жасау үшін .wasm және .js пайдаланады.

USE_ZLIB жалауы zlib кітапханасын қолдау үшін пайдаланылады. Кітапхана таратылып, WebAssembly жүйесіне көшірілді және Emscripten оны жобаға қосады.

Emscrippten виртуалды файлдық жүйесі іске қосылды. Бұл POSIX тәрізді FS, шолғыш ішінде жедел жадта жұмыс істейді. Бет жаңартылған кезде жад тазаланады.

Виртуалды файлдық жүйе не үшін қажет екенін түсіну үшін пәрмен жолынан 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 контроллері оның негізгі ағынмен әрекеттесуін басқара отырып, Жұмысшыны іске қосады.

Seqtk пәрмені бекітілген файлдағы Worker көмегімен іске қосылады. Орындау аяқталғаннан кейін Жұмысшы Уәде түрінде нәтиже шығарады. Хабарлама негізгі ағынмен қабылданған кезде нәтиже графиктерді жаңарту үшін пайдаланылады. Бірнеше итерацияда және т.б.

WebAssembly өнімділігі туралы не деуге болады?

Өнімділіктің өзгеруін бағалау үшін жоба тобы секундына оқу әрекеттерін пайдаланды. Интерактивті графиктерді құруға кететін уақыт есепке алынбайды, өйткені екі іске қосу да JavaScript-ті пайдаланады.

Қораптан тыс шешімді пайдаланған кезде өнімділік тоғыз есе артты.

Бұл тамаша нәтиже, бірақ, белгілі болғандай, оны оңтайландыру мүмкіндігі де бар. Өйткені, QC талдау нәтижелерінің көп саны seqtk арқылы пайдаланылмайды, сондықтан оларды жоюға болады. Егер мұны жасасаңыз, нәтиже JS-пен салыстырғанда 13 есе жақсарады.

Оған printf() командаларына түсініктеме беру арқылы қол жеткізілді.

Бірақ бұл бәрі емес. Факт мынада, бұл кезеңде fastq.bio әртүрлі C функцияларын шақыру арқылы талдау нәтижелерін алады.Олардың әрқайсысы файлдың әрбір фрагменті екі рет оқылатындай сипаттамалардың жеке жиынын есептейді.

Бұл мәселені шешу үшін екі функцияны бір функцияға біріктіру туралы шешім қабылданды. Нәтижесінде өнімділік 20 есеге артты.

Айта кету керек, мұндай тамаша нәтижеге әрқашан қол жеткізу мүмкін емес. Кейбір жағдайларда өнімділік төмендейді, сондықтан әрбір жағдайды бағалаған жөн.

Қорытындылай келе, Wasm қолданбаның өнімділігін жақсартуға мүмкіндік береді деп айта аламыз, бірақ оны ақылмен пайдалану керек.

Skillbox ұсынады:

• Екі жылдық практикалық курс «Мен PRO веб-әзірлеушісімін».
• Онлайн курс "0-ден C# әзірлеушісі".
• Практикалық курс «0-ден PRO-ге дейінгі PHP әзірлеушісі».

Ақпарат көзі: www.habr.com