Memory management, event delegation, and code splitting In Hindi
जावास्क्रिप्ट प्रोग्रामिंग में एडवांस्ड वेब डेवलपमेंट में डेवलप एप्लिकेशन यूजर सिस्टम कम्पेटिबल, एफ्फिसिएंट, और ग्लोबल स्केलेबल फीचर्स से लेस होने चाहिए। यहाँ एडवांस्ड यूजर कम्पेटिबल वेब डेवलपमेंट एप्लीकेशन डिज़ाइन करने के लिए सिस्टम एनवायरनमेंट कम्पेटिबल होना चाहिए हैं, जिसमे, मेमोरी मैनेजमेंट, ईवेंट डेलिगेशन, और प्रोग्राम सोर्स कोड स्प्लिटिंग कांसेप्ट मौजूद हो। यहाँ आपके मेमोरी मैनेजमेंट, ईवेंट डेलिगेशन, और प्रोग्राम सोर्स कोड स्प्लिटिंग कांसेप्ट यूजर एप्लिकेशन बिहैवियर, सिस्टम परफॉरमेंस, रेस्पोंसिवनेस्स, और एप्लीकेशन सिस्टम रिसोर्सेज मैनेजमेंट एलोकेशन को बेहतर करने में हेल्प करते हैं।
Memory Management in JavaScript Programming.
जावास्क्रिप्ट वेब और एप्लीकेशन डेवलपमेंट में मेमोरी मैनेजमेंट यूजर को जावास्क्रिप्ट एप्लिकेशन में ऑब्जेक्ट्स को मेमोरी रिसोर्सेज को एफ्फिसेंटली आर्डर में एलोकेशन और डी-एलोकेशन करने में हेल्पफुल है। जावास्क्रिप्ट प्रोग्रामिंग का गार्बेज कलेक्शन फीचर्स अधिकांश मेमोरी मैनेजमेंट को ऑटोमेटिकली आर्डर में मैनेज और कण्ट्रोल करता है. इसके लिए यूजर को मेमोरी मैनेजमेंट कांसेप्ट को समझना पड़ता है, जिससे की यूजर मेमोरी मैनेजमेंट और मेमोरी लीकेज को स्टॉप करने में और सिस्टम परफॉरमेंस को इम्प्रूव कर सके।
Garbage Collection in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में मेमोरी मैनेजमेंट के लिए एक ऑटोमेटिकली गार्बेज कलेक्शन स्ट्रक्चर मैकेनिज्म कांसेप्ट को फॉलो करता है। जहा जावास्क्रिप्ट इंजन मेमोरी यूसेज को स्ट्रिक्ट वाच करता है, और उन सिस्टम एप्लीकेशन ऑब्जेक्ट्स को ऑटोमेटिकली क्लियर करता रहता है, जो अब सिस्टम गार्बेज स्टोरेज में यूज़ नहीं हो रहे हैं, या सिस्टम रेफ़्रेन्स में मौजूद नहीं हैं।
Garbage Collection Features.
- Reference counting – जावास्क्रिप्ट प्रोग्रामिंग में जब कोई और ऑब्जेक्ट रेफ़्रेन्स उस ऑब्जेक्ट की ओर इंडीकेट नहीं करता है, तो उसे सिस्टम में डी-एलोकेशन किया जाता है।
- Mark-and-sweep – जावास्क्रिप्ट इस एल्गोरिथम को अप्लाई कुछ ऑब्जेक्ट्स को सलेक्ट और मार्क करने में करता है, जो अभी भी सिस्टम में एक्सेसिबल या कम्पेटिबल हैं, इसके बाद इन सभी ऑब्जेक्ट्स में होल्ड मेमोरी स्टोरेज ऑब्जेक्ट को एम्प्टी करता है, जो अभी यूजर एक्सेसिबल या कम्पेटिबल नहीं हैं।
Common causes of memory leaks in JavaScript programming.
- Global variables – कई बार जावास्क्रिप्ट प्रोग्राम एक्सेक्यूशन प्रोसेस में वैरिएबल डाटा टाइप ग्लोबल स्कोप नेचर में स्टोर रहते हैं, और गार्बेज कलेक्शन इरेस प्रोसेस में प्रॉपर्ली क्लियर नहीं होते है, तो ये कई बार सिस्टम में मेमोरी लीक की वजह हो सकते हैं।
- Detached DOM elements – कई बार जावास्क्रिप्ट प्रोग्राम में डॉम से रिमूव किए गए वे ऑब्जेक्ट या एलिमेंट होते है, जिनमें अभी भी इवेंट लिस्टनेर या उनके प्रीवियस रेफ़्रेन्स मौजूद होते हैं, तो ये कई बार इनमे गार्बेज कलेक्शन नहीं हो पाता है।
- Closures – कई बार जावास्क्रिप्ट प्रोग्राम में क्लोजर एक्सटर्नल फ़ंक्शन से ज्यादा ऑब्जेक्ट और प्रोग्राम वैरिएबल रेफरेन्सेस को जरूरत से अधिक समय तक होल्ड रखते हैं, इस वजह से वे मेमोरी लीक का कारण हो सकते हैं।
Best practices of memory management in JavaScript.
- Avoid global variables – प्रोग्राम में ग्लोबल वेरिएबल अवाइड करे या वैरिएबल को जहा तक हो सके वहा तक लोकल स्कोप फ़ंक्शन मॉड्यूल में ही डिक्लेअर करे।
- Null references to large objects – जब बड़े जावास्क्रिप्ट प्रोग्राम में ऑब्जेक्ट या ऐरे की जरूरत न हो, तो उन्हें नल या अनडिफाइंड डाटा टाइप में सेट करें।
- Remove event listeners – जब किसी जावास्क्रिप्ट प्रोग्राम में इवेंट लिस्टनेर की जरूरत न हो, तो उन्हें पहले रिमूव कर दें, स्पेशली उन डॉम एलिमेंट के लिए जिन्हें जरूरत पड़ने पर रिमूव किया जाता है।
/// here we remove existing event listeners to prevent system memory leaks
const testelement = document.getElementById(“testElement”);
function testClick() {
console.log(“test Element hit”);
}
// we Add here an event listener
testelement.addEventListener(“click”, testClick);
// here we Remove the event listener when the element is no longer required
testelement.removeEventListener(“click”, testClick);
Event Delegation in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में इवेंट डेलिगेशन एक पॉपुलर कांसेप्ट है, यहाँ जावास्क्रिप्ट प्रोग्रामर जरूरत के अनुसार प्रत्येक चाइल्ड एलिमेंट से सेपरेट इवेंट लिस्टनेर को ऐड करने के बदले पैरेंट एलिमेंट से एक इवेंट लिस्टनेर को ऐड करते हैं। यह प्रोसेस सिस्टम परफॉरमेंस को इम्प्रूव कर सकता है. स्पेशली, जब लार्ज वॉल्यूम में एलिमेंट्स को डील करना हो, और जहा इवेंट लिस्टनेर को रीबाइंड किए बिना चाइल्ड एलिमेंट्स को डायनामिक आर्डर में ऐड करने या रिमूव करने में हेल्प करता है।
Why use event delegation in JavaScript?
- Performance – जावास्क्रिप्ट प्रोग्राम में कई बार चाइल्ड एलिमेंट्स से इवेंट लिस्टनेर को ऐड करने से वेब ब्राउज़र स्लो हो जाता है. स्पेशली, कई बार जब बड़ी लिस्ट या डायनामिक कंटेंट के साथ काम करते समय।
- Dynamically added elements – यह जावास्क्रिप्ट प्रोग्रामर को इवेंट लिस्ट्नेर्स को न्यू ऐड किए गए एलिमेंट्स में ऑटोमेटिकली आर्डर में काम करने की परमिशन प्रोवाइड करते है, जहा यह इसे इवेंट को रीबाइंड किए बिना इसे करता है।
How event delegation works in JavaScript.
जावास्क्रिप्ट प्रोग्राम में प्रत्येक चाइल्ड एलिमेंट में इवेंट लिस्टनेर को ऐड करने के बदले, इवेंट लिस्टनेर को पैरेंट एलिमेंट से ऐड करते है।
जब जावास्क्रिप्ट प्रोग्राम में कोई इवेंट ट्रिगर होता है, तो यह उसे टारगेट एलिमेंट से पैरेंट एलिमेंट तक “बबल” कर देता है, जहा पैरेंट एलिमेंट तय कर सकता है कि उस इवेंट को टारगेट एलिमेंट के बेस्ड पर इवेंट को मैनेज या हैंडल करना है, या नहीं ।
Example of how event delegation works.
<ul id=”sampleList”>
<li>Sample lit 1</li>
<li>Sample lit 2</li>
<li>Sample lit 3</li>
<li>Sample lit 4</li>
</ul>
<script>
// here we Attach the event listener to the parent <ul> html tag element
const list = document.getElementById(“sampleList”);
list.addEventListener(“click”, function(event) {
// here we use it to Only handle click on <li> list tag elements
if (event.target.tagName === “LI”) {
alert(`let click to select ${event.target.textContent}`);
}
});
</script>
Benefits of event delegation in JavaScript.
- यह प्रोग्राम में इवेंट लिस्ट्नेर्स के नंबर को कम करके बेहतर प्रोग्राम परफॉरमेंस प्रोवाइड करता है।
- यह कम मेमोरी को यूज़ करता है, क्योंकि यहाँ यूजर केवल एक इवेंट लिस्टनेर को ग्रुप कर रहे हैं।
- यह प्रोग्राम में डायनामिक कंटेंट को मैनेज करता है, हर बार नए ऐड किए गए एलिमेंट आटोमेटिक रूप से इवेंट लिस्टनेर को ट्रिगर करता है.
Code splitting in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में कोड स्प्लिटिंग एक ऐसा कांसेप्ट है, जिसे बड़े लार्ज वॉल्यूम प्रोग्राम सोर्स कोड बंडल को छोटे-छोटे स्माल “मॉड्यूल” टुकड़ों में स्प्लिट करने में होता है, जिसे जरूरत के प्रोग्राम में लोड किया जा सकता है। कोड स्प्लिटिंग शुरुआती प्रोग्राम लोड टाइम को घटा के और केवल जरूरी प्रोग्राम सोर्स कोड लोड करके सिस्टम वेब एप्लिकेशन के परफॉरमेंस में जबरदस्त इम्प्रूवमेंट करता है।
Why use code splitting in JavaScript?
- Faster initial load – यह किसी वेबपेज के शुरुआती वेब ब्राउज़र में ओपन लोड के टाइम में जरूरी जावास्क्रिप्ट सोर्स कोड की क्वांटिटी को कम कर देता है।
- Improved performance – किसी प्रोग्राम या वेबपेज में पर्टिकुलर फीचर्स को एक्सेस करने पर केवल यह उसके लिए जरूरी प्रोग्राम सोर्स कोड को ही लोड करता है।
- Improved user experience – यह मौजूदा एप्लीकेशन में यूजर को कम्पलीट ऐप के लोड होने के समय का वेट किए बिना ऐप के साथ तेज़ी से यूजर इंटरेक्शन करना स्टार्ट कर देता है।
How code splitting works in JavaScript.
- Dynamic imports – यहाँ किसी सिस्टम में सब कुछ पहले से लोड करने के बदले, ज़रूरत पड़ने पर ही प्रोग्राम सोर्स कोड ब्लॉक को डायनेमिक फॉर्मेट में लोड करने के लिए import() फ़ंक्शन मेथड को अप्लाई कर सकते हैं।
- Bundlers – जावास्क्रिप्ट वेबपेज में वेबपैक पार्सल या रोलअप जैसे टूल इम्पोर्ट का यूज़ करके प्रोग्राम सोर्स कोड को मल्टीप्ल सोर्स कोड बंडलों में स्प्लिट करके प्रोग्राम सोर्स कोड स्प्लिटिंग को आटोमेटिक कर सकते हैं।
Example of Webpack in JavaScript.
जावास्क्रिप्ट वेबपेज में प्रोग्रामर को किसी ऐसे फ़ीचर के कोड को स्प्लिट करना हैं, जिसे केवल एक स्पेसिफिक वेबपेज में यूज़ किया गया है.
// here we create a code in In main.js file
document.getElementById(“loadFeatures”).addEventListener(“click”, () => {
import(“./features.js”).then(module => {
// here we Use the dynamically imported module features for code splitting
module.loadFeatures();
});
});
इस एक्साम्प्ल में, जब यूजर loadFeatures बटन पर मेनुअल क्लिक करता है, तो features.js का प्रोग्राम कोड केवल उसी टाइम डायनामिक फॉर्मेट में लोड होगा। इस वजह से इनिशियल जावास्क्रिप्ट सोर्स बंडल स्माल पीसेस में बना रहता है, और यह वेब ब्राउज़र में वेबपेज लोड होने का समय बढ़ा देता है।
Use of Webpack for code splitting in JavaScript.
जावास्क्रिप्ट प्रोग्रामिंग में वेबपैक जावास्क्रिप्ट प्रोग्राम सोर्स कोड को ऑटोमेटिकली फॉर्मेट में कई भागों में स्प्लिट करता है। यहाँ आपको कोड स्प्लिट के लिए वेबपैक कॉन्फ़िगरेशन का एक एक्साम्प्ल है.
module.exports = {
entry: ‘./src/index.js’,
output: {
filename: ‘[name].[contenthash].js’,
chunkFilename: ‘[name].[contenthash].js’,
path: path.resolve(__dirname, ‘dist’)
},
optimization: {
splitChunks: {
chunks: ‘all’, // here This code split all types of webpage source code in small modules
},
},
};
यहाँ यह प्रोग्राम में सामान्य लाइब्रेरी है, जो वेंडर सोर्स कोड और डायनामिक फॉर्मेट में इम्पोर्टेड मॉड्यूल के लिए मल्टीप्ल स्प्लिट ब्लॉक को क्रिएट करेगा।
Memory management, event delegation, and code splitting Summary.
| Concept | Description or definition | advantage | Where to use |
| Memory Management features | It Refers to efficient allocation and cleanup of memory in JavaScript program, primarily it managed and controlled by garbage collection features. | It Prevent memory leaks in system, and improve system performance. | It used to deal large apps with complex source code logic. |
| Event Delegation features | It used to Attaching a single event listener to a parent element in webpage to handle multiple events on its children, rather than attaching listeners to each child element may be cause page source delay. | It helps to optimize better system performance, and handles dynamic web content. | It able to manage or Handling events in large lists or dynamic elements or object. |
| Code Splitting features | It used to Breaking up large volume JavaScript bundles source code into smaller chunks code that are loaded as needed as user requirement. | It helps you to Faster webpage load times and avoid any delays, instant improved system performance. | It Applications with multiple features or routes in application. |
Main advantages of code splitting in JavaScript.
- Smaller bundle size – कोड स्प्लिटिंग मेथड में स्टार्ट में केवल जरूरी प्रोग्राम सोर्स कोड को ही लोड किया जाता है, इस वजह से इनिशियल प्रोग्राम बंडल का साइज घट जाता है।
- Faster load time – किसी वेबपेज में जरूरत पड़ने पर प्रोग्राम सोर्स कोड को लोड करके वेब ब्राउज़र इनिशियल वेब कंटेंट को फास्टर रेंडर कर सकता है, जिससे वेबपेज ओपन परफॉरमेंस इम्प्रूव हो जाता है।
- On-demand loading – यह वेबपेज में जरूरी फीचर को केवल तभी लोड करता है, जब इंटरनेट यूजर उनके साथ जरूरी इंटरैक्ट करना चाहता है. जैसे, जब यूजर किसी स्पेसिफिक वेबपेज में नेविगेट करते हैं, या किसी बटन पर क्लिक करते हैं।
