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

Mason Freed

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

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

म्यूटेशन इवेंट, इवेंट के इस कलेक्शन का नाम है:

• 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 के लिए दस्तावेज़, MDN पर मौजूद है और यह पूरी तरह से पूरा है. आपके कोडबेस को बदलने का तरीका इस बात पर निर्भर करता है कि इन इवेंट का इस्तेमाल कैसे किया जा रहा है. हालांकि, उदाहरण के लिए:

// 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 इवेंट लिसनर कोड से बड़ा दिखता है. हालांकि, ध्यान दें कि यह एक कॉल में पूरे ट्री में होने वाले सभी म्यूटेशन को हैंडल कर सकता है. इसके लिए, इवेंट हैंडलर को कई कॉल करने की ज़रूरत नहीं होती.

Polyfill

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

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

टाइमलाइन और बंद होने से पहले आज़माने की सुविधा के बारे में जानकारी

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

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