हामीले कसरी वेब एप्लिकेसनलाई २० पटक गति दिन WebAssembly प्रयोग गर्यौं

यो लेखले WebAssembly सँग JavaScript गणनाहरू प्रतिस्थापन गरेर ब्राउजर अनुप्रयोगको गति बढाउने मामलामा छलफल गर्दछ।

WebAssembly - यो के हो?

छोटकरीमा, यो स्ट्याक-आधारित भर्चुअल मेसिनको लागि बाइनरी निर्देशन ढाँचा हो। Wasm (छोटो नाम) लाई प्राय: प्रोग्रामिङ भाषा भनिन्छ, तर यो होइन। निर्देशन ढाँचा जाभास्क्रिप्टको साथ ब्राउजरमा कार्यान्वयन गरिन्छ।

यो महत्त्वपूर्ण छ कि WebAssembly C/C++, Rust, Go जस्ता भाषाहरूमा स्रोतहरू संकलन गरेर प्राप्त गर्न सकिन्छ। यहाँ सांख्यिकीय टाइपिङ र तथाकथित फ्ल्याट मेमोरी मोडेल प्रयोग गरिन्छ। कोड, माथि उल्लेख गरिए अनुसार, कम्प्याक्ट बाइनरी ढाँचामा भण्डार गरिएको छ, यसलाई लगभग कमाण्ड लाइन प्रयोग गरेर अनुप्रयोग चलाउने जत्तिकै छिटो बनाउँछ। यी क्षमताहरूले WebAssembly को लोकप्रियताको वृद्धिको नेतृत्व गरेको छ।

हामी सम्झाउँछौं: सबै Habr पाठकहरूका लागि - Habr प्रोमो कोड प्रयोग गरी कुनै पनि Skillbox पाठ्यक्रममा भर्ना गर्दा १०,००० रूबल छुट।

Skillbox सिफारिस गर्दछ: व्यावहारिक पाठ्यक्रम "मोबाइल विकासकर्ता प्रो".

हाल, Wasm धेरै अनुप्रयोगहरूमा प्रयोग गरिन्छ, Doom 3 जस्ता गेमहरूदेखि लिएर Autocad र Figma जस्ता वेब-पोर्टेड अनुप्रयोगहरूमा। Wasm पनि सर्भरलेस कम्प्युटिङ जस्ता क्षेत्रमा प्रयोग गरिन्छ।

यस लेखले एनालिटिक्स वेब सेवालाई गति दिन Wasm प्रयोग गर्ने उदाहरण प्रदान गर्दछ। स्पष्टताको लागि, हामीले C मा लेखिएको कार्य अनुप्रयोग लियौं, जुन WebAssembly मा कम्पाइल गरिएको छ। परिणाम JS को खराब प्रदर्शन खण्डहरू प्रतिस्थापन गर्न प्रयोग गरिनेछ।

आवेदन रूपान्तरण

उदाहरणले fastq.bio ब्राउजर सेवा प्रयोग गर्नेछ, जुन आनुवंशिकविद्हरूको लागि हो। उपकरणले तपाईंलाई DNA अनुक्रमण (डिसिफरिङ) को गुणस्तर मूल्याङ्कन गर्न अनुमति दिन्छ।

यहाँ कार्य मा आवेदन को एक उदाहरण छ:

गैर-विशेषज्ञहरूका लागि धेरै जटिल भएकाले प्रक्रियाको विवरणहरू जान लायक छैन, तर छोटकरीमा, वैज्ञानिकहरूले DNA अनुक्रमण प्रक्रिया सहज रूपमा गयो र के समस्याहरू उत्पन्न भयो भनेर बुझ्न माथिको इन्फोग्राफिक प्रयोग गर्न सक्छन्।

यो सेवामा विकल्पहरू, डेस्कटप कार्यक्रमहरू छन्। तर fastq.bio ले तपाईंलाई डाटाको दृश्यावलोकन गरेर आफ्नो कामको गति बढाउन अनुमति दिन्छ। धेरै जसो अन्य अवस्थामा, तपाइँ कमाण्ड लाइन संग काम गर्न सक्षम हुन आवश्यक छ, तर सबै आनुवंशिकीहरु लाई आवश्यक अनुभव छैन।

