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

Mason Freed

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

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

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

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

ये इवेंट, DOM लेवल 2 स्पेसिफ़िकेशन का बहुत पुराना हिस्सा हैं. इन्हें 2011 से बंद कर दिया गया है. इन्हें MutationObserver इंटरफ़ेस से बदल दिया गया था. यह 2013 से सभी आधुनिक ब्राउज़र में काम करता है.

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

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

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

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

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

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

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

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

इवेंट को आधिकारिक तौर पर बंद किए हुए 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 को रिलीज़ किया जाएगा. हालांकि, इवेंट को Canary, Dev, और बीटा चैनलों से पहले ही हटा दिया जाएगा, ताकि आपको इसकी चेतावनी मिल सके.

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