हम जुलाई 2024 में, म्यूटेशन इवेंट को बंद करने और उन्हें हटाने की योजना के बारे में बताना चाहते हैं. साथ ही, यह भी बताना चाहते हैं कि कोड को हटाए जाने से पहले, उसे कैसे माइग्रेट किया जा सकता है.

Mason Freed

Chromium ने म्यूटेशन इवेंट को आधिकारिक तौर पर बंद कर दिया है. इसके तहत, 127 या इसके बाद के सभी वर्शन पर दी जाने वाली सुविधा को बंद करने की योजना है. 23 जुलाई, 2024 से, इस वर्शन को बिना किसी रुकावट के रिलीज़ किया जाएगा. इस पोस्ट में बताया गया है कि हम म्यूटेशन इवेंट क्यों हटा रहे हैं. साथ ही, उन्हें ब्राउज़र से हटाए जाने से पहले माइग्रेट करने का पाथ भी दिया गया है.

म्यूटेशन इवेंट क्या होते हैं?

नीचे दिए गए इवेंट कलेक्शन का नाम म्यूटेशन इवेंट है:

• DOMNodeInserted
• DOMNodeRemoved
• DOMSubtreeModified
• DOMCharacterDataModified
• DOMNodeInsertedIntoDocument
• DOMNodeRemovedFromDocument
• (यह किसी भी मॉडर्न ब्राउज़र पर काम नहीं करता) DOMAttrModified
• (यह किसी भी मॉडर्न ब्राउज़र पर काम नहीं करता) DOMAttributeNameChanged
• (यह किसी भी मॉडर्न ब्राउज़र पर काम नहीं करता) DOMElementNameChanged

ये इवेंट, डीओएम लेवल 2 की खास बातों का बहुत पुराना हिस्सा हैं. इन्हें 2011 से बंद कर दिया गया है. इनकी जगह MutationObserver इंटरफ़ेस ने ले ली है. यह 2013 से सभी मॉडर्न ब्राउज़र पर काम करता है.

म्यूटेशन इवेंट का इतिहास

म्यूटेशन इवेंट की बात करना काफ़ी पहले एक अच्छा आइडिया लग रहा था, लेकिन इसमें कई गंभीर खामियां थीं:

• ये बहुत ज़्यादा शब्दों वाले होते हैं और काफ़ी ज़्यादा प्रतिक्रिया देते हैं. हटाए गए हर नोड के लिए एक इवेंट ट्रिगर होता है.
• इवेंट के प्रमोशन और UA के कई रन-टाइम ऑप्टिमाइज़ेशन की वजह से, कन्वर्ज़न की प्रोसेस धीमी होती है.
• इनकी वजह से, ऐप्लिकेशन अक्सर क्रैश हो जाते हैं. ब्राउज़र में, क्रैश और सुरक्षा से जुड़ी कई गड़बड़ियों की वजह ये रही हैं. इसकी वजह यह है कि इवेंट लिसनर, चल रहे डीओएम ऑपरेशन के नीचे पूरे डीओएम को बदल सकते हैं.

इन कमियों की वजह से, 2011 में इन इवेंट को स्पेसिफ़िकेशन में का बदलाव कर दिया गया था और 2012 में एक रीप्लेसमेंट एपीआई (MutationObserver) बनाया गया था. नया एपीआई अब 10 साल से भी ज़्यादा समय से काम कर रहा है.

म्यूटेशन इवेंट क्यों हटाए जा रहे हैं

म्यूटेशन इवेंट के साथ काम करने की सुविधा, ब्राउज़र के हिसाब से अलग-अलग होती है. DOMNodeInsertedIntoDocument और DOMNodeRemovedFromDocument जैसे कुछ इवेंट, सभी ब्राउज़र पर काम नहीं करते. अन्य इवेंट के लिए, कोई भी तय जानकारी उपलब्ध न होने की वजह से हर इवेंट अलग-अलग हो सकता है. हालांकि, एक वाजिब सवाल यह हो सकता है कि: क्यों न उन्हें वहां छोड़ दिया जाए, क्योंकि वे "हो गया" हैं और वे सिर्फ़ उन पेजों को धीमा करती हैं जिनमें इन चीज़ों का इस्तेमाल होता हो? इसका जवाब दो हिस्सों में आता है.