सबै कुरा सरल रूपमा काम गर्दछ। इनपुट पाठ फाइलको रूपमा प्रस्तुत डाटा हो। यो फाइल विशेष क्रमबद्ध उपकरणहरू द्वारा उत्पन्न गरिएको हो। फाइलले DNA अनुक्रमहरूको सूची र प्रत्येक न्यूक्लियोटाइडको लागि गुणस्तर स्कोर समावेश गर्दछ। फाइल ढाँचा .fastq हो, त्यसैले यो सेवाको नाम भयो।

JavaScript मा कार्यान्वयन

fastq.bio सँग काम गर्दा प्रयोगकर्ताको पहिलो चरण उपयुक्त फाइल चयन गर्नु हो। फाइल वस्तु प्रयोग गरेर, अनुप्रयोगले फाइलबाट डाटाको अनियमित नमूना पढ्छ र त्यो ब्याचलाई प्रक्रिया गर्दछ। यहाँ JavaScript को काम सरल स्ट्रिङ अपरेसनहरू प्रदर्शन र मेट्रिक्स गणना गर्न हो। ती मध्ये एक न्यूक्लियोटाइड्स ए, सी, जी र टी विभिन्न DNA टुक्राहरूमा संख्या हो।

आवश्यक सूचकहरू गणना गरिसकेपछि, तिनीहरू Plotly.js प्रयोग गरेर दृश्यात्मक हुन्छन्, र सेवाले नयाँ डेटा नमूनाको साथ काम गर्न थाल्छ। UX को गुणस्तर सुधार गर्न chunking गरिन्छ। यदि तपाइँ एकैचोटि सबै डाटासँग काम गर्नुहुन्छ भने, प्रक्रिया केही समयको लागि स्थिर हुनेछ, किनकि अनुक्रम परिणामहरू भएका फाइलहरूले सयौं गीगाबाइट फाइल स्पेस लिन्छन्। सेवाले 0,5 देखि 1 MB सम्मको साइजमा डेटाको टुक्राहरू लिन्छ र तिनीहरूसँग चरणबद्ध रूपमा काम गर्दछ, ग्राफिकल डेटा निर्माण गर्दछ।

यो कसरी यो काम गर्दछ:

रातो आयतले दृश्य प्राप्त गर्नको लागि स्ट्रिङ रूपान्तरण एल्गोरिदम समावेश गर्दछ। यो सेवाको सबैभन्दा कम्प्यूटेशनली गहन भाग हो। यसलाई Wasm को साथ बदल्न प्रयास गर्न लायक छ।

WebAssembly परीक्षण

Wasm प्रयोग गर्ने सम्भावनाको मूल्याङ्कन गर्न, परियोजना टोलीले fastq फाइलहरूमा आधारित QC मेट्रिक्स (QC - गुणस्तर नियन्त्रण) सिर्जना गर्नका लागि तयार समाधानहरू खोज्न थाल्यो। खोज C, C++ वा Rust मा लेखिएका उपकरणहरू बीचमा गरिएको थियो, ताकि कोडलाई WebAssembly मा पोर्ट गर्न सम्भव भयो। थप रूपमा, उपकरण "कच्चा" हुनु हुँदैन; एक सेवा जुन पहिले नै वैज्ञानिकहरू द्वारा परीक्षण गरिएको थियो आवश्यक थियो।

नतिजाको रूपमा, छनौटको पक्षमा बनाइएको थियो seqtk। अनुप्रयोग धेरै लोकप्रिय छ, यो खुला स्रोत हो, स्रोत भाषा सी हो।

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

यदि चाहियो भने तपाईं यसलाई आफैं जम्मा गर्न सक्नुहुन्छतर समय लाग्छ।

कन्टेनर भित्र, तपाईं सजिलैसँग gcc को विकल्पको रूपमा emcc प्रयोग गर्न सक्नुहुन्छ:

# 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 ले यसलाई परियोजनामा ​​समावेश गर्दछ।

Emscriptten भर्चुअल फाइल प्रणाली सक्रिय छ। यो POSIX-जस्तो FS, ब्राउजर भित्र RAM मा चलिरहेको छ। जब पृष्ठ ताजा हुन्छ, मेमोरी खाली हुन्छ।

भर्चुअल फाइल प्रणाली किन आवश्यक छ भनेर बुझ्नको लागि, तपाईंले कमाण्ड लाइनबाट seqtk चलाउने तरिकालाई तपाईंले कम्पाइल गरिएको WebAssembly मोड्युल चलाउने तरिकासँग तुलना गर्नु उपयुक्त हुन्छ।

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

