सुपर शीघ्र जावास्क्रिप्ट के लिए 21 कदम

Feb 4, 2026
कैसे करना है
Speed up JavaScript
(छवि क्रेडिट: Pexels.com) [1 9]

पहली नज़र में, समांतर प्रसंस्करण मुक्त दोपहर का भोजन करने के लिए एक निमंत्रण की तरह लगता है - बहु-कोर सीपीयू का उपयोग करने में सक्षम होने के कारण अधिक कुशलता से अपना कोड एक जबरदस्त गति बढ़ावा देना चाहिए। व्यावहारिक अनुभव से पता चलता है कि यह हमेशा मामला नहीं है: कुछ समस्याएं समानांतर के लिए असंभव हैं। इसके अलावा, समांतर निष्पादन नई समस्याओं के पूरे परिवार की ओर जाता है जो एकल-कोर मशीनों पर नहीं देखी जाती हैं।

समानांतर कोड, सिद्धांत रूप में, नौकरी के दो समूहों में विभाजित किया जा सकता है। पहला समूह क्लासिक गति वृद्धि है - यदि आपके कार्यक्रम को 3000 छवियों के माध्यम से छोड़ना है, तो नौकरी को विभाजित करना मतलब है कि किसी भी समय अधिक छवियों को संसाधित किया जा सकता है। निश्चित रूप से फायदेमंद होने पर, रोजमर्रा के वेब विकास में इस तरह का कार्य शायद ही कभी सामना किया जाता है। (यदि आप एक छवि-भारी साइट बना रहे हैं, तो सुनिश्चित करें कि आप उन्हें सभ्य के साथ वापस कर दें घन संग्रहण )।

समांतरता नौकरी का अधिक सामान्य रूप लंबे समय तक चलने वाले कार्यों के आसपास काम करता है जिन्हें अधिक सीपीयू समय की आवश्यकता नहीं होती है। इसके लिए एक अच्छा उदाहरण डाउनलोड या किसी प्रकार के डिवाइस इनपुट की प्रतीक्षा करेगा: यदि यह समानांतर फैशन में किया जाता है, तो शेष जीयूआई को अवरुद्ध करने की आवश्यकता नहीं होती है। यह देखते हुए कि उपयोगकर्ताओं को यह समझने में समस्याएं होती हैं कि 'बटन क्यों नहीं क्लिक करता है', इससे वास्तविक गति में वृद्धि नहीं होती है, भले ही उपयोगकर्ता संतुष्टि में वृद्धि हो सकती है।

यदि आपको स्मारक को कोड करने में मदद करने के लिए कुछ नए संसाधनों की आवश्यकता है, तो हमारी मार्गदर्शिका को सर्वोत्तम तरीके से देखें वेब डिजाइन उपकरण 2019 में। यदि आप पूरी तरह से कोड से बचना चाहते हैं, तो अपनी साइट को सर्वश्रेष्ठ के साथ डिज़ाइन करें वेबसाइट निर्माता , और सुनिश्चित करें कि आपने सही चुना है वेब होस्टिंग हमारी गाइड के साथ सेवा।

01. हस्तक्षेप निष्पादन

 var नींद = आवश्यकता ('नींद');

कार्य कार्यकर्ता () {
    Console.log ("कार्यकर्ता अप")
    Sleep.msleep (1000)
    Console.log ("कार्यकर्ता नीचे")
}

सेटिंटररल (कार्यकर्ता, 2000);
जबकि (1 == 1)
{
    Sleep.msleep (250)
    console.log ("मुख्य से नमस्कार")
} & gt; 

आइए एक अच्छी तरह से पसंदीदा पसंदीदा के आधार पर एक छोटे से उदाहरण के साथ शुरू करें: द Settinterval समारोह। यह एक फ़ंक्शन संदर्भ और मिलीसेकंड में चित्रित एक संख्यात्मक मान लेता है। उसके बाद, जब भी देरी टाइमर समाप्त हो जाता है तो फ़ंक्शन समय-समय पर निकाल दिया जाता है।

02. गिरावट के लिए स्थापित करना

 एनपीएम नींद स्थापित करें
एनपीएम example1.js 

का उपयोग नींद () फ़ंक्शन को हमें स्थानीय एनपीएम परियोजना में नींद मॉड्यूल लोड करने की आवश्यकता होती है। यह ऑपरेटिंग सिस्टम की नींद लाइब्रेरी के लिए एक इंटरफेस के रूप में कार्य करता है - यह नहीं है कि पैकेज की तैनाती के दौरान आपके वर्कस्टेशन के कंपाइलर को निकाल दिया गया है या नहीं।

