মেমরি ফাঁস, মেমরি ব্লোট এবং ঘন ঘন আবর্জনা সংগ্রহ সহ পৃষ্ঠা কার্যক্ষমতাকে প্রভাবিত করে এমন মেমরি সমস্যাগুলি খুঁজে পেতে Chrome এবং DevTools ব্যবহার করতে শিখুন৷
সারাংশ
- Chrome টাস্ক ম্যানেজার দিয়ে আপনার পৃষ্ঠাটি বর্তমানে কত মেমরি ব্যবহার করছে তা খুঁজে বের করুন।
- টাইমলাইন রেকর্ডিংয়ের সাথে সময়ের সাথে সাথে মেমরির ব্যবহার কল্পনা করুন।
- হিপ স্ন্যাপশটগুলির সাহায্যে বিচ্ছিন্ন DOM গাছগুলি (মেমরি লিকের একটি সাধারণ কারণ) সনাক্ত করুন৷
- অ্যালোকেশন টাইমলাইন রেকর্ডিং সহ আপনার JS হিপে কখন নতুন মেমরি বরাদ্দ করা হচ্ছে তা খুঁজে বের করুন।
ওভারভিউ
RAIL পারফরম্যান্স মডেলের চেতনায়, আপনার কর্মক্ষমতা প্রচেষ্টার ফোকাস আপনার ব্যবহারকারী হওয়া উচিত।
মেমরির সমস্যাগুলি গুরুত্বপূর্ণ কারণ সেগুলি প্রায়শই ব্যবহারকারীদের দ্বারা উপলব্ধি করা যায়৷ ব্যবহারকারীরা নিম্নলিখিত উপায়ে মেমরি সমস্যা উপলব্ধি করতে পারেন:
- একটি পৃষ্ঠার কর্মক্ষমতা সময়ের সাথে ক্রমান্বয়ে খারাপ হয়. এটি সম্ভবত একটি মেমরি লিক একটি উপসর্গ. একটি মেমরি ফাঁস হল যখন পৃষ্ঠার একটি বাগ সময়ের সাথে সাথে পৃষ্ঠাটি ক্রমান্বয়ে আরও বেশি মেমরি ব্যবহার করে।
- একটি পৃষ্ঠার কর্মক্ষমতা ধারাবাহিকভাবে খারাপ. এটি সম্ভবত মেমরি ব্লোটের একটি উপসর্গ। মেমরি ব্লোট হল যখন একটি পৃষ্ঠা সর্বোত্তম পৃষ্ঠার গতির জন্য প্রয়োজনীয়তার চেয়ে বেশি মেমরি ব্যবহার করে।
- একটি পৃষ্ঠার কর্মক্ষমতা বিলম্বিত হয় বা ঘন ঘন বিরাম বলে মনে হয়। এটি সম্ভবত ঘন ঘন আবর্জনা সংগ্রহের একটি লক্ষণ। আবর্জনা সংগ্রহ করা হয় যখন ব্রাউজার মেমরি পুনরায় দাবি করে। ব্রাউজার সিদ্ধান্ত নেয় কখন এটি ঘটবে। সংগ্রহের সময়, সমস্ত স্ক্রিপ্ট এক্সিকিউশন বিরাম দেওয়া হয়েছে। তাই যদি ব্রাউজারটি প্রচুর পরিমাণে আবর্জনা সংগ্রহ করে, স্ক্রিপ্ট এক্সিকিউশন অনেক বিরতি পেতে যাচ্ছে।
মেমরি ফোলা: "খুব বেশি" কত?
একটি মেমরি লিক সংজ্ঞায়িত করা সহজ। যদি একটি সাইট ক্রমান্বয়ে আরও বেশি মেমরি ব্যবহার করে, তাহলে আপনি একটি ফাঁস পেয়েছেন। কিন্তু মেমরি ব্লোট পিন করা একটু কঠিন। কি "অত্যধিক মেমরি ব্যবহার" হিসাবে যোগ্য?
এখানে কোন কঠিন সংখ্যা নেই, কারণ বিভিন্ন ডিভাইস এবং ব্রাউজারে বিভিন্ন ক্ষমতা রয়েছে। হাই-এন্ড স্মার্টফোনে মসৃণভাবে চলা একই পৃষ্ঠাটি একটি লো-এন্ড স্মার্টফোনে ক্র্যাশ হতে পারে।
এখানে মূল বিষয় হল RAIL মডেল ব্যবহার করা এবং আপনার ব্যবহারকারীদের উপর ফোকাস করা। আপনার ব্যবহারকারীদের কাছে কোন ডিভাইসগুলি জনপ্রিয় তা খুঁজে বের করুন এবং তারপর সেই ডিভাইসগুলিতে আপনার পৃষ্ঠা পরীক্ষা করুন৷ অভিজ্ঞতা ক্রমাগত খারাপ হলে, পৃষ্ঠাটি সেই ডিভাইসগুলির মেমরির ক্ষমতা ছাড়িয়ে যেতে পারে।
ক্রোম টাস্ক ম্যানেজারের সাথে রিয়েলটাইমে মেমরির ব্যবহার মনিটর করুন
আপনার মেমরি সমস্যা তদন্তের একটি সূচনা পয়েন্ট হিসাবে Chrome টাস্ক ম্যানেজার ব্যবহার করুন। টাস্ক ম্যানেজার হল একটি রিয়েলটাইম মনিটর যা আপনাকে বলে যে একটি পৃষ্ঠা বর্তমানে কতটা মেমরি ব্যবহার করছে।
Shift+Esc টিপুন বা Chrome প্রধান মেনুতে যান এবং টাস্ক ম্যানেজার খুলতে আরও টুল > টাস্ক ম্যানেজার নির্বাচন করুন।
টাস্ক ম্যানেজারের টেবিল হেডারে ডান-ক্লিক করুন এবং JavaScript মেমরি সক্রিয় করুন।
আপনার পৃষ্ঠা কীভাবে মেমরি ব্যবহার করছে সে সম্পর্কে এই দুটি কলাম আপনাকে বিভিন্ন জিনিস বলে:
- মেমরি কলাম নেটিভ মেমরির প্রতিনিধিত্ব করে। DOM নোডগুলি নেটিভ মেমরিতে সংরক্ষণ করা হয়। যদি এই মান বাড়ছে, DOM নোড তৈরি হচ্ছে।
- জাভাস্ক্রিপ্ট মেমরি কলাম JS হিপ প্রতিনিধিত্ব করে। এই কলামে দুটি মান রয়েছে। আপনি যে মানটিতে আগ্রহী তা হল লাইভ নম্বর (বন্ধনীতে থাকা সংখ্যা)। লাইভ নম্বর প্রতিনিধিত্ব করে আপনার পৃষ্ঠায় পৌঁছানো যায় এমন বস্তুগুলি কতটা মেমরি ব্যবহার করছে। এই সংখ্যা ক্রমবর্ধমান হলে, হয় নতুন বস্তু তৈরি করা হচ্ছে, অথবা বিদ্যমান বস্তুগুলি বৃদ্ধি পাচ্ছে।
পারফরম্যান্স রেকর্ডিং সহ মেমরি লিক কল্পনা করুন
আপনি আপনার তদন্তের আরেকটি সূচনা পয়েন্ট হিসাবে পারফরম্যান্স প্যানেল ব্যবহার করতে পারেন। পারফরম্যান্স প্যানেল আপনাকে সময়ের সাথে সাথে একটি পৃষ্ঠার মেমরি ব্যবহার কল্পনা করতে সাহায্য করে।
- DevTools-এ পারফরম্যান্স প্যানেল খুলুন।
- মেমরি চেকবক্স সক্রিয় করুন।
- একটি রেকর্ডিং করুন .
কর্মক্ষমতা মেমরি রেকর্ডিং প্রদর্শন করতে, নীচের কোড বিবেচনা করুন:
var x = [];
function grow() {
for (var i = 0; i < 10000; i++) {
document.body.appendChild(document.createElement('div'));
}
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
প্রতিবার যখন কোডে উল্লেখ করা বোতামটি চাপানো হয়, দশ হাজার div নোড ডকুমেন্ট বডিতে যুক্ত হয় এবং x অ্যারেতে এক মিলিয়ন x অক্ষরের একটি স্ট্রিং পুশ করা হয়। এই কোডটি চালানোর ফলে নিম্নলিখিত স্ক্রিনশটের মতো একটি টাইমলাইন রেকর্ডিং তৈরি হয়:
প্রথমত, ইউজার ইন্টারফেসের একটি ব্যাখ্যা। ওভারভিউ প্যানে ( NET এর নীচে) HEAP গ্রাফটি JS হিপকে উপস্থাপন করে। ওভারভিউ ফলকের নীচে কাউন্টার ফলক রয়েছে। এখানে আপনি JS হিপ ( ওভারভিউ প্যানে HEAP গ্রাফের মতো), নথি, DOM নোড, শ্রোতা এবং GPU মেমরি দ্বারা বিভক্ত মেমরি ব্যবহার দেখতে পাবেন। একটি চেকবক্স নিষ্ক্রিয় করা গ্রাফ থেকে লুকিয়ে রাখে।
এখন, স্ক্রিনশটের সাথে তুলনা করে কোডের বিশ্লেষণ। আপনি যদি নোড কাউন্টার (সবুজ গ্রাফ) দেখেন তবে আপনি দেখতে পাবেন যে এটি কোডের সাথে পরিষ্কারভাবে মেলে। বিযুক্ত পদক্ষেপে নোডের সংখ্যা বৃদ্ধি পায়। আপনি অনুমান করতে পারেন যে নোড সংখ্যার প্রতিটি বৃদ্ধি একটি কল to grow() । JS হিপ গ্রাফ (নীল গ্রাফ) ততটা সোজা নয়। সর্বোত্তম অনুশীলনের সাথে তাল মিলিয়ে, প্রথম ডিপটি আসলে একটি জোরপূর্বক আবর্জনা সংগ্রহ ( আবর্জনা সংগ্রহ করার বোতাম টিপে অর্জিত)। রেকর্ডিং অগ্রসর হওয়ার সাথে সাথে আপনি দেখতে পাচ্ছেন যে জেএস হিপ সাইজ স্পাইক করছে। এটি স্বাভাবিক এবং প্রত্যাশিত: জাভাস্ক্রিপ্ট কোড প্রতিটি বোতাম ক্লিকে DOM নোড তৈরি করে এবং যখন এটি এক মিলিয়ন অক্ষরের স্ট্রিং তৈরি করে তখন অনেক কাজ করে। এখানে মূল বিষয় হল যে জেএস হিপটি শুরু হওয়ার চেয়ে বেশি শেষ হয় (এখানে "শুরু" হল জোরপূর্বক আবর্জনা সংগ্রহের পরের পয়েন্ট)। বাস্তব জগতে, আপনি যদি JS হিপ সাইজ বা নোড সাইজ বাড়ানোর এই প্যাটার্ন দেখে থাকেন, তাহলে এর অর্থ হতে পারে মেমরি লিক।
হিপ স্ন্যাপশট সহ বিচ্ছিন্ন DOM ট্রি মেমরি লিক আবিষ্কার করুন
একটি DOM নোড শুধুমাত্র তখনই আবর্জনা সংগ্রহ করা যেতে পারে যখন পৃষ্ঠার DOM ট্রি বা জাভাস্ক্রিপ্ট কোড থেকে এটির কোনো উল্লেখ নেই৷ একটি নোডকে "বিচ্ছিন্ন" বলা হয় যখন এটি DOM ট্রি থেকে সরানো হয় কিন্তু কিছু জাভাস্ক্রিপ্ট এখনও এটি উল্লেখ করে। বিচ্ছিন্ন DOM নোড মেমরি ফাঁসের একটি সাধারণ কারণ। এই বিভাগটি আপনাকে শেখায় যে কীভাবে বিচ্ছিন্ন নোডগুলি সনাক্ত করতে DevTools এর হিপ প্রোফাইলার ব্যবহার করতে হয়।
এখানে বিচ্ছিন্ন DOM নোডের একটি সহজ উদাহরণ।
var detachedTree;
function create() {
var ul = document.createElement('ul');
for (var i = 0; i < 10; i++) {
var li = document.createElement('li');
ul.appendChild(li);
}
detachedTree = ul;
}
document.getElementById('create').addEventListener('click', create);
কোডে উল্লেখ করা বোতামে ক্লিক করলে দশ li বাচ্চার সাথে একটি ul নোড তৈরি হয়। এই নোডগুলি কোড দ্বারা উল্লেখ করা হয়েছে কিন্তু DOM গাছে বিদ্যমান নেই, তাই তারা বিচ্ছিন্ন।
হিপ স্ন্যাপশটগুলি বিচ্ছিন্ন নোডগুলি সনাক্ত করার এক উপায়। নাম থেকে বোঝা যায়, হিপ স্ন্যাপশটগুলি আপনাকে দেখায় যে স্ন্যাপশটের সময় আপনার পৃষ্ঠার JS অবজেক্ট এবং DOM নোডগুলির মধ্যে কীভাবে মেমরি বিতরণ করা হয়।
একটি স্ন্যাপশট তৈরি করতে, DevTools খুলুন এবং মেমরি প্যানেলে যান, হিপ স্ন্যাপশট রেডিও বোতামটি নির্বাচন করুন এবং তারপরে স্ন্যাপশট নিন বোতাম টিপুন৷
স্ন্যাপশট প্রক্রিয়া এবং লোড হতে কিছু সময় লাগতে পারে। এটি শেষ হয়ে গেলে, এটিকে বামদিকের প্যানেল থেকে নির্বাচন করুন ( হিপ স্ন্যাপশট নামে)।
বিচ্ছিন্ন DOM ট্রি অনুসন্ধান করতে ক্লাস ফিল্টার টেক্সটবক্সে Detached টাইপ করুন।
একটি বিচ্ছিন্ন গাছ তদন্ত করতে ক্যারেট প্রসারিত করুন.
হলুদ হাইলাইট করা নোডগুলিতে জাভাস্ক্রিপ্ট কোড থেকে সরাসরি উল্লেখ রয়েছে। লাল হাইলাইট করা নোডের সরাসরি উল্লেখ নেই। তারা শুধুমাত্র জীবিত কারণ তারা হলুদ নোডের গাছের অংশ। সাধারণভাবে, আপনি হলুদ নোডগুলিতে ফোকাস করতে চান। আপনার কোডটি ঠিক করুন যাতে হলুদ নোডটি প্রয়োজনের চেয়ে বেশি সময় ধরে বেঁচে না থাকে এবং আপনি হলুদ নোডের গাছের অংশ লাল নোডগুলি থেকেও মুক্তি পান।
এটি আরও তদন্ত করতে একটি হলুদ নোডে ক্লিক করুন। অবজেক্ট ফলকে আপনি যে কোডটি উল্লেখ করছে সে সম্পর্কে আরও তথ্য দেখতে পারেন। উদাহরণস্বরূপ, নীচের স্ক্রিনশটটিতে আপনি দেখতে পাচ্ছেন যে detachedTree ভেরিয়েবলটি নোডকে উল্লেখ করছে। এই নির্দিষ্ট মেমরি লিক ঠিক করার জন্য, আপনি কোডটি অধ্যয়ন করবেন যা detachedTree ব্যবহার করে এবং নিশ্চিত করুন যে এটি নোডের রেফারেন্সটি সরিয়ে দেয় যখন এটির আর প্রয়োজন নেই।
বরাদ্দ টাইমলাইন সহ JS হিপ মেমরি লিক সনাক্ত করুন৷
অ্যালোকেশন টাইমলাইন হল আরেকটি টুল যা আপনাকে আপনার JS হিপে মেমরি লিক ট্র্যাক করতে সাহায্য করতে পারে।
বরাদ্দের সময়রেখা প্রদর্শন করতে নিম্নলিখিত কোডটি বিবেচনা করুন:
var x = [];
function grow() {
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
প্রতিবার যখন কোডে উল্লেখ করা বোতামটি পুশ করা হয়, x অ্যারেতে এক মিলিয়ন অক্ষরের একটি স্ট্রিং যোগ করা হয়।
একটি বরাদ্দের টাইমলাইন রেকর্ড করতে, DevTools খুলুন, প্রোফাইল প্যানেলে যান, রেকর্ড বরাদ্দ টাইমলাইন রেডিও বোতামটি নির্বাচন করুন, স্টার্ট বোতাম টিপুন, আপনার সন্দেহ হয় যে মেমরি লিক হচ্ছে এমন ক্রিয়া সম্পাদন করুন এবং তারপরে রেকর্ডিং বন্ধ করার বোতাম টিপুন ( 
) যখন আপনি সম্পন্ন করেন।
আপনি রেকর্ডিং করার সময়, নিচের স্ক্রিনশটের মতো অ্যালোকেশন টাইমলাইনে কোনো নীল বার দেখা যাচ্ছে কিনা লক্ষ্য করুন।
এই নীল বারগুলি নতুন মেমরি বরাদ্দের প্রতিনিধিত্ব করে। যারা নতুন মেমরি বরাদ্দ মেমরি লিক জন্য আপনার প্রার্থী. আপনি শুধুমাত্র নির্দিষ্ট সময়সীমার মধ্যে বরাদ্দ করা বস্তুগুলি দেখাতে কনস্ট্রাক্টর ফলকটি ফিল্টার করতে একটি বারে জুম করতে পারেন।
অবজেক্টটি প্রসারিত করুন এবং অবজেক্ট প্যানে এটি সম্পর্কে আরও বিশদ দেখতে এর মানটিতে ক্লিক করুন। উদাহরণস্বরূপ, নীচের স্ক্রিনশটে, নতুনভাবে বরাদ্দ করা বস্তুর বিশদ বিবরণ দেখে, আপনি দেখতে সক্ষম হবেন যে এটি Window স্কোপের x ভেরিয়েবলে বরাদ্দ করা হয়েছে।
ফাংশন দ্বারা মেমরি বরাদ্দ তদন্ত
জাভাস্ক্রিপ্ট ফাংশন দ্বারা মেমরি বরাদ্দ দেখতে মেমরি প্যানেলে বরাদ্দ স্যাম্পলিং টাইপ ব্যবহার করুন।
- অ্যালোকেশন স্যাম্পলিং রেডিও বোতামটি নির্বাচন করুন। যদি পৃষ্ঠায় একজন কর্মী থাকে, আপনি স্টার্ট বোতামের পাশের ড্রপডাউন মেনু ব্যবহার করে প্রোফাইলিং টার্গেট হিসাবে এটি নির্বাচন করতে পারেন।
- স্টার্ট বোতাম টিপুন।
- যে পৃষ্ঠায় আপনি তদন্ত করতে চান সেই ক্রিয়াগুলি সম্পাদন করুন৷
- আপনার সমস্ত কাজ শেষ হয়ে গেলে স্টপ বোতাম টিপুন।
DevTools আপনাকে ফাংশন দ্বারা মেমরি বরাদ্দের একটি ভাঙ্গন দেখায়। ডিফল্ট ভিউ হল Heavy (Bottom Up) , যা শীর্ষে সর্বাধিক মেমরি বরাদ্দ করে এমন ফাংশন প্রদর্শন করে।
ঘন ঘন আবর্জনা সংগ্রহের স্থান
যদি আপনার পৃষ্ঠা ঘন ঘন বিরাম বলে মনে হয়, তাহলে আপনার আবর্জনা সংগ্রহের সমস্যা হতে পারে।
ঘন ঘন আবর্জনা সংগ্রহের জন্য আপনি Chrome টাস্ক ম্যানেজার বা টাইমলাইন মেমরি রেকর্ডিং ব্যবহার করতে পারেন। টাস্ক ম্যানেজারে, ঘন ঘন বর্ধিত এবং পতনের মেমরি বা জাভাস্ক্রিপ্ট মেমরির মানগুলি ঘন ঘন আবর্জনা সংগ্রহের প্রতিনিধিত্ব করে। টাইমলাইন রেকর্ডিংয়ে, ঘন ঘন জেএস হিপ বা নোড গণনা গ্রাফগুলি ঘন ঘন বর্জ্য এবং পতনশীল আবর্জনা সংগ্রহকে নির্দেশ করে।
একবার আপনি সমস্যাটি চিহ্নিত করার পরে, আপনি একটি বরাদ্দকরণ টাইমলাইন রেকর্ডিং ব্যবহার করতে পারেন যেখানে মেমরি বরাদ্দ করা হচ্ছে এবং কোন ফাংশনগুলি বরাদ্দের কারণ হচ্ছে।
,
মেমরি ফাঁস, মেমরি ব্লোট এবং ঘন ঘন আবর্জনা সংগ্রহ সহ পৃষ্ঠা কার্যক্ষমতাকে প্রভাবিত করে এমন মেমরি সমস্যাগুলি খুঁজে পেতে Chrome এবং DevTools ব্যবহার করতে শিখুন৷
সারাংশ
- Chrome টাস্ক ম্যানেজার দিয়ে আপনার পৃষ্ঠাটি বর্তমানে কত মেমরি ব্যবহার করছে তা খুঁজে বের করুন।
- টাইমলাইন রেকর্ডিংয়ের সাথে সময়ের সাথে সাথে মেমরির ব্যবহার কল্পনা করুন।
- হিপ স্ন্যাপশটগুলির সাহায্যে বিচ্ছিন্ন DOM গাছগুলি (মেমরি লিকের একটি সাধারণ কারণ) সনাক্ত করুন৷
- অ্যালোকেশন টাইমলাইন রেকর্ডিং সহ আপনার JS হিপে কখন নতুন মেমরি বরাদ্দ করা হচ্ছে তা খুঁজে বের করুন।
ওভারভিউ
RAIL পারফরম্যান্স মডেলের চেতনায়, আপনার কর্মক্ষমতা প্রচেষ্টার ফোকাস আপনার ব্যবহারকারী হওয়া উচিত।
মেমরির সমস্যাগুলি গুরুত্বপূর্ণ কারণ সেগুলি প্রায়শই ব্যবহারকারীদের দ্বারা উপলব্ধি করা যায়৷ ব্যবহারকারীরা নিম্নলিখিত উপায়ে মেমরি সমস্যা উপলব্ধি করতে পারেন:
- একটি পৃষ্ঠার কর্মক্ষমতা সময়ের সাথে ক্রমান্বয়ে খারাপ হয়. এটি সম্ভবত একটি মেমরি লিক একটি উপসর্গ. একটি মেমরি ফাঁস হল যখন পৃষ্ঠার একটি বাগ সময়ের সাথে সাথে পৃষ্ঠাটি ক্রমান্বয়ে আরও বেশি মেমরি ব্যবহার করে।
- একটি পৃষ্ঠার কর্মক্ষমতা ধারাবাহিকভাবে খারাপ. এটি সম্ভবত মেমরি ব্লোটের একটি উপসর্গ। মেমরি ব্লোট হল যখন একটি পৃষ্ঠা সর্বোত্তম পৃষ্ঠার গতির জন্য প্রয়োজনীয়তার চেয়ে বেশি মেমরি ব্যবহার করে।
- একটি পৃষ্ঠার কর্মক্ষমতা বিলম্বিত হয় বা ঘন ঘন বিরাম বলে মনে হয়। এটি সম্ভবত ঘন ঘন আবর্জনা সংগ্রহের একটি লক্ষণ। আবর্জনা সংগ্রহ করা হয় যখন ব্রাউজার মেমরি পুনরায় দাবি করে। ব্রাউজার সিদ্ধান্ত নেয় কখন এটি ঘটবে। সংগ্রহের সময়, সমস্ত স্ক্রিপ্ট এক্সিকিউশন বিরাম দেওয়া হয়েছে। তাই যদি ব্রাউজারটি প্রচুর পরিমাণে আবর্জনা সংগ্রহ করে, স্ক্রিপ্ট এক্সিকিউশন অনেক বিরতি পেতে যাচ্ছে।
মেমরি ফোলা: "খুব বেশি" কত?
একটি মেমরি লিক সংজ্ঞায়িত করা সহজ। যদি একটি সাইট ক্রমান্বয়ে আরও বেশি মেমরি ব্যবহার করে, তাহলে আপনি একটি ফাঁস পেয়েছেন। কিন্তু মেমরি ব্লোট পিন করা একটু কঠিন। কি "অত্যধিক মেমরি ব্যবহার" হিসাবে যোগ্য?
এখানে কোন কঠিন সংখ্যা নেই, কারণ বিভিন্ন ডিভাইস এবং ব্রাউজারে বিভিন্ন ক্ষমতা রয়েছে। হাই-এন্ড স্মার্টফোনে মসৃণভাবে চলা একই পৃষ্ঠাটি একটি লো-এন্ড স্মার্টফোনে ক্র্যাশ হতে পারে।
এখানে মূল বিষয় হল RAIL মডেল ব্যবহার করা এবং আপনার ব্যবহারকারীদের উপর ফোকাস করা। আপনার ব্যবহারকারীদের কাছে কোন ডিভাইসগুলি জনপ্রিয় তা খুঁজে বের করুন এবং তারপর সেই ডিভাইসগুলিতে আপনার পৃষ্ঠা পরীক্ষা করুন৷ অভিজ্ঞতা ক্রমাগত খারাপ হলে, পৃষ্ঠাটি সেই ডিভাইসগুলির মেমরির ক্ষমতা ছাড়িয়ে যেতে পারে।
ক্রোম টাস্ক ম্যানেজারের সাথে রিয়েলটাইমে মেমরির ব্যবহার মনিটর করুন
আপনার মেমরি সমস্যা তদন্তের একটি সূচনা পয়েন্ট হিসাবে Chrome টাস্ক ম্যানেজার ব্যবহার করুন। টাস্ক ম্যানেজার হল একটি রিয়েলটাইম মনিটর যা আপনাকে বলে যে একটি পৃষ্ঠা বর্তমানে কতটা মেমরি ব্যবহার করছে।
Shift+Esc টিপুন বা Chrome প্রধান মেনুতে যান এবং টাস্ক ম্যানেজার খুলতে আরও টুল > টাস্ক ম্যানেজার নির্বাচন করুন।
টাস্ক ম্যানেজারের টেবিল হেডারে ডান-ক্লিক করুন এবং JavaScript মেমরি সক্রিয় করুন।
আপনার পৃষ্ঠা কীভাবে মেমরি ব্যবহার করছে সে সম্পর্কে এই দুটি কলাম আপনাকে বিভিন্ন জিনিস বলে:
- মেমরি কলাম নেটিভ মেমরির প্রতিনিধিত্ব করে। DOM নোডগুলি নেটিভ মেমরিতে সংরক্ষণ করা হয়। যদি এই মান বাড়ছে, DOM নোড তৈরি হচ্ছে।
- জাভাস্ক্রিপ্ট মেমরি কলাম JS হিপ প্রতিনিধিত্ব করে। এই কলামে দুটি মান রয়েছে। আপনি যে মানটিতে আগ্রহী তা হল লাইভ নম্বর (বন্ধনীতে থাকা সংখ্যা)। লাইভ নম্বর প্রতিনিধিত্ব করে আপনার পৃষ্ঠায় পৌঁছানো যায় এমন বস্তুগুলি কতটা মেমরি ব্যবহার করছে। এই সংখ্যা ক্রমবর্ধমান হলে, হয় নতুন বস্তু তৈরি করা হচ্ছে, অথবা বিদ্যমান বস্তুগুলি বৃদ্ধি পাচ্ছে।
পারফরম্যান্স রেকর্ডিং সহ মেমরি লিক কল্পনা করুন
আপনি আপনার তদন্তের আরেকটি সূচনা পয়েন্ট হিসাবে পারফরম্যান্স প্যানেল ব্যবহার করতে পারেন। পারফরম্যান্স প্যানেল আপনাকে সময়ের সাথে সাথে একটি পৃষ্ঠার মেমরি ব্যবহার কল্পনা করতে সাহায্য করে।
- DevTools-এ পারফরম্যান্স প্যানেল খুলুন।
- মেমরি চেকবক্স সক্রিয় করুন।
- একটি রেকর্ডিং করুন .
কর্মক্ষমতা মেমরি রেকর্ডিং প্রদর্শন করতে, নীচের কোড বিবেচনা করুন:
var x = [];
function grow() {
for (var i = 0; i < 10000; i++) {
document.body.appendChild(document.createElement('div'));
}
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
প্রতিবার যখন কোডে উল্লেখ করা বোতামটি চাপানো হয়, দশ হাজার div নোড ডকুমেন্ট বডিতে যুক্ত হয় এবং x অ্যারেতে এক মিলিয়ন x অক্ষরের একটি স্ট্রিং পুশ করা হয়। এই কোডটি চালানোর ফলে নিম্নলিখিত স্ক্রিনশটের মতো একটি টাইমলাইন রেকর্ডিং তৈরি হয়:
প্রথমত, ইউজার ইন্টারফেসের একটি ব্যাখ্যা। ওভারভিউ প্যানে ( NET এর নীচে) HEAP গ্রাফটি JS হিপকে উপস্থাপন করে। ওভারভিউ ফলকের নীচে কাউন্টার ফলক রয়েছে। এখানে আপনি JS হিপ ( ওভারভিউ প্যানে HEAP গ্রাফের মতো), নথি, DOM নোড, শ্রোতা এবং GPU মেমরি দ্বারা বিভক্ত মেমরি ব্যবহার দেখতে পাবেন। একটি চেকবক্স নিষ্ক্রিয় করা গ্রাফ থেকে লুকিয়ে রাখে।
এখন, স্ক্রিনশটের সাথে তুলনা করে কোডের বিশ্লেষণ। আপনি যদি নোড কাউন্টার (সবুজ গ্রাফ) দেখেন তবে আপনি দেখতে পাবেন যে এটি কোডের সাথে পরিষ্কারভাবে মেলে। বিযুক্ত পদক্ষেপে নোডের সংখ্যা বৃদ্ধি পায়। আপনি অনুমান করতে পারেন যে নোড সংখ্যার প্রতিটি বৃদ্ধি একটি কল to grow() । JS হিপ গ্রাফ (নীল গ্রাফ) ততটা সোজা নয়। সর্বোত্তম অনুশীলনের সাথে তাল মিলিয়ে, প্রথম ডিপটি আসলে একটি জোরপূর্বক আবর্জনা সংগ্রহ ( আবর্জনা সংগ্রহ করার বোতাম টিপে অর্জিত)। রেকর্ডিং অগ্রসর হওয়ার সাথে সাথে আপনি দেখতে পাচ্ছেন যে জেএস হিপ সাইজ স্পাইক করছে। এটি স্বাভাবিক এবং প্রত্যাশিত: জাভাস্ক্রিপ্ট কোড প্রতিটি বোতাম ক্লিকে DOM নোড তৈরি করে এবং যখন এটি এক মিলিয়ন অক্ষরের স্ট্রিং তৈরি করে তখন অনেক কাজ করে। এখানে মূল বিষয় হল যে জেএস হিপটি শুরু হওয়ার চেয়ে বেশি শেষ হয় (এখানে "শুরু" হল জোরপূর্বক আবর্জনা সংগ্রহের পরের পয়েন্ট)। বাস্তব জগতে, আপনি যদি JS হিপ সাইজ বা নোড সাইজ বাড়ানোর এই প্যাটার্ন দেখে থাকেন, তাহলে এর অর্থ হতে পারে মেমরি লিক।
হিপ স্ন্যাপশট সহ বিচ্ছিন্ন DOM ট্রি মেমরি লিক আবিষ্কার করুন
একটি DOM নোড শুধুমাত্র তখনই আবর্জনা সংগ্রহ করা যেতে পারে যখন পৃষ্ঠার DOM ট্রি বা জাভাস্ক্রিপ্ট কোড থেকে এটির কোনো উল্লেখ নেই৷ একটি নোডকে "বিচ্ছিন্ন" বলা হয় যখন এটি DOM ট্রি থেকে সরানো হয় কিন্তু কিছু জাভাস্ক্রিপ্ট এখনও এটি উল্লেখ করে। বিচ্ছিন্ন DOM নোড মেমরি ফাঁসের একটি সাধারণ কারণ। এই বিভাগটি আপনাকে শেখায় যে কীভাবে বিচ্ছিন্ন নোডগুলি সনাক্ত করতে DevTools এর হিপ প্রোফাইলার ব্যবহার করতে হয়।
এখানে বিচ্ছিন্ন DOM নোডের একটি সহজ উদাহরণ।
var detachedTree;
function create() {
var ul = document.createElement('ul');
for (var i = 0; i < 10; i++) {
var li = document.createElement('li');
ul.appendChild(li);
}
detachedTree = ul;
}
document.getElementById('create').addEventListener('click', create);
কোডে উল্লেখ করা বোতামে ক্লিক করলে দশ li বাচ্চার সাথে একটি ul নোড তৈরি হয়। এই নোডগুলি কোড দ্বারা উল্লেখ করা হয়েছে কিন্তু DOM গাছে বিদ্যমান নেই, তাই তারা বিচ্ছিন্ন।
হিপ স্ন্যাপশটগুলি বিচ্ছিন্ন নোডগুলি সনাক্ত করার এক উপায়। নাম থেকে বোঝা যায়, হিপ স্ন্যাপশটগুলি আপনাকে দেখায় যে স্ন্যাপশটের সময় আপনার পৃষ্ঠার JS অবজেক্ট এবং DOM নোডগুলির মধ্যে কীভাবে মেমরি বিতরণ করা হয়।
একটি স্ন্যাপশট তৈরি করতে, DevTools খুলুন এবং মেমরি প্যানেলে যান, হিপ স্ন্যাপশট রেডিও বোতামটি নির্বাচন করুন এবং তারপরে স্ন্যাপশট নিন বোতাম টিপুন৷
স্ন্যাপশট প্রক্রিয়া এবং লোড হতে কিছু সময় লাগতে পারে। এটি শেষ হয়ে গেলে, এটিকে বামদিকের প্যানেল থেকে নির্বাচন করুন ( হিপ স্ন্যাপশট নামে)।
বিচ্ছিন্ন DOM ট্রি অনুসন্ধান করতে ক্লাস ফিল্টার টেক্সটবক্সে Detached টাইপ করুন।
একটি বিচ্ছিন্ন গাছ তদন্ত করতে ক্যারেট প্রসারিত করুন.
হলুদ হাইলাইট করা নোডগুলিতে জাভাস্ক্রিপ্ট কোড থেকে সরাসরি উল্লেখ রয়েছে। লাল হাইলাইট করা নোডের সরাসরি উল্লেখ নেই। তারা শুধুমাত্র জীবিত কারণ তারা হলুদ নোডের গাছের অংশ। সাধারণভাবে, আপনি হলুদ নোডগুলিতে ফোকাস করতে চান। আপনার কোডটি ঠিক করুন যাতে হলুদ নোডটি প্রয়োজনের চেয়ে বেশি সময় ধরে বেঁচে না থাকে এবং আপনি হলুদ নোডের গাছের অংশ লাল নোডগুলি থেকেও মুক্তি পান।
এটি আরও তদন্ত করতে একটি হলুদ নোডে ক্লিক করুন। অবজেক্ট ফলকে আপনি যে কোডটি উল্লেখ করছে সে সম্পর্কে আরও তথ্য দেখতে পারেন। উদাহরণস্বরূপ, নীচের স্ক্রিনশটটিতে আপনি দেখতে পাচ্ছেন যে detachedTree ভেরিয়েবলটি নোডকে উল্লেখ করছে। এই নির্দিষ্ট মেমরি লিক ঠিক করার জন্য, আপনি কোডটি অধ্যয়ন করবেন যা detachedTree ব্যবহার করে এবং নিশ্চিত করুন যে এটি নোডের রেফারেন্সটি সরিয়ে দেয় যখন এটির আর প্রয়োজন নেই।
বরাদ্দ টাইমলাইন সহ JS হিপ মেমরি লিক সনাক্ত করুন৷
অ্যালোকেশন টাইমলাইন হল আরেকটি টুল যা আপনাকে আপনার JS হিপে মেমরি লিক ট্র্যাক করতে সাহায্য করতে পারে।
বরাদ্দের সময়রেখা প্রদর্শন করতে নিম্নলিখিত কোডটি বিবেচনা করুন:
var x = [];
function grow() {
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
প্রতিবার যখন কোডে উল্লেখ করা বোতামটি পুশ করা হয়, x অ্যারেতে এক মিলিয়ন অক্ষরের একটি স্ট্রিং যোগ করা হয়।
একটি বরাদ্দের টাইমলাইন রেকর্ড করতে, DevTools খুলুন, প্রোফাইল প্যানেলে যান, রেকর্ড বরাদ্দ টাইমলাইন রেডিও বোতামটি নির্বাচন করুন, স্টার্ট বোতাম টিপুন, আপনার সন্দেহ হয় যে মেমরি লিক হচ্ছে এমন ক্রিয়া সম্পাদন করুন এবং তারপরে রেকর্ডিং বন্ধ করার বোতাম টিপুন ( ) যখন আপনি সম্পন্ন করেন।
আপনি রেকর্ডিং করার সময়, নিচের স্ক্রিনশটের মতো অ্যালোকেশন টাইমলাইনে কোনো নীল বার দেখা যাচ্ছে কিনা লক্ষ্য করুন।
এই নীল বারগুলি নতুন মেমরি বরাদ্দের প্রতিনিধিত্ব করে। যারা নতুন মেমরি বরাদ্দ মেমরি লিক জন্য আপনার প্রার্থী. আপনি শুধুমাত্র নির্দিষ্ট সময়সীমার মধ্যে বরাদ্দ করা বস্তুগুলি দেখাতে কনস্ট্রাক্টর ফলকটি ফিল্টার করতে একটি বারে জুম করতে পারেন।
অবজেক্টটি প্রসারিত করুন এবং অবজেক্ট প্যানে এটি সম্পর্কে আরও বিশদ দেখতে এর মানটিতে ক্লিক করুন। উদাহরণস্বরূপ, নীচের স্ক্রিনশটে, নতুনভাবে বরাদ্দ করা বস্তুর বিশদ বিবরণ দেখে, আপনি দেখতে সক্ষম হবেন যে এটি Window স্কোপের x ভেরিয়েবলে বরাদ্দ করা হয়েছে।
ফাংশন দ্বারা মেমরি বরাদ্দ তদন্ত
জাভাস্ক্রিপ্ট ফাংশন দ্বারা মেমরি বরাদ্দ দেখতে মেমরি প্যানেলে বরাদ্দ স্যাম্পলিং টাইপ ব্যবহার করুন।
- অ্যালোকেশন স্যাম্পলিং রেডিও বোতামটি নির্বাচন করুন। যদি পৃষ্ঠায় একজন কর্মী থাকে, আপনি স্টার্ট বোতামের পাশের ড্রপডাউন মেনু ব্যবহার করে প্রোফাইলিং টার্গেট হিসাবে এটি নির্বাচন করতে পারেন।
- স্টার্ট বোতাম টিপুন।
- যে পৃষ্ঠায় আপনি তদন্ত করতে চান সেই ক্রিয়াগুলি সম্পাদন করুন৷
- আপনার সমস্ত কাজ শেষ হয়ে গেলে স্টপ বোতাম টিপুন।
DevTools আপনাকে ফাংশন দ্বারা মেমরি বরাদ্দের একটি ভাঙ্গন দেখায়। ডিফল্ট ভিউ হল Heavy (Bottom Up) , যা শীর্ষে সর্বাধিক মেমরি বরাদ্দ করে এমন ফাংশন প্রদর্শন করে।
ঘন ঘন আবর্জনা সংগ্রহের স্থান
যদি আপনার পৃষ্ঠা ঘন ঘন বিরাম বলে মনে হয়, তাহলে আপনার আবর্জনা সংগ্রহের সমস্যা হতে পারে।
ঘন ঘন আবর্জনা সংগ্রহের জন্য আপনি Chrome টাস্ক ম্যানেজার বা টাইমলাইন মেমরি রেকর্ডিং ব্যবহার করতে পারেন। টাস্ক ম্যানেজারে, ঘন ঘন বর্ধিত এবং পতনের মেমরি বা জাভাস্ক্রিপ্ট মেমরির মানগুলি ঘন ঘন আবর্জনা সংগ্রহের প্রতিনিধিত্ব করে। টাইমলাইন রেকর্ডিংয়ে, ঘন ঘন জেএস হিপ বা নোড গণনা গ্রাফগুলি ঘন ঘন বর্জ্য এবং পতনশীল আবর্জনা সংগ্রহকে নির্দেশ করে।
একবার আপনি সমস্যাটি চিহ্নিত করার পরে, আপনি একটি বরাদ্দকরণ টাইমলাইন রেকর্ডিং ব্যবহার করতে পারেন যেখানে মেমরি বরাদ্দ করা হচ্ছে এবং কোন ফাংশনগুলি বরাদ্দের কারণ হচ্ছে।
,
মেমরি ফাঁস, মেমরি ব্লোট এবং ঘন ঘন আবর্জনা সংগ্রহ সহ পৃষ্ঠা কার্যক্ষমতাকে প্রভাবিত করে এমন মেমরি সমস্যাগুলি খুঁজে পেতে Chrome এবং DevTools ব্যবহার করতে শিখুন৷
সারাংশ
- Chrome টাস্ক ম্যানেজার দিয়ে আপনার পৃষ্ঠাটি বর্তমানে কত মেমরি ব্যবহার করছে তা খুঁজে বের করুন।
- টাইমলাইন রেকর্ডিংয়ের সাথে সময়ের সাথে সাথে মেমরির ব্যবহার কল্পনা করুন।
- হিপ স্ন্যাপশটগুলির সাহায্যে বিচ্ছিন্ন DOM গাছগুলি (মেমরি লিকের একটি সাধারণ কারণ) সনাক্ত করুন৷
- অ্যালোকেশন টাইমলাইন রেকর্ডিং সহ আপনার JS হিপে কখন নতুন মেমরি বরাদ্দ করা হচ্ছে তা খুঁজে বের করুন।
ওভারভিউ
RAIL পারফরম্যান্স মডেলের চেতনায়, আপনার কর্মক্ষমতা প্রচেষ্টার ফোকাস আপনার ব্যবহারকারী হওয়া উচিত।
মেমরির সমস্যাগুলি গুরুত্বপূর্ণ কারণ সেগুলি প্রায়শই ব্যবহারকারীদের দ্বারা উপলব্ধি করা যায়৷ ব্যবহারকারীরা নিম্নলিখিত উপায়ে মেমরি সমস্যা উপলব্ধি করতে পারেন:
- একটি পৃষ্ঠার কর্মক্ষমতা সময়ের সাথে ক্রমান্বয়ে খারাপ হয়. এটি সম্ভবত একটি মেমরি লিক একটি উপসর্গ. একটি মেমরি ফাঁস হল যখন পৃষ্ঠার একটি বাগ সময়ের সাথে সাথে পৃষ্ঠাটি ক্রমান্বয়ে আরও বেশি মেমরি ব্যবহার করে।
- একটি পৃষ্ঠার কর্মক্ষমতা ধারাবাহিকভাবে খারাপ. এটি সম্ভবত মেমরি ব্লোটের একটি উপসর্গ। মেমরি ব্লোট হল যখন একটি পৃষ্ঠা সর্বোত্তম পৃষ্ঠার গতির জন্য প্রয়োজনীয়তার চেয়ে বেশি মেমরি ব্যবহার করে।
- একটি পৃষ্ঠার কর্মক্ষমতা বিলম্বিত হয় বা ঘন ঘন বিরাম বলে মনে হয়। এটি সম্ভবত ঘন ঘন আবর্জনা সংগ্রহের একটি লক্ষণ। আবর্জনা সংগ্রহ করা হয় যখন ব্রাউজার মেমরি পুনরায় দাবি করে। ব্রাউজার সিদ্ধান্ত নেয় কখন এটি ঘটবে। সংগ্রহের সময়, সমস্ত স্ক্রিপ্ট এক্সিকিউশন বিরাম দেওয়া হয়েছে। তাই যদি ব্রাউজারটি প্রচুর পরিমাণে আবর্জনা সংগ্রহ করে, স্ক্রিপ্ট এক্সিকিউশন অনেক বিরতি পেতে যাচ্ছে।
মেমরি ফোলা: "খুব বেশি" কত?
একটি মেমরি লিক সংজ্ঞায়িত করা সহজ। যদি একটি সাইট ক্রমান্বয়ে আরও বেশি মেমরি ব্যবহার করে, তাহলে আপনি একটি ফাঁস পেয়েছেন। কিন্তু মেমরি ব্লোট পিন করা একটু কঠিন। কি "অত্যধিক মেমরি ব্যবহার" হিসাবে যোগ্য?
এখানে কোন কঠিন সংখ্যা নেই, কারণ বিভিন্ন ডিভাইস এবং ব্রাউজারে বিভিন্ন ক্ষমতা রয়েছে। হাই-এন্ড স্মার্টফোনে মসৃণভাবে চলা একই পৃষ্ঠাটি একটি লো-এন্ড স্মার্টফোনে ক্র্যাশ হতে পারে।
এখানে মূল বিষয় হল RAIL মডেল ব্যবহার করা এবং আপনার ব্যবহারকারীদের উপর ফোকাস করা। আপনার ব্যবহারকারীদের কাছে কোন ডিভাইসগুলি জনপ্রিয় তা খুঁজে বের করুন এবং তারপর সেই ডিভাইসগুলিতে আপনার পৃষ্ঠা পরীক্ষা করুন৷ অভিজ্ঞতা ক্রমাগত খারাপ হলে, পৃষ্ঠাটি সেই ডিভাইসগুলির মেমরির ক্ষমতা ছাড়িয়ে যেতে পারে।
ক্রোম টাস্ক ম্যানেজারের সাথে রিয়েলটাইমে মেমরির ব্যবহার মনিটর করুন
আপনার মেমরি সমস্যা তদন্তের একটি সূচনা পয়েন্ট হিসাবে Chrome টাস্ক ম্যানেজার ব্যবহার করুন। টাস্ক ম্যানেজার হল একটি রিয়েলটাইম মনিটর যা আপনাকে বলে যে একটি পৃষ্ঠা বর্তমানে কতটা মেমরি ব্যবহার করছে।
Shift+Esc টিপুন বা Chrome প্রধান মেনুতে যান এবং টাস্ক ম্যানেজার খুলতে আরও টুল > টাস্ক ম্যানেজার নির্বাচন করুন।
টাস্ক ম্যানেজারের টেবিল হেডারে ডান-ক্লিক করুন এবং JavaScript মেমরি সক্রিয় করুন।
আপনার পৃষ্ঠা কীভাবে মেমরি ব্যবহার করছে সে সম্পর্কে এই দুটি কলাম আপনাকে বিভিন্ন জিনিস বলে:
- মেমরি কলাম নেটিভ মেমরির প্রতিনিধিত্ব করে। DOM নোডগুলি নেটিভ মেমরিতে সংরক্ষণ করা হয়। যদি এই মান বাড়ছে, DOM নোড তৈরি হচ্ছে।
- জাভাস্ক্রিপ্ট মেমরি কলাম JS হিপ প্রতিনিধিত্ব করে। এই কলামে দুটি মান রয়েছে। আপনি যে মানটিতে আগ্রহী তা হল লাইভ নম্বর (বন্ধনীতে থাকা সংখ্যা)। লাইভ নম্বর প্রতিনিধিত্ব করে আপনার পৃষ্ঠায় পৌঁছানো যায় এমন বস্তুগুলি কতটা মেমরি ব্যবহার করছে। এই সংখ্যা ক্রমবর্ধমান হলে, হয় নতুন বস্তু তৈরি করা হচ্ছে, অথবা বিদ্যমান বস্তুগুলি বৃদ্ধি পাচ্ছে।
পারফরম্যান্স রেকর্ডিং সহ মেমরি লিক কল্পনা করুন
আপনি আপনার তদন্তের আরেকটি সূচনা পয়েন্ট হিসাবে পারফরম্যান্স প্যানেল ব্যবহার করতে পারেন। পারফরম্যান্স প্যানেল আপনাকে সময়ের সাথে সাথে একটি পৃষ্ঠার মেমরি ব্যবহার কল্পনা করতে সাহায্য করে।
- DevTools-এ পারফরম্যান্স প্যানেল খুলুন।
- মেমরি চেকবক্স সক্রিয় করুন।
- একটি রেকর্ডিং করুন .
কর্মক্ষমতা মেমরি রেকর্ডিং প্রদর্শন করতে, নীচের কোড বিবেচনা করুন:
var x = [];
function grow() {
for (var i = 0; i < 10000; i++) {
document.body.appendChild(document.createElement('div'));
}
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
প্রতিবার যখন কোডে উল্লেখ করা বোতামটি চাপানো হয়, দশ হাজার div নোড ডকুমেন্ট বডিতে যুক্ত হয় এবং x অ্যারেতে এক মিলিয়ন x অক্ষরের একটি স্ট্রিং পুশ করা হয়। এই কোডটি চালানোর ফলে নিম্নলিখিত স্ক্রিনশটের মতো একটি টাইমলাইন রেকর্ডিং তৈরি হয়:
প্রথমত, ইউজার ইন্টারফেসের একটি ব্যাখ্যা। ওভারভিউ প্যানে ( NET এর নীচে) HEAP গ্রাফটি JS হিপকে উপস্থাপন করে। ওভারভিউ ফলকের নীচে কাউন্টার ফলক রয়েছে। এখানে আপনি JS হিপ ( ওভারভিউ প্যানে HEAP গ্রাফের মতো), নথি, DOM নোড, শ্রোতা এবং GPU মেমরি দ্বারা বিভক্ত মেমরি ব্যবহার দেখতে পাবেন। একটি চেকবক্স নিষ্ক্রিয় করা গ্রাফ থেকে লুকিয়ে রাখে।
এখন, স্ক্রিনশটের সাথে তুলনা করে কোডের বিশ্লেষণ। আপনি যদি নোড কাউন্টার (সবুজ গ্রাফ) দেখেন তবে আপনি দেখতে পাবেন যে এটি কোডের সাথে পরিষ্কারভাবে মেলে। বিযুক্ত পদক্ষেপে নোডের সংখ্যা বৃদ্ধি পায়। আপনি অনুমান করতে পারেন যে নোড সংখ্যার প্রতিটি বৃদ্ধি একটি কল to grow() । JS হিপ গ্রাফ (নীল গ্রাফ) ততটা সোজা নয়। সর্বোত্তম অনুশীলনের সাথে তাল মিলিয়ে, প্রথম ডিপটি আসলে একটি জোরপূর্বক আবর্জনা সংগ্রহ ( আবর্জনা সংগ্রহ করার বোতাম টিপে অর্জিত)। রেকর্ডিং অগ্রসর হওয়ার সাথে সাথে আপনি দেখতে পাচ্ছেন যে জেএস হিপ সাইজ স্পাইক করছে। এটি স্বাভাবিক এবং প্রত্যাশিত: জাভাস্ক্রিপ্ট কোড প্রতিটি বোতাম ক্লিকে DOM নোড তৈরি করে এবং যখন এটি এক মিলিয়ন অক্ষরের স্ট্রিং তৈরি করে তখন অনেক কাজ করে। এখানে মূল বিষয় হল যে জেএস হিপটি শুরু হওয়ার চেয়ে বেশি শেষ হয় (এখানে "শুরু" হল জোরপূর্বক আবর্জনা সংগ্রহের পরের পয়েন্ট)। বাস্তব জগতে, আপনি যদি JS হিপ সাইজ বা নোড সাইজ বাড়ানোর এই প্যাটার্ন দেখে থাকেন, তাহলে এর অর্থ হতে পারে মেমরি লিক।
হিপ স্ন্যাপশট সহ বিচ্ছিন্ন DOM ট্রি মেমরি লিক আবিষ্কার করুন
একটি DOM নোড শুধুমাত্র তখনই আবর্জনা সংগ্রহ করা যেতে পারে যখন পৃষ্ঠার DOM ট্রি বা জাভাস্ক্রিপ্ট কোড থেকে এটির কোনো উল্লেখ নেই৷ একটি নোডকে "বিচ্ছিন্ন" বলা হয় যখন এটি DOM ট্রি থেকে সরানো হয় কিন্তু কিছু জাভাস্ক্রিপ্ট এখনও এটি উল্লেখ করে। বিচ্ছিন্ন DOM নোড মেমরি ফাঁসের একটি সাধারণ কারণ। এই বিভাগটি আপনাকে শেখায় যে কীভাবে বিচ্ছিন্ন নোডগুলি সনাক্ত করতে DevTools এর হিপ প্রোফাইলার ব্যবহার করতে হয়।
এখানে বিচ্ছিন্ন DOM নোডের একটি সহজ উদাহরণ।
var detachedTree;
function create() {
var ul = document.createElement('ul');
for (var i = 0; i < 10; i++) {
var li = document.createElement('li');
ul.appendChild(li);
}
detachedTree = ul;
}
document.getElementById('create').addEventListener('click', create);
কোডে উল্লেখ করা বোতামে ক্লিক করলে দশ li বাচ্চার সাথে একটি ul নোড তৈরি হয়। এই নোডগুলি কোড দ্বারা উল্লেখ করা হয়েছে কিন্তু DOM গাছে বিদ্যমান নেই, তাই তারা বিচ্ছিন্ন।
হিপ স্ন্যাপশটগুলি বিচ্ছিন্ন নোডগুলি সনাক্ত করার এক উপায়। নাম থেকে বোঝা যায়, হিপ স্ন্যাপশটগুলি আপনাকে দেখায় যে স্ন্যাপশটের সময় আপনার পৃষ্ঠার JS অবজেক্ট এবং DOM নোডগুলির মধ্যে কীভাবে মেমরি বিতরণ করা হয়।
একটি স্ন্যাপশট তৈরি করতে, DevTools খুলুন এবং মেমরি প্যানেলে যান, হিপ স্ন্যাপশট রেডিও বোতামটি নির্বাচন করুন এবং তারপরে স্ন্যাপশট নিন বোতাম টিপুন৷
স্ন্যাপশট প্রক্রিয়া এবং লোড হতে কিছু সময় লাগতে পারে। এটি শেষ হয়ে গেলে, এটিকে বামদিকের প্যানেল থেকে নির্বাচন করুন ( হিপ স্ন্যাপশট নামে)।
বিচ্ছিন্ন DOM ট্রি অনুসন্ধান করতে ক্লাস ফিল্টার টেক্সটবক্সে Detached টাইপ করুন।
একটি বিচ্ছিন্ন গাছ তদন্ত করতে ক্যারেট প্রসারিত করুন.
হলুদ হাইলাইট করা নোডগুলিতে জাভাস্ক্রিপ্ট কোড থেকে সরাসরি উল্লেখ রয়েছে। লাল হাইলাইট করা নোডের সরাসরি উল্লেখ নেই। তারা শুধুমাত্র জীবিত কারণ তারা হলুদ নোডের গাছের অংশ। সাধারণভাবে, আপনি হলুদ নোডগুলিতে ফোকাস করতে চান। আপনার কোডটি ঠিক করুন যাতে হলুদ নোডটি প্রয়োজনের চেয়ে বেশি সময় ধরে বেঁচে না থাকে এবং আপনি হলুদ নোডের গাছের অংশ লাল নোডগুলি থেকেও মুক্তি পান।
এটি আরও তদন্ত করতে একটি হলুদ নোডে ক্লিক করুন। অবজেক্ট ফলকে আপনি যে কোডটি উল্লেখ করছে সে সম্পর্কে আরও তথ্য দেখতে পারেন। উদাহরণস্বরূপ, নীচের স্ক্রিনশটটিতে আপনি দেখতে পাচ্ছেন যে detachedTree ভেরিয়েবলটি নোডকে উল্লেখ করছে। এই নির্দিষ্ট মেমরি লিক ঠিক করার জন্য, আপনি কোডটি অধ্যয়ন করবেন যা detachedTree ব্যবহার করে এবং নিশ্চিত করুন যে এটি নোডের রেফারেন্সটি সরিয়ে দেয় যখন এটির আর প্রয়োজন নেই।
বরাদ্দ টাইমলাইন সহ JS হিপ মেমরি লিক সনাক্ত করুন৷
অ্যালোকেশন টাইমলাইন হল আরেকটি টুল যা আপনাকে আপনার JS হিপে মেমরি লিক ট্র্যাক করতে সাহায্য করতে পারে।
বরাদ্দের সময়রেখা প্রদর্শন করতে নিম্নলিখিত কোডটি বিবেচনা করুন:
var x = [];
function grow() {
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
প্রতিবার যখন কোডে উল্লেখ করা বোতামটি পুশ করা হয়, x অ্যারেতে এক মিলিয়ন অক্ষরের একটি স্ট্রিং যোগ করা হয়।
একটি বরাদ্দের টাইমলাইন রেকর্ড করতে, DevTools খুলুন, প্রোফাইল প্যানেলে যান, রেকর্ড বরাদ্দ টাইমলাইন রেডিও বোতামটি নির্বাচন করুন, স্টার্ট বোতাম টিপুন, আপনার সন্দেহ হয় যে মেমরি লিক হচ্ছে এমন ক্রিয়া সম্পাদন করুন এবং তারপরে রেকর্ডিং বন্ধ করার বোতাম টিপুন ( ) যখন আপনি সম্পন্ন করেন।
আপনি রেকর্ডিং করার সময়, নিচের স্ক্রিনশটের মতো অ্যালোকেশন টাইমলাইনে কোনো নীল বার দেখা যাচ্ছে কিনা লক্ষ্য করুন।
এই নীল বারগুলি নতুন মেমরি বরাদ্দের প্রতিনিধিত্ব করে। যারা নতুন মেমরি বরাদ্দ মেমরি লিক জন্য আপনার প্রার্থী. আপনি শুধুমাত্র নির্দিষ্ট সময়সীমার মধ্যে বরাদ্দ করা বস্তুগুলি দেখাতে কনস্ট্রাক্টর ফলকটি ফিল্টার করতে একটি বারে জুম করতে পারেন।
অবজেক্টটি প্রসারিত করুন এবং অবজেক্ট প্যানে এটি সম্পর্কে আরও বিশদ দেখতে এর মানটিতে ক্লিক করুন। উদাহরণস্বরূপ, নীচের স্ক্রিনশটে, নতুনভাবে বরাদ্দ করা বস্তুর বিশদ বিবরণ দেখে, আপনি দেখতে সক্ষম হবেন যে এটি Window স্কোপের x ভেরিয়েবলে বরাদ্দ করা হয়েছে।
ফাংশন দ্বারা মেমরি বরাদ্দ তদন্ত
জাভাস্ক্রিপ্ট ফাংশন দ্বারা মেমরি বরাদ্দ দেখতে মেমরি প্যানেলে বরাদ্দ স্যাম্পলিং টাইপ ব্যবহার করুন।
- অ্যালোকেশন স্যাম্পলিং রেডিও বোতামটি নির্বাচন করুন। যদি পৃষ্ঠায় একজন কর্মী থাকে, আপনি স্টার্ট বোতামের পাশের ড্রপডাউন মেনু ব্যবহার করে প্রোফাইলিং টার্গেট হিসাবে এটি নির্বাচন করতে পারেন।
- স্টার্ট বোতাম টিপুন।
- যে পৃষ্ঠায় আপনি তদন্ত করতে চান সেই ক্রিয়াগুলি সম্পাদন করুন৷
- আপনার সমস্ত কাজ শেষ হয়ে গেলে স্টপ বোতাম টিপুন।
DevTools আপনাকে ফাংশন দ্বারা মেমরি বরাদ্দের একটি ভাঙ্গন দেখায়। ডিফল্ট ভিউ হল Heavy (Bottom Up) , যা শীর্ষে সর্বাধিক মেমরি বরাদ্দ করে এমন ফাংশন প্রদর্শন করে।
ঘন ঘন আবর্জনা সংগ্রহের স্থান
যদি আপনার পৃষ্ঠা ঘন ঘন বিরাম বলে মনে হয়, তাহলে আপনার আবর্জনা সংগ্রহের সমস্যা হতে পারে।
ঘন ঘন আবর্জনা সংগ্রহের জন্য আপনি Chrome টাস্ক ম্যানেজার বা টাইমলাইন মেমরি রেকর্ডিং ব্যবহার করতে পারেন। টাস্ক ম্যানেজারে, ঘন ঘন বর্ধিত এবং পতনের মেমরি বা জাভাস্ক্রিপ্ট মেমরির মানগুলি ঘন ঘন আবর্জনা সংগ্রহের প্রতিনিধিত্ব করে। টাইমলাইন রেকর্ডিংয়ে, ঘন ঘন জেএস হিপ বা নোড গণনা গ্রাফগুলি ঘন ঘন বর্জ্য এবং পতনশীল আবর্জনা সংগ্রহকে নির্দেশ করে।
একবার আপনি সমস্যাটি চিহ্নিত করার পরে, আপনি একটি বরাদ্দকরণ টাইমলাইন রেকর্ডিং ব্যবহার করতে পারেন যেখানে মেমরি বরাদ্দ করা হচ্ছে এবং কোন ফাংশনগুলি বরাদ্দের কারণ হচ্ছে।
,
মেমরি ফাঁস, মেমরি ব্লোট এবং ঘন ঘন আবর্জনা সংগ্রহ সহ পৃষ্ঠা কার্যক্ষমতাকে প্রভাবিত করে এমন মেমরি সমস্যাগুলি খুঁজে পেতে Chrome এবং DevTools ব্যবহার করতে শিখুন৷
সারাংশ
- আপনার পৃষ্ঠাটি বর্তমানে ক্রোম টাস্ক ম্যানেজারের সাথে কত মেমরি ব্যবহার করছে তা সন্ধান করুন।
- টাইমলাইন রেকর্ডিংয়ের সাথে সময়ের সাথে সাথে মেমরির ব্যবহারটি ভিজ্যুয়ালাইজ করুন।
- হিপ স্ন্যাপশট সহ বিচ্ছিন্ন ডিওএম গাছগুলি (মেমরি ফাঁসের একটি সাধারণ কারণ) সনাক্ত করুন।
- বরাদ্দের সময়রেখার রেকর্ডিংয়ের সাথে আপনার জেএস স্তূপে কখন নতুন মেমরি বরাদ্দ করা হচ্ছে তা সন্ধান করুন।
ওভারভিউ
রেল পারফরম্যান্স মডেলের চেতনায়, আপনার পারফরম্যান্স প্রচেষ্টার ফোকাসটি আপনার ব্যবহারকারীদের হওয়া উচিত।
মেমরির সমস্যাগুলি গুরুত্বপূর্ণ কারণ তারা প্রায়শই ব্যবহারকারীদের দ্বারা উপলব্ধিযোগ্য। ব্যবহারকারীরা নিম্নলিখিত উপায়ে মেমরির সমস্যাগুলি বুঝতে পারেন:
- একটি পৃষ্ঠার পারফরম্যান্স সময়ের সাথে সাথে ক্রমান্বয়ে আরও খারাপ হয়ে যায়। এটি সম্ভবত একটি স্মৃতি ফাঁস হওয়ার লক্ষণ। একটি মেমরি ফাঁস হ'ল যখন পৃষ্ঠায় একটি বাগটি সময়ের সাথে সাথে পৃষ্ঠাটি ক্রমান্বয়ে আরও বেশি মেমরি ব্যবহার করে।
- একটি পৃষ্ঠার পারফরম্যান্স ধারাবাহিকভাবে খারাপ। এটি সম্ভবত মেমরি ব্লাটের একটি লক্ষণ। মেমোরি ব্লাট হ'ল যখন কোনও পৃষ্ঠা সর্বোত্তম পৃষ্ঠার গতির জন্য প্রয়োজনীয়তার চেয়ে বেশি মেমরি ব্যবহার করে।
- একটি পৃষ্ঠার পারফরম্যান্স বিলম্বিত হয় বা ঘন ঘন বিরতি দেয় বলে মনে হয়। এটি সম্ভবত ঘন ঘন আবর্জনা সংগ্রহের লক্ষণ। যখন ব্রাউজার মেমরি পুনরুদ্ধার করে তখন আবর্জনা সংগ্রহ হয়। ব্রাউজার সিদ্ধান্ত নেয় যখন এটি ঘটে। সংগ্রহের সময়, সমস্ত স্ক্রিপ্ট সম্পাদন বিরতি দেওয়া হয়। সুতরাং যদি ব্রাউজারটি প্রচুর পরিমাণে সংগ্রহ করে থাকে তবে স্ক্রিপ্ট এক্সিকিউশনটি প্রচুর বিরতি পেতে চলেছে।
মেমরি ব্লাট: "খুব বেশি" কত?
একটি স্মৃতি ফাঁস সংজ্ঞায়িত করা সহজ। যদি কোনও সাইট ক্রমান্বয়ে আরও বেশি মেমরি ব্যবহার করে তবে আপনি একটি ফুটো পেয়েছেন। তবে মেমরি ব্লাট পিন করা কিছুটা শক্ত। "অত্যধিক স্মৃতি ব্যবহার" হিসাবে যোগ্যতা কী?
এখানে কোনও হার্ড নম্বর নেই, কারণ বিভিন্ন ডিভাইস এবং ব্রাউজারগুলির বিভিন্ন ক্ষমতা রয়েছে। একই পৃষ্ঠাটি যা উচ্চ-শেষের স্মার্টফোনে মসৃণভাবে চালিত হয় তা নিম্ন-শেষের স্মার্টফোনে ক্র্যাশ হতে পারে।
এখানে কীটি হ'ল রেল মডেলটি ব্যবহার করা এবং আপনার ব্যবহারকারীদের উপর ফোকাস করা। আপনার ব্যবহারকারীদের কাছে কী ডিভাইসগুলি জনপ্রিয় তা সন্ধান করুন এবং তারপরে সেই ডিভাইসগুলিতে আপনার পৃষ্ঠাটি পরীক্ষা করুন। যদি অভিজ্ঞতাটি ধারাবাহিকভাবে খারাপ হয় তবে পৃষ্ঠাটি সেই ডিভাইসগুলির মেমরি ক্ষমতাগুলি ছাড়িয়ে যেতে পারে।
ক্রোম টাস্ক ম্যানেজারের সাথে রিয়েলটাইমে মেমরির ব্যবহার পর্যবেক্ষণ করুন
আপনার মেমরি ইস্যু তদন্তের সূচনা পয়েন্ট হিসাবে ক্রোম টাস্ক ম্যানেজারকে ব্যবহার করুন। টাস্ক ম্যানেজার একটি রিয়েলটাইম মনিটর যা আপনাকে জানায় যে কোনও পৃষ্ঠা বর্তমানে কত মেমরি ব্যবহার করছে।
শিফট+ইএসসি টিপুন বা ক্রোম মেইন মেনুতে যান এবং টাস্ক ম্যানেজারটি খোলার জন্য আরও সরঞ্জাম > টাস্ক ম্যানেজার নির্বাচন করুন।
টাস্ক ম্যানেজারের টেবিল শিরোনামে ডান ক্লিক করুন এবং জাভাস্ক্রিপ্ট মেমরি সক্ষম করুন।
এই দুটি কলাম আপনাকে আপনার পৃষ্ঠাটি কীভাবে মেমরি ব্যবহার করছে সে সম্পর্কে বিভিন্ন জিনিস আপনাকে বলে:
- মেমরি কলামটি দেশীয় স্মৃতি উপস্থাপন করে। ডোম নোডগুলি দেশীয় স্মৃতিতে সংরক্ষণ করা হয়। যদি এই মানটি বাড়ছে তবে ডোম নোডগুলি তৈরি হচ্ছে।
- জাভাস্ক্রিপ্ট মেমরি কলামটি জেএস হিপকে উপস্থাপন করে। এই কলামে দুটি মান রয়েছে। আপনি যে মানটিতে আগ্রহী তা হ'ল লাইভ নম্বর (প্রথম বন্ধনীগুলির সংখ্যা)। লাইভ নম্বরটি আপনার পৃষ্ঠায় পৌঁছনীয় অবজেক্টগুলি কতটা মেমরি ব্যবহার করছে তা উপস্থাপন করে। যদি এই সংখ্যাটি বাড়ছে তবে হয় নতুন বস্তু তৈরি করা হচ্ছে, বা বিদ্যমান অবজেক্টগুলি বাড়ছে।
পারফরম্যান্স রেকর্ডিং সহ মেমরি ফাঁস ভিজ্যুয়ালাইজ করুন
আপনি পারফরম্যান্স প্যানেলটিকে আপনার তদন্তের আরেকটি প্রারম্ভিক পয়েন্ট হিসাবে ব্যবহার করতে পারেন। পারফরম্যান্স প্যানেল আপনাকে সময়ের সাথে সাথে কোনও পৃষ্ঠার মেমরির ব্যবহার কল্পনা করতে সহায়তা করে।
- ডেভটুলগুলিতে পারফরম্যান্স প্যানেলটি খুলুন।
- মেমরি চেকবক্স সক্ষম করুন।
- একটি রেকর্ডিং করুন ।
পারফরম্যান্স মেমরি রেকর্ডিংগুলি প্রদর্শনের জন্য, নীচের কোডটি বিবেচনা করুন:
var x = [];
function grow() {
for (var i = 0; i < 10000; i++) {
document.body.appendChild(document.createElement('div'));
}
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
প্রতিবার যখন কোডটিতে উল্লেখ করা বোতামটি চাপ দেওয়া হয়, দশ হাজার div নোডগুলি ডকুমেন্ট বডিটিতে যুক্ত করা হয় এবং এক মিলিয়ন x অক্ষরের একটি স্ট্রিং x অ্যারেতে ধাক্কা দেওয়া হয়। এই কোডটি চালানো নিম্নলিখিত স্ক্রিনশটের মতো একটি টাইমলাইন রেকর্ডিং তৈরি করে:
প্রথমত, ব্যবহারকারী ইন্টারফেসের একটি ব্যাখ্যা। ওভারভিউ ফলকের হিপ গ্রাফটি ( নেট নীচে) জেএস হিপকে উপস্থাপন করে। ওভারভিউ ফলকের নীচে কাউন্টার ফলক রয়েছে। এখানে আপনি জেএস হিপ ( ওভারভিউ ফলকের হিপ গ্রাফের সমান), ডকুমেন্টস, ডোম নোডস, শ্রোতা এবং জিপিইউ মেমরি দ্বারা মেমরির ব্যবহার ভেঙে দেখতে পাচ্ছেন। একটি চেকবক্স অক্ষম করা গ্রাফ থেকে এটি লুকায়।
এখন, স্ক্রিনশটের সাথে তুলনা করে কোডের একটি বিশ্লেষণ। আপনি যদি নোড কাউন্টার (গ্রিন গ্রাফ) এর দিকে তাকান তবে আপনি দেখতে পাবেন যে এটি কোডের সাথে পরিষ্কারভাবে মেলে। নোড গণনা পৃথক পদক্ষেপে বৃদ্ধি পায়। আপনি ধরে নিতে পারেন যে নোড গণনায় প্রতিটি বৃদ্ধি হ'ল grow() কল। জেএস হিপ গ্রাফ (নীল গ্রাফ) ততটা সোজা নয়। সেরা অনুশীলনের সাথে তাল মিলিয়ে, প্রথম ডিপটি আসলে একটি জোর করে আবর্জনা সংগ্রহ ( সংগ্রহের আবর্জনা বোতাম টিপে অর্জন করা)। রেকর্ডিংয়ের অগ্রগতির সাথে সাথে আপনি দেখতে পাচ্ছেন যে জেএস হিপ সাইজের স্পাইকগুলি। এটি প্রাকৃতিক এবং প্রত্যাশিত: জাভাস্ক্রিপ্ট কোডটি প্রতিটি বোতামে ডিওএম নোড তৈরি করছে এবং যখন এটি এক মিলিয়ন অক্ষরের স্ট্রিং তৈরি করে তখন প্রচুর কাজ করছে। এখানে মূল বিষয়টি হ'ল জেএস হিপটি শুরু হওয়ার চেয়ে উচ্চতর শেষ হয় ("শুরু" এখানে জোর করে আবর্জনা সংগ্রহের পরে পয়েন্ট হিসাবে)। বাস্তব বিশ্বে, আপনি যদি জেএস হিপ আকার বা নোডের আকার বাড়ানোর এই প্যাটার্নটি দেখে থাকেন তবে এটি সম্ভবত একটি মেমরি ফুটো বোঝায়।
হিপ স্ন্যাপশট সহ বিচ্ছিন্ন ডোম ট্রি মেমরি ফাঁস আবিষ্কার করুন
কোনও ডোম নোড কেবল তখনই সংগ্রহ করা যেতে পারে যখন পৃষ্ঠার ডিওএম ট্রি বা জাভাস্ক্রিপ্ট কোড থেকে কোনও উল্লেখ নেই। ডোম গাছ থেকে সরানো হলে একটি নোডকে "বিচ্ছিন্ন" বলে মনে করা হয় তবে কিছু জাভাস্ক্রিপ্ট এখনও এটি উল্লেখ করে। বিচ্ছিন্ন ডিওএম নোডগুলি মেমরি ফাঁসের একটি সাধারণ কারণ। এই বিভাগটি আপনাকে বিচ্ছিন্ন নোডগুলি সনাক্ত করতে কীভাবে ডিভটুলসের হিপ প্রোফাইলার ব্যবহার করতে হয় তা শিখায়।
বিচ্ছিন্ন ডিওএম নোডগুলির একটি সাধারণ উদাহরণ এখানে।
var detachedTree;
function create() {
var ul = document.createElement('ul');
for (var i = 0; i < 10; i++) {
var li = document.createElement('li');
ul.appendChild(li);
}
detachedTree = ul;
}
document.getElementById('create').addEventListener('click', create);
কোডটিতে রেফারেন্স করা বোতামটি ক্লিক করা দশটি li বাচ্চাদের সাথে একটি ul নোড তৈরি করে। এই নোডগুলি কোড দ্বারা রেফারেন্স করা হয় তবে ডিওএম গাছে বিদ্যমান নেই, তাই সেগুলি বিচ্ছিন্ন।
হিপ স্ন্যাপশটগুলি বিচ্ছিন্ন নোডগুলি সনাক্ত করার এক উপায়। নামটি থেকে বোঝা যায়, হিপ স্ন্যাপশটগুলি আপনাকে দেখায় যে কীভাবে আপনার পৃষ্ঠার জেএস অবজেক্টস এবং ডোম নোডগুলির মধ্যে স্ন্যাপশটের সময়কালে মেমরি বিতরণ করা হয়।
একটি স্ন্যাপশট তৈরি করতে, ডিভটুলগুলি খুলুন এবং মেমরি প্যানেলে যান, হিপ স্ন্যাপশট রেডিও বোতামটি নির্বাচন করুন এবং তারপরে স্ন্যাপশট নিন বোতামটি টিপুন।
স্ন্যাপশটটি প্রক্রিয়া এবং লোড করতে কিছুটা সময় নিতে পারে। এটি শেষ হয়ে গেলে, এটি লেফথ্যান্ড প্যানেল থেকে নির্বাচন করুন (নামযুক্ত হিপ স্ন্যাপশট )।
বিচ্ছিন্ন ডিওএম গাছগুলি অনুসন্ধান করতে ক্লাস ফিল্টার টেক্সটবক্সে Detached টাইপ করুন।
একটি বিচ্ছিন্ন গাছ তদন্ত করতে ক্যারেটগুলি প্রসারিত করুন।
নোডগুলি হাইলাইট করা হলুদ জাভাস্ক্রিপ্ট কোড থেকে তাদের সরাসরি উল্লেখ রয়েছে। নোডগুলি হাইলাইট করা রেডের সরাসরি রেফারেন্স নেই। তারা কেবল জীবিত কারণ তারা হলুদ নোডের গাছের অংশ। সাধারণভাবে, আপনি হলুদ নোডগুলিতে ফোকাস করতে চান। আপনার কোডটি ঠিক করুন যাতে হলুদ নোডটি যতটা প্রয়োজন তার চেয়ে বেশি সময়ের জন্য বেঁচে না থাকে এবং আপনি হলুদ নোডের গাছের অংশযুক্ত লাল নোডগুলি থেকেও মুক্তি পান।
এটি আরও তদন্ত করতে একটি হলুদ নোডে ক্লিক করুন। অবজেক্টস ফলকে আপনি এটি উল্লেখ করা কোড সম্পর্কে আরও তথ্য দেখতে পারেন। উদাহরণস্বরূপ, নীচের স্ক্রিনশটে আপনি দেখতে পাচ্ছেন যে detachedTree ভেরিয়েবল নোডকে উল্লেখ করছে। এই নির্দিষ্ট মেমরি ফাঁসটি ঠিক করার জন্য, আপনি কোডটি অধ্যয়ন করবেন যা detachedTree ব্যবহার করে এবং এটি নিশ্চিত করে যে এটি নোডের আর রেফারেন্স সরিয়ে দেয় যখন এটির আর প্রয়োজন হয় না।
বরাদ্দের সময়রেখা সহ জেএস হিপ মেমরি ফাঁস সনাক্ত করুন
বরাদ্দের সময়রেখা হ'ল আরেকটি সরঞ্জাম যা আপনাকে আপনার জেএস স্তূপের মেমরি ফাঁসগুলি ট্র্যাক করতে সহায়তা করতে পারে।
বরাদ্দের সময়রেখা প্রদর্শনের জন্য নিম্নলিখিত কোডটি বিবেচনা করুন:
var x = [];
function grow() {
x.push(new Array(1000000).join('x'));
}
document.getElementById('grow').addEventListener('click', grow);
প্রতিবার কোডটিতে উল্লেখ করা বোতামটি ধাক্কা দেওয়া হয়, x অ্যারেতে এক মিলিয়ন অক্ষরের একটি স্ট্রিং যুক্ত করা হয়।
বরাদ্দের সময়রেখা রেকর্ড করতে, ডিভটুলগুলি খুলুন, প্রোফাইল প্যানেলে যান, রেকর্ড বরাদ্দের সময়রেখা রেডিও বোতামটি নির্বাচন করুন, স্টার্ট বোতামটি টিপুন, আপনার সন্দেহ যে ক্রিয়াটি মেমরি ফাঁস হওয়ার কারণ হয়ে উঠছে তা সম্পাদন করুন এবং তারপরে স্টপ রেকর্ডিং বোতামটি টিপুন ( ) আপনি যখন কাজ শেষ।
আপনি যেমন রেকর্ডিং করছেন, লক্ষ্য করুন যে কোনও নীল বারগুলি বরাদ্দের সময়রেখায় প্রদর্শিত হয়, যেমন নীচের স্ক্রিনশটের মতো।
এই নীল বারগুলি নতুন স্মৃতি বরাদ্দকে উপস্থাপন করে। এই নতুন মেমরি বরাদ্দগুলি মেমরি ফাঁসের জন্য আপনার প্রার্থী। আপনি নির্দিষ্ট সময়সীমার সময় বরাদ্দ করা কেবলমাত্র অবজেক্টগুলি প্রদর্শন করতে কনস্ট্রাক্টর ফলকটি ফিল্টার করতে একটি বারে জুম করতে পারেন।
অবজেক্টটি প্রসারিত করুন এবং অবজেক্ট ফলকে এটি সম্পর্কে আরও বিশদ দেখতে এর মানটিতে ক্লিক করুন। উদাহরণস্বরূপ, নীচের স্ক্রিনশটে, নতুন বরাদ্দ করা বস্তুর বিশদটি দেখে আপনি দেখতে সক্ষম হবেন যে এটি Window স্কোপে x ভেরিয়েবলে বরাদ্দ করা হয়েছিল।
ফাংশন দ্বারা মেমরি বরাদ্দ তদন্ত
জাভাস্ক্রিপ্ট ফাংশন দ্বারা মেমরি বরাদ্দ দেখতে মেমরি প্যানেলে বরাদ্দ স্যাম্পলিং প্রকারটি ব্যবহার করুন।
- বরাদ্দ স্যাম্পলিং রেডিও বোতামটি নির্বাচন করুন। যদি পৃষ্ঠায় কোনও কর্মী থাকে তবে আপনি স্টার্ট বোতামের পাশের ড্রপডাউন মেনু ব্যবহার করে প্রোফাইলিং লক্ষ্য হিসাবে এটি নির্বাচন করতে পারেন।
- স্টার্ট বোতাম টিপুন।
- আপনি যে পৃষ্ঠায় তদন্ত করতে চান সেটিতে ক্রিয়াগুলি সম্পাদন করুন।
- আপনি যখন আপনার সমস্ত ক্রিয়া শেষ করেছেন তখন স্টপ বোতামটি টিপুন।
ডিভটুলস আপনাকে ফাংশন দ্বারা মেমরি বরাদ্দের একটি ভাঙ্গন দেখায়। ডিফল্ট ভিউ ভারী (নীচে আপ) , যা শীর্ষে সর্বাধিক মেমরি বরাদ্দ করে এমন ফাংশনগুলি প্রদর্শন করে।
স্পট ঘন ঘন আবর্জনা সংগ্রহ
যদি আপনার পৃষ্ঠাটি ঘন ঘন বিরতি দেখা দেয় তবে আপনার আবর্জনা সংগ্রহের সমস্যা থাকতে পারে।
আপনি ঘন ঘন আবর্জনা সংগ্রহগুলি চিহ্নিত করতে ক্রোম টাস্ক ম্যানেজার বা টাইমলাইন মেমরি রেকর্ডিংগুলি ব্যবহার করতে পারেন। টাস্ক ম্যানেজারে, প্রায়শই উত্থিত এবং পতিত মেমরি বা জাভাস্ক্রিপ্ট মেমরি মানগুলি ঘন ঘন আবর্জনা সংগ্রহের প্রতিনিধিত্ব করে। টাইমলাইন রেকর্ডিংগুলিতে, প্রায়শই উত্থিত এবং পড়ন্ত জেএস হিপ বা নোড কাউন্ট গ্রাফগুলি ঘন ঘন আবর্জনা সংগ্রহগুলি নির্দেশ করে।
একবার আপনি সমস্যাটি চিহ্নিত করার পরে, আপনি কোথায় মেমরি বরাদ্দ করা হচ্ছে এবং কোন ফাংশনগুলি বরাদ্দের কারণ করছে তা জানতে আপনি বরাদ্দের সময়রেখার রেকর্ডিং ব্যবহার করতে পারেন।