भर्चुअल फाइल प्रणालीमा पहुँच प्राप्त गर्न आवश्यक छ ताकि फाइल इनपुटको सट्टा स्ट्रिङको लागि seqtk पुन: लेख्न नपरोस्। यस अवस्थामा, डेटा टुक्रालाई भर्चुअल FS मा data.fastq फाइलको रूपमा मुख्य() seqtk लाई कल गरेर देखाइन्छ।

यहाँ नयाँ वास्तुकला छ:

तथ्याङ्कले देखाउँछ कि मुख्य ब्राउजर थ्रेडमा गणनाको सट्टा, वेबवर्करहरू। यो विधिले तपाईंलाई ब्राउजरको प्रतिक्रियाशीलतालाई असर नगरी पृष्ठभूमि थ्रेडमा गणना गर्न अनुमति दिन्छ। ठीक छ, WebWorker नियन्त्रकले मुख्य थ्रेडसँग यसको अन्तर्क्रिया प्रबन्ध गर्दै, कार्यकर्ता सुरु गर्दछ।

seqtk आदेश माउन्ट गरिएको फाइलमा Worker प्रयोग गरेर चलाइन्छ। कार्यान्वयन पूरा भएपछि, कार्यकर्ताले प्रतिज्ञाको रूपमा परिणाम उत्पन्न गर्दछ। जब सन्देश मुख्य थ्रेड द्वारा प्राप्त हुन्छ, परिणाम ग्राफहरू अद्यावधिक गर्न प्रयोग गरिन्छ। र यस्तै धेरै पुनरावृत्तिहरूमा।

WebAssembly प्रदर्शन को बारे मा के हो?

कार्यसम्पादनमा परिवर्तनको मूल्याङ्कन गर्नको लागि, परियोजना टोलीले प्रति सेकेन्ड प्यारामिटर पढ्ने कार्यहरू प्रयोग गर्यो। अन्तरक्रियात्मक ग्राफहरू निर्माण गर्न लाग्ने समयलाई ध्यानमा राखिएको छैन किनभने दुवै कार्यान्वयनहरूले JavaScript प्रयोग गर्छन्।

आउट-अफ-द-बक्स समाधान प्रयोग गर्दा, प्रदर्शन वृद्धि नौ गुणा थियो।

यो एक उत्कृष्ट परिणाम हो, तर, यो बाहिर जान्छ, त्यहाँ पनि यसलाई अनुकूलन गर्ने अवसर छ। तथ्य यो हो कि QC विश्लेषण परिणामहरूको ठूलो संख्या seqtk द्वारा प्रयोग गरिएको छैन, त्यसैले तिनीहरू मेटाउन सकिन्छ। यदि तपाईंले यो गर्नुभयो भने, परिणाम JS को तुलनामा 13 गुणाले सुधार हुन्छ।

यो केवल printf() आदेशहरू टिप्पणी गरेर प्राप्त भएको थियो।

तर यति मात्र होइन। तथ्य यो हो कि यस चरणमा, fastq.bio ले विभिन्न C प्रकार्यहरू कल गरेर विश्लेषण परिणामहरू प्राप्त गर्दछ। तिनीहरूमध्ये प्रत्येकले आफ्नै विशेषताहरूको सेट गणना गर्दछ, ताकि फाइलको प्रत्येक टुक्रा दुई पटक पढियो।

यो समस्या वरिपरि प्राप्त गर्न, यो एक मा दुई प्रकार्य संयोजन गर्न निर्णय गरियो। फलस्वरूप, उत्पादकता 20 गुणा बढ्यो।

यो उल्लेखनीय छ कि यस्तो उत्कृष्ट परिणाम सधैं प्राप्त गर्न सकिँदैन। केही अवस्थामा, कार्यसम्पादन घट्नेछ, त्यसैले यो प्रत्येक केसको मूल्याङ्कन गर्न लायक छ।

निष्कर्षको रूपमा, हामी भन्न सक्छौं कि Wasm ले अनुप्रयोग प्रदर्शन सुधार गर्ने अवसर प्रदान गर्दछ, तर तपाईंले यसलाई बुद्धिमानीपूर्वक प्रयोग गर्न आवश्यक छ।

Skillbox सिफारिस गर्दछ:

• दुई वर्षे व्यावहारिक पाठ्यक्रम "म एक प्रो वेब विकासकर्ता हुँ".
• अनलाइन कोर्स "0 बाट C# विकासकर्ता".
• एक वर्षको व्यावहारिक पाठ्यक्रम "0 देखि PRO मा PHP विकासकर्ता".

स्रोत: www.habr.com