মিউটেশন ইভেন্টের অবমূল্যায়ন এবং পরিকল্পিত অপসারণের ঘোষণা করা এবং জুলাই 2024 সালে অপসারণের আগে আপনি কীভাবে আপনার কোড স্থানান্তর করতে পারেন তা শেয়ার করা।

Mason Freed

Chromium আনুষ্ঠানিকভাবে মিউটেশন ইভেন্টগুলিকে অবমূল্যায়ন করেছে, এবং 127 সংস্করণ থেকে শুরু করে সমর্থন অপসারণের একটি পরিকল্পনা রয়েছে, যা 23 জুলাই, 2024- এ স্থিতিশীল প্রকাশে যায়৷ এই পোস্টটি ব্যাখ্যা করে যে কেন আমরা মিউটেশন ইভেন্টগুলি সরিয়ে দিচ্ছি, এবং ব্রাউজার থেকে সরানোর আগে মাইগ্রেট করার জন্য একটি পথ প্রদান করে৷

মিউটেশন ঘটনা কি?

মিউটেশন ইভেন্ট হল নিম্নলিখিত ইভেন্টগুলির সংগ্রহের নাম:

• DOMNodeInserted
• DOMNodeRemoved
• DOMSubtreeModified
• DOMCharacterDataModified
• DOMNodeInsertedIntoDocument
• DOMNodeRemovedFromDocument
• (কোন আধুনিক ব্রাউজার দ্বারা সমর্থিত নয়) DOMAttrModified
• (কোন আধুনিক ব্রাউজার দ্বারা সমর্থিত নয়) DOMAttributeNameChanged
• (কোন আধুনিক ব্রাউজার দ্বারা সমর্থিত নয়) DOMElementNameChanged

এই ইভেন্টগুলি DOM লেভেল 2 স্পেকের একটি খুব পুরানো অংশ, এবং সেগুলি 2011 সাল থেকে বাতিল করা হয়েছে৷ এগুলিকে MutationObserver ইন্টারফেস দ্বারা প্রতিস্থাপিত করা হয়েছে, যা 2013 সাল থেকে সমস্ত আধুনিক ব্রাউজারে সমর্থিত ।

মিউটেশন ইভেন্টের ইতিহাস

মিউটেশন ইভেন্টগুলি অনেক আগে একটি ভাল ধারণার মতো শোনাচ্ছিল, কিন্তু বেশ কয়েকটি মারাত্মক ত্রুটি রয়েছে:

• তারা শব্দ এবং আগুন খুব প্রায়ই হয়. মুছে ফেলা প্রতিটি নোডের জন্য একটি ইভেন্ট বহিস্কার করা হয়।
• ইভেন্ট প্রচারের কারণে এগুলি ধীর হয় এবং কারণ তারা অনেক UA রান-টাইম অপ্টিমাইজেশন প্রতিরোধ করে৷
• তারা প্রায়শই দুর্ঘটনা ঘটায়। তারা ব্রাউজারে অনেক ক্র্যাশ এবং নিরাপত্তা ত্রুটির উৎস হয়েছে, কারণ ইভেন্ট শ্রোতারা একটি চলমান DOM অপারেশনের অধীনে সম্পূর্ণ DOM পরিবর্তন করতে পারে।

এই ত্রুটিগুলির কারণে, ইভেন্টগুলি 2011 সালে স্পেক থেকে অবচয়িত হয়েছিল এবং একটি প্রতিস্থাপন API ( MutationObserver ) 2012 সালে তৈরি করা হয়েছিল৷ নতুন API এই সময়ে 10 বছরেরও বেশি সময় ধরে কার্যকর করা হয়েছে এবং কার্যকর হয়েছে৷

কেন মিউটেশন ইভেন্টগুলি সরানো হচ্ছে

মিউটেশন ইভেন্টগুলির জন্য সমর্থন ব্রাউজার জুড়ে পরিবর্তিত হয়। কিছু ইভেন্ট, যেমন DOMNodeInsertedIntoDocument এবং DOMNodeRemovedFromDocument , সমস্ত ব্রাউজারে সমর্থিত নয়। অন্যান্য ইভেন্টের জন্য, কোনো সম্মত স্পেসিফিকেশনের অভাবের কারণে নির্দিষ্ট আচরণ পরিবর্তিত হয়। যাইহোক, একটি যুক্তিসঙ্গত প্রশ্ন হতে পারে: কেন শুধু সেগুলিকে সেখানে রেখে যাবেন না, যেহেতু তারা "সম্পন্ন" হয়ে গেছে এবং তারা শুধুমাত্র সেগুলি ব্যবহার করে এমন পৃষ্ঠাগুলিকে ধীর করে দেয়? উত্তর দুটি অংশে আসে।

