জাভাস্ক্রিপ্টে ডিট্যাচড DOM এলিমেন্ট কীভাবে মেমোরি লিক করতে পারে

ডিট্যাচড DOM এলিমেন্ট

ডিট্যাচড DOM এলিমেন্ট হলো যেসব এলিমেন্ট DOM থেকে রিমুভ করা হয়েছে কিন্তু জাভাস্ক্রিপ্টের কারণে তাদের মেমোরি এখনো রিটেইন করা হচ্ছে। অর্থাৎ, যতক্ষণ না এলিমেন্টের কোনো ভেরিয়েবল বা অবজেক্টে রেফারেন্স থাকে, ততক্ষণ এটি গারবেজ কালেক্ট হবে না DOM থেকে ডিলিট হওয়া সত্ত্বেও।

DOM একটি ডাবল-লিংকড ট্রি। ট্রিতে একটি নোডের রেফারেন্স থাকলে পুরো ট্রি গারবেজ কালেকশন থেকে বঞ্চিত থাকে।

উদাহরণস্বরূপ, জাভাস্ক্রিপ্টে একটি DOM এলিমেন্ট তৈরি করুন। এটি ডিস্ট্রয় করুন কিন্তু এটি ধারণ করা ভেরিয়েবল ডিলিট করা ভুলে যান। এই পরিস্থিতি ডিট্যাচড DOM তৈরি করে যা শুধু उस নির্দিষ্ট এলিমেন্টকে না, পুরো ট্রিকে রেফারেন্স রাখে।

উদাহরণ

নিচের উদাহরণে, DOM থেকে রিমুভ হওয়া সত্ত্বেও 'someText' গ্লোবাল 'value' অবজেক্টে রেফারেন্স রাখে। এই কারণে এটি গারবেজ কালেক্টর দ্বারা এলিমিনেট হয় না এবং মেমোরি কনজিউম করে। এটি মেমোরি লিকের কারণ।

<html> <body> <script>    var example = document.createElement("p");    example.id = "someText";    document.body.appendChild(example);    var value = {     text: document.getElementById('someText')    };    function createFun() {       value.text.innerHTML = "Javascript is not Java";    }    createFun();    function deleteFun() {       document.body.removeChild(document.getElementById('someText'));    }    deleteFun(); </script> </body> </html>

মেমোরি লিক এড়ানোর উপায়

মেমোরি লিক এড়াতে সেরা পদ্ধতি হলো var example-কে লিসেনারের ভিতরে রাখা, যা এটিকে লোকাল ভেরিয়েবল বানাবে। যখন var example ডিলিট হবে, অবজেক্টের পাথ কাটবে, যা গারবেজ কালেক্টরের মেমোরি রিলিজ করতে দেবে।