पहली बात, इन इवेंट की वजह से वेब प्लैटफ़ॉर्म पर रोक लगी हुई है. जैसे-जैसे वेब बेहतर होता जा रहा है और नए एपीआई जोड़े जाते हैं, इन लेगसी एपीआई की मौजूदगी का ध्यान रखना ज़रूरी है. कभी-कभी, इन इवेंट को सपोर्ट करने की ज़रूरत होने पर ही नए एपीआई का सुझाव नहीं दिया जा सकता. उदाहरण के लिए, एक लंबे समय से अनुरोध किया गया है, ताकि <iframe> एलिमेंट को डीओएम में ले जाने पर, उन्हें फिर से लोड होने से रोका जा सके. हालांकि, म्यूटेशन इवेंट की मौजूदगी की वजह से, इस कोशिश को पूरा करना बहुत मुश्किल था और अनुरोध को बंद कर दिया गया.

इन इवेंट की मदद से, ब्राउज़र को तेज़ बनाने में मदद मिलती रहती है. ब्राउज़र में मौजूद ऑप्टिमाइज़ेशन के बावजूद, चीज़ें सटीक नहीं होती हैं. ये बदलाव, उन पेजों के लिए परफ़ॉर्मेंस पर लगने वाले जुर्माने से बचने की कोशिश करते हैं जो म्यूटेशन इवेंट का इस्तेमाल नहीं करते. म्यूटेशन इवेंट लिसनर को कई जगहों पर चेक की ज़रूरत है. कोड को बहुत सुरक्षित तरीके से लिखना ज़रूरी होता है, क्योंकि इन इवेंट से डीओएम में हैरान करने वाले तरीके बदलाव हो सकते हैं.

इवेंट को आधिकारिक तौर पर बंद किए 10 साल से ज़्यादा समय हो गया है और रीप्लेसमेंट एपीआई इसी तरह 10 सालों से उपलब्ध है. इसलिए, अब ब्राउज़र से म्यूटेशन इवेंट को एक बार और सभी के लिए हटा दिया जाएगा.

माइग्रेट करने का तरीका

इसके बजाय, MutationObserver का इस्तेमाल करें

MutationObserver के लिए दस्तावेज़, एमडीएन पर मौजूद है और पूरी तरह से पूरा हुआ है. आपके कोड बेस में बदलाव इस बात पर निर्भर करता है कि इन इवेंट का इस्तेमाल कैसे किया जा रहा है. उदाहरण के तौर पर:

// Old mutation event usage:  
target.addEventListener('DOMNodeInserted',event => doSomething(event.target));

// Replacement mutation observer code:  
const observer = new MutationObserver(mutationList =>  
  mutationList.filter(m => m.type === 'childList').forEach(m => {  
    m.addedNodes.forEach(doSomething);  
  }));  
observer.observe(target,{childList: true, subtree: true});  

हालांकि, MutationObserver कोड, DOMNodeInserted इवेंट लिसनर कोड से बड़ा दिखता है, लेकिन ध्यान दें कि यह इवेंट हैंडलर को कई कॉल करने के बजाय, एक ही कॉल में पूरे ट्री पर होने वाले सभी म्यूटेशन को मैनेज कर सकता है.

पॉलीफ़िल

एक पॉलीफ़िल मौजूद है, जो MutationObserver की मदद से, मौजूदा कोड को काम करते रहने की अनुमति देता है. पॉलीफ़िल, GitHub पर या npm पैकेज के तौर पर मौजूद है.

• https://github.com/mfreed7/mutation-events-polyfill#readme
• https://www.npmjs.com/package/mutation-events

समयसीमा और बंद होने के ट्रायल से जुड़ी जानकारी

Chrome 127 से सभी उपयोगकर्ताओं के लिए म्यूटेशन इवेंट हटा दिए जाएंगे*. 23 जुलाई, 2024 को स्टेबल रिलीज़ में म्यूटेशन इवेंट जोड़ दिए जाएंगे. चेतावनी के तौर पर, इससे पहले के कैनरी, डेव, और बीटा चैनलों से इन इवेंट को हटाना शुरू कर दिया जाएगा.

• अगर आपको कोड माइग्रेट करने के लिए ज़्यादा समय (जुलाई 2024) चाहिए, तो आपके पास कोड को बंद करने की ट्रायल वाली सुविधा है. इस सुविधा की मदद से, इवेंट को कुछ समय के लिए कुछ साइटों पर फिर से चालू किया जा सकता है. एक Enterprise नीति भी MutationEventsEnabled नाम की होती है. यह एंटरप्राइज़ उपयोगकर्ताओं के लिए इसी तरह काम करती है. इनमें से कोई भी विकल्प, ज़रूरत पड़ने पर माइग्रेट करने के लिए करीब नौ महीने का अतिरिक्त समय देता है.