প্রথমত, এই ইভেন্টগুলি ওয়েব প্ল্যাটফর্মকে ধরে রেখেছে। ওয়েব বিকশিত হওয়ার সাথে সাথে এবং নতুন API যোগ করা হয়, এই লিগ্যাসি APIগুলির অস্তিত্বকে বিবেচনায় নিতে হবে। কখনও কখনও, শুধুমাত্র এই ইভেন্টগুলিকে সমর্থন করার প্রয়োজন নতুন APIগুলিকে প্রস্তাব করা থেকে আটকাতে পারে৷ একটি উদাহরণ হিসাবে, <iframe> উপাদানগুলিকে DOM-এর মধ্যে সরানো হলে পুনরায় লোড হতে বাধা দেওয়ার জন্য একটি দীর্ঘকাল ধরে অনুরোধ করা হয়েছে। যাইহোক, আংশিকভাবে মিউটেশন ইভেন্টের অস্তিত্বের কারণে, সেই প্রচেষ্টাটি অর্জন করা খুব কঠিন বলে মনে করা হয়েছিল, এবং অনুরোধটি বন্ধ করে দেওয়া হয়েছিল।

এই ইভেন্টগুলি ব্রাউজারগুলিকে দ্রুততর করার পথে চলতে থাকে। এমনকি ব্রাউজারগুলির অপ্টিমাইজেশানগুলির সাথে, যা মিউটেশন ইভেন্টগুলি ব্যবহার করে না এমন পৃষ্ঠাগুলিতে কর্মক্ষমতা জরিমানা এড়াতে চেষ্টা করে, জিনিসগুলি নিখুঁত নয়। মিউটেশন ইভেন্ট শ্রোতাদের জন্য এখনও অনেক জায়গায় চেক করা দরকার। কোড এখনও খুব আত্মরক্ষামূলকভাবে লিখতে হবে, যেহেতু এই ঘটনাগুলি আশ্চর্যজনক উপায়ে DOM পরিবর্তন করতে পারে।

যেহেতু 10 বছরেরও বেশি সময় হয়ে গেছে ইভেন্টগুলিকে আনুষ্ঠানিকভাবে অবমূল্যায়ন করা হয়েছে, এবং প্রতিস্থাপন API একইভাবে 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 দ্বারা চালিত থাকাকালীন বিদ্যমান কোডকে কাজ চালিয়ে যাওয়ার অনুমতি দেওয়ার চেষ্টা করে। পলিফিলটি গিটহাবে বা একটি এনপিএম প্যাকেজ হিসাবে অবস্থিত।

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

টাইমলাইন এবং অবচয় ট্রায়াল তথ্য

মিউটেশন ইভেন্টগুলি সমস্ত ব্যবহারকারীর জন্য Chrome 127 থেকে মুছে ফেলা হবে* যা 23 জুলাই, 2024-এ স্ট্যাবল রিলিজে যাবে। পূর্ব-সতর্কতা হিসাবে ইভেন্টগুলি তার আগে ক্যানারি, দেব এবং বিটা চ্যানেলগুলি থেকে সরানো শুরু হবে।

• আপনার কোড স্থানান্তর করার জন্য যদি আপনার অতিরিক্ত সময়ের (জুলাই, 2024 এর পরে) প্রয়োজন হয়, তাহলে একটি অবচয় ট্রায়াল আছে যা নির্দিষ্ট সাইটগুলিতে অস্থায়ীভাবে ইভেন্টগুলিকে পুনরায় সক্ষম করে৷ MutationEventsEnabled নামে একটি এন্টারপ্রাইজ নীতিও রয়েছে যা এন্টারপ্রাইজ ব্যবহারকারীদের জন্য একইভাবে কাজ করে। এই বিকল্পগুলির যে কোনও একটি প্রয়োজনে মাইগ্রেট করার জন্য মোটামুটি নয় মাস অতিরিক্ত সময় দেয়।