Ինչպես մենք օգտագործեցինք WebAssembly վեբ հավելվածը 20 անգամ արագացնելու համար

Այս հոդվածը քննարկում է բրաուզերի հավելվածի արագացման դեպքը՝ JavaScript-ի հաշվարկները WebAssembly-ով փոխարինելու միջոցով:

WebAssembly - ինչ է դա:

Մի խոսքով, սա երկուական հրահանգների ձևաչափ է վիրտուալ մեքենայի համար, որը հիմնված է վիրտուալ մեքենայի համար: Wasm-ը (կարճ անուն) հաճախ անվանում են ծրագրավորման լեզու, բայց դա այդպես չէ: Հրահանգի ձևաչափը կատարվում է զննարկիչում JavaScript-ի հետ միասին:

Կարևոր է, որ WebAssembly-ն հնարավոր լինի ձեռք բերել՝ աղբյուրներ կազմելով այնպիսի լեզուներով, ինչպիսիք են C/C++, Rust, Go: Այստեղ օգտագործվում է վիճակագրական մուտքագրում և այսպես կոչված հարթ հիշողության մոդել։ Կոդը, ինչպես նշվեց վերևում, պահվում է կոմպակտ երկուական ձևաչափով, ինչը այն դարձնում է գրեթե նույնքան արագ, որքան հրամանի տողի միջոցով հավելվածը գործարկելը: Այս հնարավորությունները հանգեցրել են WebAssembly-ի ժողովրդականության աճին:

Հիշեցում. «Habr»-ի բոլոր ընթերցողների համար՝ 10 ռուբլի զեղչ «Habr» գովազդային կոդով Skillbox-ի ցանկացած դասընթացին գրանցվելիս:

Skillbox-ը խորհուրդ է տալիս. Գործնական դասընթաց «Mobile Developer PRO».

Ներկայումս Wasm-ն օգտագործվում է բազմաթիվ հավելվածներում՝ սկսած Doom 3-ի նման խաղերից մինչև վեբ տեղափոխված հավելվածներ, ինչպիսիք են Autocad-ը և Figma-ն: Wasm-ը նույնպես օգտագործվում է այնպիսի ոլորտներում, ինչպիսիք են առանց սերվերի հաշվարկները:

Այս հոդվածը ներկայացնում է Wasm-ի օգտագործման օրինակ՝ վերլուծական վեբ ծառայության արագացման համար: Պարզության համար մենք վերցրեցինք C-ով գրված աշխատանքային հավելված, որը կազմված է WebAssembly-ում: Արդյունքը կօգտագործվի JS-ի թերակատարող հատվածները փոխարինելու համար:

Դիմումի փոխակերպում

Օրինակը կօգտագործի fastq.bio բրաուզերի ծառայությունը, որը նախատեսված է գենետիկների համար։ Գործիքը թույլ է տալիս գնահատել ԴՆԹ-ի հաջորդականության որակը (վերծանում):

Ահա գործողության կիրառման օրինակ.

Գործընթացի մանրամասները չարժե անդրադառնալ, քանի որ դրանք բավականին բարդ են ոչ մասնագետների համար, բայց մի խոսքով, գիտնականները կարող են օգտագործել վերը նշված ինֆոգրաֆիկան՝ հասկանալու համար, թե արդյոք ԴՆԹ-ի հաջորդականության գործընթացը սահուն է ընթացել և ինչ խնդիրներ են առաջացել:

Այս ծառայությունն ունի այլընտրանքներ՝ աշխատասեղանի ծրագրեր։ Սակայն fastq.bio-ն թույլ է տալիս արագացնել աշխատանքը՝ պատկերացնելով տվյալները: Շատ այլ դեպքերում, դուք պետք է կարողանաք աշխատել հրամանի տողի հետ, բայց ոչ բոլոր գենետիկներն ունեն անհրաժեշտ փորձ:

Ամեն ինչ աշխատում է պարզ. Մուտքը տվյալներ են, որոնք ներկայացված են տեքստային ֆայլի տեսքով: Այս ֆայլը ստեղծվում է մասնագիտացված հաջորդականության գործիքների միջոցով: Ֆայլը պարունակում է ԴՆԹ-ի հաջորդականությունների ցանկ և յուրաքանչյուր նուկլեոտիդի որակի գնահատական: Ֆայլի ձևաչափը .fastq է, ինչի պատճառով ծառայությունն ստացել է իր անվանումը:

Իրականացում JavaScript-ում

Օգտատիրոջ առաջին քայլը fastq.bio-ի հետ աշխատելիս համապատասխան ֆայլ ընտրելն է։ Օգտագործելով File օբյեկտը, հավելվածը կարդում է տվյալների պատահական նմուշ ֆայլից և մշակում այդ խմբաքանակը: JavaScript-ի աշխատանքն այստեղ տողերի պարզ գործողություններ կատարելն է և չափումների հաշվարկը: Դրանցից մեկը ԴՆԹ-ի տարբեր բեկորների վրա A, C, G և T նուկլեոտիդների քանակն է:

Անհրաժեշտ ցուցանիշները հաշվարկելուց հետո դրանք վիզուալացվում են Plotly.js-ի միջոցով, և ծառայությունը սկսում է աշխատել տվյալների նոր նմուշով։ The chunking-ը կատարվում է UX-ի որակը բարելավելու համար: Եթե ​​դուք միանգամից աշխատեք բոլոր տվյալների հետ, գործընթացը որոշ ժամանակով կսառչի, քանի որ հաջորդականության արդյունքներով ֆայլերը զբաղեցնում են հարյուրավոր գիգաբայթ ֆայլերի տարածություն: Ծառայությունը վերցնում է 0,5-ից մինչև 1 ՄԲ չափի տվյալների կտորներ և դրանց հետ աշխատում քայլ առ քայլ՝ կառուցելով գրաֆիկական տվյալներ:

