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

Mason Freed

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

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

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

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

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

बदलाव की घटनाओं का इतिहास

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

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

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

पॉलीफ़िल

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

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

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

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

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