03. मल्टीटास्किंग के खतरे

[6 9]

(छवि क्रेडिट: टैम हन्ना) [1 9]

इस कार्यक्रम को चलाते समय, आप अपने आप को इस चरण के साथ आंकड़े में दिखाए गए एक के समान आउटपुट के साथ सामना करेंगे। यह स्पष्ट है कि हमारे कार्यकर्ता को कभी भी आह्वान नहीं किया जाता है - कुछ सेटिंटररल फ़ंक्शन के साथ कुछ गलत होना चाहिए।

04. मल्टीटास्किंग के खतरे, भाग 2

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

05. समस्या निवारकों पर ध्यान केंद्रित करें

 कॉन्स बार = () = & gt; Console.log ('बार')

const baz = () = & gt; Console.log ('बाज़')

कॉन्स फू = () = & gt; {
  Console.log ('FOO')
  Settimeout (बार, 0)
  बाज़ ()
}

फू ()

[9 2] Flavio Copes 'ब्लॉग [9 3] , समस्या को दर्शाते हुए कोड का एक बेहद दिलचस्प बिट प्रदान करता है। जब भागते हैं, तो यह संदेश कतार को अवरुद्ध होने के कारण आंकड़े में दिखाए गए आउटपुट को उत्पन्न करता है फू () मुख्य धागे के नियंत्रण को त्याग देता है।

06. थ्रेडिंग का परिचय दें

Speed up JavaScript: 06

(छवि क्रेडिट: टैम हन्ना) [1 9]

यह देखते हुए कि अंतर्निहित ऑपरेटिंग सिस्टम प्रीपेप्टिव मल्टीटास्किंग करने में सक्षम है, आइए हम वेबवर्कर्स नामक एक समर्पित एपीआई के माध्यम से धागे को स्पॉइंग करके अपनी क्षमताओं का उपयोग करें, जो व्यापक समर्थन का आनंद लेते हैं। इस चरण के साथ आंकड़ा दिखाता है वर्तमान लिस्टिंग [9 3] सुविधा के लिए।

07. एक अतिरिक्त फ़ाइल बनाएं

Console.log ("कर्मचारी कहते हैं नमस्ते!");
Console.log ("कार्यकर्ता अप");
जबकि (1 == 1)
{
   Console.log ("एक्स");
}

वेबवर्कर फ़ंक्शन पेलोड के साथ नहीं उतर सकते हैं। इसके बजाए, एक नई फाइल की आवश्यकता होती है जिसमें धागे में चलाने के उद्देश्य से कोड होता है। हमारे उदाहरण के मामले में, example7thread.js इस चरण के साथ दिखाया गया सामग्री है।

08. कार्यकर्ता को चलाएं ...

 कॉन्स वर्कर = आवश्यकता ('कार्यकर्ता_थ्रेड्स');

