WebAssembly और JavaScript: आपके कोड को 10 गुना तेज़ करने वाली जोड़ी

ब्राउज़र अचानक नई भाषा में क्यों बोलने लगे?

कल्पना करें कि आप एक शेफ हैं। JavaScript आपका सर्व-उपयोगी चाकू है: इससे आप रोटी काट सकते हैं, मछली साफ कर सकते हैं, और यहाँ तक कि डिब्बे भी खोल सकते हैं (चोट लगने के जोखिम के साथ)। और WebAssembly एक पेशेवर जापानी चाकू है जो साशिमी काटने के लिए है। यह एक काम करता है - पूरी तरह से पतला और तेज़ काटना, लेकिन इसके लिए विशेष दृष्टिकोण की आवश्यकता होती है। आप इससे आलू नहीं छीलेंगे, लेकिन जब एक मिनट में टूना के 100 टुकड़े काटने हों, तो इसके बिना काम नहीं चलेगा।

वेब डेवलपमेंट की दुनिया में लंबे समय तक एक ही राजा का शासन था - JavaScript। लेकिन 2017 में, एक नया खिलाड़ी मैदान में आया: WebAssembly (Wasm)। यह JS का प्रतिस्थापन नहीं है, बल्कि इसका एक शक्तिशाली साथी है। आज हम समझेंगे कि यह क्या है, इसकी आवश्यकता क्यों है, और JavaScript की मदद से इसे कैसे वश में किया जाए।

सरल शब्दों में WebAssembly क्या है?

WebAssembly एक निम्न-स्तरीय बाइनरी निर्देश प्रारूप है जो ब्राउज़र में लगभग नेटिव गति से निष्पादित होता है। अगर JavaScript एक टेक्स्ट है जिसे ब्राउज़र पढ़ता है और चलते-फिरते व्याख्या करता है, तो Wasm एक तैयार संकलित बाइट-कोड है जो मशीन कोड जैसा दिखता है।

आप C, C++ या Rust में कोड लिखते हैं, इसे .wasm फ़ाइल में संकलित करते हैं, और फिर इसे एक सामान्य स्क्रिप्ट की तरह ब्राउज़र में लोड करते हैं। ब्राउज़र इसे सीधे निष्पादित करता है, JavaScript द्वारा पार्सिंग और JIT-संकलन के लंबे चरण को छोड़कर।

WebAssembly की प्रमुख विशेषताएँ:

\n
• गति - निष्पादन नेटिव के करीब (गणना कार्यों में JS से 2-10 गुना तेज़)।
\n
• सुरक्षा - JS की तरह एक पृथक सैंडबॉक्स में काम करता है।
\n
• कॉम्पैक्टनेस - .wasm फ़ाइलें कम जगह लेती हैं और जल्दी लोड होती हैं।
\n
• एकीकरण - JavaScript से और वापस आसानी से कॉल किया जा सकता है।
\n

जब JavaScript मौजूद है तो इसकी आवश्यकता क्यों?

JavaScript 95% कार्यों के लिए उत्कृष्ट है: DOM के साथ काम करना, एनिमेशन, इवेंट हैंडलिंग, सर्वर अनुरोध। लेकिन कुछ ऐसे कार्य हैं जहाँ JS पिछड़ जाता है:

\n
• भारी गणनाएँ - वीडियो प्रोसेसिंग, 3D रेंडरिंग, भौतिकी सिमुलेशन।
\n
• गेम्स - Unity या Unreal Engine पर AAA प्रोजेक्ट्स।
\n
• वैज्ञानिक गणनाएँ - आणविक गतिशीलता सिमुलेशन, क्रिप्टोग्राफी।
\n
• मीडिया के साथ काम करना - इमेज कम्प्रेशन/डीकम्प्रेशन, ऑडियो और वीडियो कोडेक्स।
\n

इन परिदृश्यों में, WebAssembly दसियों गुना प्रदर्शन लाभ प्रदान करता है। साथ ही, आप ब्राउज़र API (JS रैपर के माध्यम से) तक पहुँच नहीं खोते हैं।

यह कैसे काम करता है? सरल आर्किटेक्चर

दो दुनियाओं के बीच एक पुल की कल्पना करें। एक तरफ आपका .wasm मॉड्यूल (तेज़, लेकिन "बेवकूफ" - यह DOM और इवेंट के बारे में नहीं जानता)। दूसरी तरफ JavaScript (धीमा, लेकिन "स्मार्ट" - यह सब कुछ जानता है)। वे एक विशेष "मेमोरी" - Wasm की रैखिक मेमोरी के माध्यम से संवाद करते हैं।

JS बाइट्स की एक सरणी (ArrayBuffer) आवंटित करता है, इसे Wasm मॉड्यूल को भेजता है, वह इसे डेटा से भरता है, और JS परिणाम ले लेता है। यह एक खिड़की के माध्यम से एक भारी बॉक्स पास करने जैसा है - आप प्रत्येक वस्तु को अलग-अलग नहीं रखते, बल्कि पूरा बॉक्स एक साथ पास करते हैं।

वास्तविक उदाहरण लिखना: फैक्टोरियल को तेज़ करना

आइए क्लासिक कार्य - फैक्टोरियल की गणना पर प्रदर्शन की तुलना करें। पहले शुद्ध JavaScript में कार्यान्वित करें, फिर C में, जिसे Wasm में संकलित किया गया है।

1. JavaScript संस्करण (सामान्य)

// factorial.js\nfunction factorialJS(n) {\n    let result = 1;\n    for (let i = 2; i <= n; i++) {\n        result *= i;\n    }\n    return result;\n}\n\n// परीक्षण\nconsole.time('JS');\nfor (let i = 0; i < 100000; i++) {\n    factorialJS(20);\n}\nconsole.timeEnd('JS'); // Chrome में ~15-25 ms\n

2. C कोड, जिसे हम Wasm में संकलित करेंगे

पहले C में लिखें:

// factorial.c\nint factorial(int n) {\n    int result = 1;\n    for (int i = 2; i <= n; i++) {\n        result *= i;\n    }\n    return result;\n}\n<