Ահա, թե ինչպես է այն աշխատում.

Կարմիր ուղղանկյունը պարունակում է տողերի փոխակերպման ալգորիթմ՝ վիզուալիզացիա ստանալու համար։ Սա ծառայության ամենաինտենսիվ հաշվողական մասն է: Արժե փորձել այն փոխարինել Wasm-ով:

WebAssembly-ի փորձարկում

Wasm-ի օգտագործման հնարավորությունը գնահատելու համար նախագծային թիմը սկսեց որոնել պատրաստի լուծումներ՝ QC չափիչ (QC - որակի վերահսկում) ստեղծելու համար՝ հիմնված fastq ֆայլերի վրա։ Որոնումն իրականացվել է C, C++ կամ Rust-ով գրված գործիքների մեջ, որպեսզի հնարավոր լինի ծածկագիրը տեղափոխել WebAssembly։ Բացի այդ, գործիքը չպետք է «հում» լինի, պահանջվում էր ծառայություն, որն արդեն փորձարկվել էր գիտնականների կողմից:

Արդյունքում ընտրությունը կատարվել է հօգուտ seqtk. Հավելվածը բավականին տարածված է, բաց կոդով է, սկզբնաղբյուր լեզուն C-ն է։

Նախքան Wasm-ին փոխարկելը, արժե դիտել seqtk-ի կազմման սկզբունքը աշխատասեղանի համար: Ըստ Makefile-ի, ահա թե ինչ է ձեզ անհրաժեշտ.

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

Սկզբունքորեն, դուք կարող եք կազմել seqtk օգտագործելով Emscripten-ը: Եթե ​​այն չկա, մենք բավարարվում ենք: Դոկերի պատկեր.

$ 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-ը ոչ թե ֆայլի մուտքագրման, այլ տողի համար: Այս դեպքում տվյալների ֆրագմենտը ցուցադրվում է որպես data.fastq ֆայլ վիրտուալ FS-ում՝ հիմնական() seqtk-ին զանգով:

Ահա նոր ճարտարապետությունը.

Նկարը ցույց է տալիս, որ բրաուզերի հիմնական թեմայում հաշվարկների փոխարեն, WebWorkers. Այս մեթոդը թույլ է տալիս կատարել հաշվարկներ ֆոնային շղթայում՝ առանց բրաուզերի արձագանքման վրա ազդելու: Դե, WebWorker վերահսկիչը սկսում է Worker-ը, կառավարելով իր փոխազդեցությունը հիմնական թեմայի հետ:

Seqtk հրամանը գործարկվում է մոնտաժված ֆայլի վրա Worker-ի միջոցով: Կատարման ավարտից հետո Աշխատողը արդյունք է տալիս Խոստման տեսքով: Երբ հիմնական շարանը հաղորդագրություն է ստանում, արդյունքն օգտագործվում է գրաֆիկները թարմացնելու համար: Եվ այսպես շարունակ մի քանի կրկնություններով:

Ինչ վերաբերում է WebAssembly-ի կատարմանը:

Կատարման փոփոխությունը գնահատելու համար ծրագրի թիմը օգտագործեց ընթերցման գործողությունները մեկ վայրկյանում: Ինտերակտիվ գրաֆիկներ ստեղծելու համար պահանջվող ժամանակը հաշվի չի առնվում, քանի որ երկու իրականացումներն էլ օգտագործում են JavaScript:

Արտադրված լուծում օգտագործելիս կատարողականի աճը կազմել է ինը անգամ:

Սա հիանալի արդյունք է, բայց, ինչպես պարզվում է, հնարավորություն կա նաև այն օպտիմալացնելու։ Փաստն այն է, որ մեծ թվով QC վերլուծության արդյունքներ չեն օգտագործվում seqtk-ի կողմից, ուստի դրանք կարող են ջնջվել: Եթե ​​դա անեք, արդյունքը բարելավվում է 13 անգամ՝ համեմատած JS-ի հետ:

Դրան հաջողվեց պարզապես մեկնաբանելով printf() հրամանները:

Բայց սա դեռ ամենը չէ: Փաստն այն է, որ այս փուլում fastq.bio-ն ստանում է վերլուծության արդյունքները` կանչելով C տարբեր ֆունկցիաներ:Դրանցից յուրաքանչյուրը հաշվարկում է բնութագրերի իր հավաքածուն, որպեսզի ֆայլի յուրաքանչյուր հատվածը երկու անգամ ընթերցվի:

Այս խնդիրը շրջանցելու համար որոշվեց երկու գործառույթ համատեղել մեկի մեջ: Արդյունքում արտադրողականությունն աճել է 20 անգամ։

Հարկ է նշել, որ նման ակնառու արդյունքի միշտ չէ, որ կարելի է հասնել: Որոշ դեպքերում կատարումը կնվազի, ուստի արժե գնահատել յուրաքանչյուր դեպք:

Որպես եզրակացություն, մենք կարող ենք ասել, որ Wasm-ը իսկապես հնարավորություն է տալիս բարելավել հավելվածի աշխատանքը, բայց դուք պետք է այն խելամտորեն օգտագործեք:

Skillbox-ը խորհուրդ է տալիս.

• Երկու տարվա գործնական դասընթաց «Ես PRO վեբ ծրագրավորող եմ».
• Առցանց դասընթաց «C# մշակող 0-ից».
• Գործնական տարվա դասընթաց «PHP ծրագրավորող 0-ից մինչև PRO».

Source: www.habr.com