var myworker = new worker.worker ('./
example7thread.js ');
var myworker2 = नया कार्यकर्ता। वर्कर ('./
example7thread.js '); 

हमारा कार्यकर्ता प्राइम-टाइम के लिए तैयार है। Node.js रनटाइम की विशेषताओं ने हमें कार्यकर्ता थ्रेड मॉड्यूल को शामिल करने और एक सापेक्ष पथ में पास करने के लिए मजबूर किया - ब्राउज़र में समस्याओं का सामना नहीं किया गया। इसके अलावा, इस बारे में आश्चर्य नहीं करते लापता स्टार्ट () कॉल - उदाहरण ऑनलाइन आने पर एक वेब कार्यकर्ता सेट करता है।

09. ... और इसके परिणामों को समझें

Speed up JavaScript: 09

(छवि क्रेडिट: टैम हन्ना) [1 9]

संदेश वितरण आमतौर पर रनटाइम और बाकी ऑपरेटिंग सिस्टम के बीच किसी प्रकार की बातचीत की आवश्यकता होती है। अफसोस की बात है, हमारा अंतहीन लूप इस प्रक्रिया को अवरुद्ध करता है - जिसका अर्थ है कि केवल एक संदेश 'द बिग स्टॉल' से पहले पॉप अप हो जाता है।

10. मास्क जोड़ें

Speed up JavaScript: 10

(छवि क्रेडिट: टैम हन्ना) [1 9]
 कॉन्स वर्कर = आवश्यकता ('कार्यकर्ता_थ्रेड्स');

var myworker = new worker.worker ('./
example7thread.js ');
var myworker2 = नया कार्यकर्ता। वर्कर ('./
example7thread.js ');


जबकि (1 == 1)
{

}

एक और प्रयोग में दो कन्स्ट्रक्टर आमंत्रणों के बाद एक खाली लूप रखना शामिल है। इस मामले में, धागे कभी काम नहीं करेंगे - आविष्कार संदेश कभी भी ऑपरेटिंग सिस्टम के साथ नहीं आता है।

11. इंटरप्रोसेस कम्युनिकेशन

जबकि तंग अंतहीन लूप चलाने वाले श्रमिकों को ऊपर प्रदर्शित करने वाली समस्याएं हैं, दिनचर्या एक दूसरे के साथ संवाद कर सकती हैं। यह एक संदेश पासिंग इंटरफ़ेस के माध्यम से किया जाता है - इसे एक सुविधा के रूप में सोचें जो आपको संदेश ऑब्जेक्ट को प्रेषक से थ्रेड सीमाओं में प्राप्तकर्ता को पास करने देता है।

12. संदेश-पास क्यों?

थ्रेड्स ई एफएफ को समन्वयित करने में सक्षम होने के लाभ के अलावा (और 'टकराव' के जोखिम को कम करने के लिए, जिसे रेस स्थितियों के रूप में भी जाना जाता है), मुख्य धागे में गुजरने वाला संदेश डीओएम के साथ बातचीत करने का एकमात्र तरीका है, डीएफ एफएफ आतंकवादी बनाने के कारण थ्रेड-सेफ गुई स्टैक्स।

13. ब्राउज़र पर जाएं

Node.js में गुजरने वाले संदेश को लागू करना कठिन है। कोड को वेब पर ले जाएं - एक HTML हार्नेस बनाकर शुरू करें जो लोड करता है Expplempi.js । ध्यान रखें कि यह कोड केवल डीओएम मूल प्रतिबंधों के कारण स्थानीयहोस्ट वेब सर्वर से चलाया जा सकता है।

14. एक मेलबॉक्स सेट करें ...

 var myworker = नया कार्यकर्ता ('./
examplempithread.js ');
var myworker2 = नया कार्यकर्ता ('./
examplempithread.js ');


myworker.onmessage = समारोह (ई)
{
Console.log (ई);
}

myworker2.onmessage = समारोह (ई)
{
Console.log (ई);
}

प्रत्येक कार्यकर्ता एक ऐसी ऑनमेसेज प्रॉपर्टी का खुलासा करता है जो एक फ़ंक्शन संदर्भ लेता है जिसे जब भी कोई संदेश दूसरे छोर से पॉप अप करता है। आने वाले संदेशों को बस मुख्य धागे से ब्राउज़र के कंसोल में भेज दिया जाता है।

15. ... और इसे कार्यकर्ता से खिलाओ

 पोस्टमेसेज ("कार्यकर्ता हैलो कहता है!");
पोस्टमेसेज ("कार्यकर्ता अप");
जबकि (1 == 1)
{
   पोस्टमेसेज ("एक्स");
}

किसी मेलबॉक्स को संदेश भेजना पोस्ट संदेश फ़ंक्शन को आमंत्रित करके पूरा किया जाता है। ध्यान रखें कि एक कार्यकर्ता भी लागू कर सकता है अवश्य घटना, जो कार्यकर्ता इंस्टेंस ऑब्जेक्ट को '' 'का मालिक' से जानकारी प्राप्त कर सकती है।

16. इसे बंद करो ...

इस समय समय में, कोड चलाने के लिए तैयार है। डेवलपर कंसोल एमपीआई इंटरफ़ेस के उच्च ई एफएफ उत्सुकता के कारण संदेशों के साथ बाढ़ नहीं है, जिसका अर्थ है कि डेटा सिस्टम ई एफएफ के आसपास यात्रा कर सकता है।

17. async और await

Speed up JavaScript: 17

(छवि क्रेडिट: टैम हन्ना) [1 9]

माइक्रोसॉफ्ट के एसिंक और प्रतीक्षा कीवर्ड के जोड़ों ने सी # और VisualBasic.net के इतिहास को संशोधित किया। सिद्धांत रूप में, एक विधि जिसे Async चिह्नित प्रोग्राम के बाकी हिस्सों के साथ सहकारी रूप से चलाया जाता है। परिणामों को प्रतीक्षा कार्य के माध्यम से कटाई की जा सकती है।

18. हमारे स्लीपर को बदलें

 कॉन्स स्लीप = (मिलीसेकंड) = & gt; {
  नया वादा वापस करें (संकल्प = & gt;
Settimeout (संकल्प, मिलीसेकंड))
} 

यह देखते हुए कि जब मूल कार्यों तक पहुंचने की बात आती है तो ब्राउज़र गंभीर सीमाओं में होते हैं, हम पहले उल्लिखित नींद समारोह का पुन: उपयोग नहीं कर सकते हैं। इसके अलावा, उप-समूह है जिसमें यह पूरे Node.js रनटाइम को रोक दिया गया है। इस चरण के साथ स्निपेट एक अधिक प्रभावी दृष्टिकोण प्रदान करता है।

19. कोड को समझें ...

यह कोड एक वादा ऑब्जेक्ट देता है - यह एक और सुविधा वर्ग है जो मल्टीथ्रेडिंग को आसान बनाने के प्रयास में जावा स्क्रिप्ट में जोड़ा गया है। आपको इसके संकल्प विधि को एक के माध्यम से आमंत्रित करने की आवश्यकता होगी सिटाइमआउट , यह सुनिश्चित करना कि कोड को काफी समय तक 'बैठना' होना चाहिए।

20. ... और इसे कहीं भी तैनात करें

AWAIT कॉल केवल ASYNC फ़ंक्शंस के अंदर की अनुमति है। इसका मतलब यह है कि कार्यकर्ता को एक पुनर्लेखन की आवश्यकता है - एक असिंक बेयरर फ़ंक्शन का आह्वान करके शुरू करें। यह बाकी कोड बातचीत को संभालता है।

 कॉन्स स्लीप = (मिलीसेकंड) = & gt; {
  नया वादा वापस करें (संकल्प = & gt;
Settimeout (संकल्प, मिलीसेकंड))
}
पोस्टमेसेज ("कर्मचारी कहते हैं नमस्ते!");
पोस्टमेसेज ("कार्यकर्ता अप");
कार्यकर्ता ()
async समारोह कार्यकर्ता () {
जबकि (1 == 1)
{
   पोस्टमेसेज ("एक्स");
   प्रतीक्षा नींद (1000);
}
} 

21. देशी की शक्ति का दोहन!

Node.js कोड पर काम कर रहे डेवलपर्स को यह नहीं भूलना चाहिए कि वे आमतौर पर कर सकते हैं - यदि अत्यधिक उच्च प्रदर्शन की आवश्यकता हो तो पूरी तरह से मूल मॉड्यूल भी बनाएं। ये न केवल विभिन्न ऑपरेटिंग सिस्टम एपीआई का लाभ उठा सकते हैं, लेकिन मशीन कोड को संकलित प्रोग्रामिंग भाषाओं में भी लिखा जा सकता है।

यह लेख मूल रूप से रचनात्मक वेब डिज़ाइन पत्रिका के अंक 2 9 1 में प्रकाशित किया गया था [25 9] वेब डिजाइनर [25 9] । [25 9] अंक 291 खरीदें [25 9] [9 3] । [25 9]

अधिक पढ़ें:

  • सबसे अच्छा जावास्क्रिप्ट पुस्तकालय
  • 25 सर्वश्रेष्ठ जावास्क्रिप्ट एपीआई
  • वास्तव में उपयोगी वेब डिजाइन ट्यूटोरियल
  • [2 9 0]
[2 9 6]

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to use reference images: 13 essential tips for artists

कैसे करना है Feb 4, 2026

(छवि क्रेडिट: जोनाथन हार्डीस्टी) [1 9] 2 का पृ..


How to build an AR app

कैसे करना है Feb 4, 2026

पेज 1 में से 3: एक एआर ऐप बनाएं: चरण 01-10 ..


Create ghostly textures with mixed-media techniques

कैसे करना है Feb 4, 2026

जब मैंने पहली बार एक पारंपरिक से डिजिटल चित्रण वर..


Create and animate SVG polygons

कैसे करना है Feb 4, 2026

इस ट्यूटोरियल में हम एसवीजी त्रिकोणों से छवियों �..


Get started with Rust

कैसे करना है Feb 4, 2026

2 का पृष्ठ 1: पृष्ठ 1 [2 9] पृष्ठ 1 ..


How to sculpt a character in VR

कैसे करना है Feb 4, 2026

2 का पृष्ठ 1: पृष्ठ 1 [2 9] पृष्ठ 1 ..


पेंट में छाया रंग कैसे मिलाएं

कैसे करना है Feb 4, 2026

कुछ लोगों को छाया के लिए मिक्सिंग मिलती है, अक्सर �..


Explore creative code with P5.js

कैसे करना है Feb 4, 2026

एक दिन बिताओ ब्रेंडन डॉज़ पर [2 9] ..


श्रेणियाँ