Gmail-এর স্কেলে মেমরি কার্যকরভাবে ম্যানেজ করা

Loreena Lee
Loreena Lee

ভূমিকা

যদিও জাভাস্ক্রিপ্ট অটোমেটিক মেমোরি ম্যানেজমেন্টের জন্য গার্বেজ কালেকশন ব্যবহার করে, এটি অ্যাপ্লিকেশনে কার্যকর মেমোরি ম্যানেজমেন্টের বিকল্প নয়। নেটিভ অ্যাপ্লিকেশনের মতো JavaScript অ্যাপ্লিকেশনেও মেমরি সংক্রান্ত একই ধরনের সমস্যা দেখা যায়, যেমন মেমরি লিক ও ব্লট, তবে এর পাশাপাশি গার্বেজ কালেকশন পজ সংক্রান্ত সমস্যাও এতে দেখা যায়। Gmail-এর মতো বড় আকারের অ্যাপ্লিকেশনগুলি আপনার ছোট অ্যাপ্লিকেশনগুলির মতোই সমস্যার সম্মুখীন হয়। Gmail টিম কীভাবে Chrome DevTools ব্যবহার করে মেমরি সংক্রান্ত সমস্যা শনাক্ত, আলাদা ও সমাধান করেছে তা জানতে পড়ুন।

Google I/O 2013 সেশন

আমরা Google I/O 2013-এ এই মেটেরিয়াল উপস্থাপন করেছি। নিচের ভিডিওটি দেখুন:

Gmail, আমাদের সমস্যা হয়েছে…

Gmail টিম একটি গুরুতর সমস্যার সম্মুখীন হয়েছিল। সীমিত রিসোর্স সহ ল্যাপটপ এবং ডেস্কটপে Gmail ট্যাবগুলি একাধিক গিগাবাইট মেমরি ব্যবহার করার উপাখ্যানগুলি ক্রমবর্ধমানভাবে শোনা যাচ্ছিল, প্রায়শই পুরো ব্রাউজারটি বন্ধ করে দেওয়ার সিদ্ধান্ত নেওয়া হয়েছিল। CPU ১০০% পিন করা, অ্যাপ কাজ না করা এবং Chrome-এর স্যাড ট্যাব ("সে মারা গেছে, জিম") সংক্রান্ত গল্প। টিম বুঝতে পারছিল না যে কীভাবে সমস্যাটি সমাধান করা তো দূরের কথা, এমনকি কীভাবে সমস্যাটি নির্ণয় করা শুরু করা যায়। সমস্যাটি কতটা ব্যাপক ছিল সে সম্পর্কে তাদের কোনও ধারণা ছিল না এবং উপলভ্য টুলগুলি বড় অ্যাপ্লিকেশনে স্কেল আপ করা যায়নি। টিমটি Chrome টিমের সাথে যোগ দেয় এবং একসাথে তারা মেমরি সংক্রান্ত সমস্যাগুলি ট্রাইজ করার জন্য নতুন কৌশল তৈরি করে, বিদ্যমান টুলগুলিকে উন্নত করে এবং ফিল্ড থেকে মেমরি ডেটা সংগ্রহ করার সুবিধা চালু করে। তবে, টুলগুলি সম্পর্কে জানার আগে, জাভাস্ক্রিপ্ট মেমোরি ম্যানেজমেন্টের প্রাথমিক বিষয়গুলি জেনে নেওয়া যাক।

মেমোরি ম্যানেজমেন্টের প্রাথমিক তথ্য

JavaScript-এ মেমরি কার্যকরভাবে ম্যানেজ করার আগে আপনাকে অবশ্যই মৌলিক বিষয়গুলি বুঝতে হবে। এই বিভাগে প্রিমিটিভ টাইপ, অবজেক্ট গ্রাফ এবং সাধারণভাবে মেমরি ব্লট ও JavaScript-এ মেমরি লিকের সংজ্ঞা দেওয়া হবে। JavaScript-এ মেমোরিকে গ্রাফ হিসেবে কল্পনা করা যেতে পারে এবং এই কারণে গ্রাফ থিওরি JavaScript মেমোরি ম্যানেজমেন্ট এবং হিপ প্রোফাইলার-এ ভূমিকা পালন করে।

প্রিমিটিভ টাইপ

জাভাস্ক্রিপ্টে তিন ধরনের প্রিমিটিভ টাইপ আছে:

  1. সংখ্যা (যেমন, ৪, ৩.১৪১৫৯)
  2. বুলিয়ান (সত্য বা মিথ্যা)
  3. স্ট্রিং ("Hello World")

এই প্রিমিটিভ টাইপ অন্য কোনও ভ্যালুকে রেফারেন্স করতে পারে না। অবজেক্ট গ্রাফে এই ভ্যালুগুলি সবসময় লিফ বা টার্মিনেটিং নোড হয়, অর্থাৎ এগুলির কোনও আউটগোয়িং এজ থাকে না।

শুধু এক ধরনের কন্টেনার আছে: অবজেক্ট। জাভাস্ক্রিপ্টে অবজেক্ট হল একটি অ্যাসোসিয়েটিভ অ্যারে। একটি নন-এম্পটি অবজেক্ট হল একটি ইনার নোড যার আউটগোয়িং এজ অন্যান্য ভ্যালুর (নোড) সাথে কানেক্টেড।

অ্যারে সম্পর্কে কী বলা যায়?

জাভাস্ক্রিপ্টে অ্যারে আসলে একটি অবজেক্ট যার নিউমেরিক কী আছে। এটি একটি সরলীকরণ, কারণ জাভাস্ক্রিপ্ট রানটাইম অ্যারের মতো অবজেক্টকে অপ্টিমাইজ করবে এবং সেগুলিকে অ্যারে হিসেবে উপস্থাপন করবে।

পরিভাষা

  1. ভ্যালু - প্রিমিটিভ টাইপ, অবজেক্ট, অ্যারে ইত্যাদির ইনস্ট্যান্স।
  2. ভেরিয়েবেল - একটি নাম যা কোনও ভ্যালুকে রেফার করে।
  3. প্রপার্টি - অবজেক্টের মধ্যে থাকা নাম যা কোনও ভ্যালুকে রেফারেন্স করে।

অবজেক্ট গ্রাফ

জাভাস্ক্রিপ্টের সব ভ্যালু অবজেক্ট গ্রাফের অংশ। গ্রাফটি রুট দিয়ে শুরু হয়, যেমন, উইন্ডো অবজেক্ট। GC রুটের লাইফটাইম ম্যানেজ করা আপনার নিয়ন্ত্রণে নেই, কারণ সেগুলি ব্রাউজার তৈরি করে এবং পৃষ্ঠা আনলোড করা হলে ধ্বংস হয়ে যায়। গ্লোবাল ভেরিয়েবেল আসলে উইন্ডোর প্রপার্টি।

অবজেক্ট গ্রাফ

কোনও ভ্যালু কখন গার্বেজ হয়ে যায়?

কোনও ভ্যালু গার্বেজ হয়ে যায় যখন রুট থেকে ভ্যালু পর্যন্ত কোনও পাথ থাকে না। অন্যভাবে বলতে গেলে, রুট থেকে শুরু করে স্ট্যাক ফ্রেমে জীবিত সব অবজেক্ট প্রপার্টি ও ভেরিয়েবেল পুঙ্খানুপুঙ্খভাবে সার্চ করার পরেও কোনও ভ্যালু পাওয়া না গেলে, সেটি গার্বেজ হয়ে গেছে।

আবর্জনা গ্রাফ

জাভাস্ক্রিপ্টে মেমরি লিক বলতে কী বোঝায়?

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

email.message = document.createElement("div");
displayList.appendChild(email.message);

এবং পরে, আপনি ডিসপ্লে তালিকা থেকে এলিমেন্টটি সরিয়ে দেন:

displayList.removeAllChildren();

যতক্ষণ email থাকবে, ততক্ষণ মেসেজের মাধ্যমে রেফারেন্স করা DOM এলিমেন্ট সরানো হবে না, যদিও এটি এখন পৃষ্ঠার DOM ট্রি থেকে আলাদা করা হয়েছে।

ব্লট কী?

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

গার্বেজ কালেকশন কী?

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

V8 গার্বেজ কালেক্টর সম্পর্কে বিস্তারিত তথ্য

গার্বেজ কালেকশন কীভাবে হয় তা আরও ভালোভাবে বুঝতে, আসুন V8 গার্বেজ কালেক্টর সম্পর্কে বিস্তারিতভাবে জেনে নিই। V8 একটি জেনারেশনাল কালেক্টর ব্যবহার করে। স্মৃতিকে দুটি প্রজন্মে ভাগ করা হয়েছে: তরুণ এবং বৃদ্ধ। Allocation and collection within the young generation is fast and frequent. পুরনো জেনারেশনের মধ্যে অ্যালোকেশন ও কালেকশন ধীর গতিতে ও কম ঘন ঘন হয়।

জেনারেশনাল কালেক্টর

V8-এ দুই জেনারেশন কালেক্টর ব্যবহার করা হয়। কোনও ভ্যালুর বয়স বলতে বোঝায়, সেটি বরাদ্দ করার পর থেকে বরাদ্দ করা বাইটের সংখ্যা। ব্যবহারিক ক্ষেত্রে, কোনও ভ্যালু কত পুরনো তা সাধারণত কতগুলি নতুন জেনারেশন কালেকশনে সেটি টিকে রয়েছে তার সংখ্যা দ্বারা অনুমান করা হয়। কোনও ভ্যালু যথেষ্ট পুরনো হয়ে গেলে, সেটি পুরনো জেনারেশনে টেনিউর করা হয়।

বাস্তবে, নতুন বরাদ্দ করা ভ্যালু বেশিক্ষণ থাকে না। Smalltalk প্রোগ্রামের একটি সমীক্ষায় দেখা গেছে যে, ইয়াং জেনারেশন কালেকশনের পরে মাত্র ৭% ভ্যালু টিকে থাকে। রানটাইম জুড়ে একই ধরনের স্টাডিতে দেখা গেছে যে, গড়ে ৯০% থেকে ৭০% নতুন বরাদ্দ করা ভ্যালু পুরনো জেনারেশনে কখনও টেনিউর করা হয় না।

তরুণ প্রজন্ম

V8-এ ইয়াং জেনারেশন হিপ দুটি স্পেসে বিভক্ত, যেগুলির নাম from এবং to। মেমরি স্পেস থেকে বরাদ্দ করা হয়। অ্যালোকেট করা খুব দ্রুত হয়, যতক্ষণ না, টু স্পেস সম্পূর্ণ হয়, যে পয়েন্টে একটি ইয়াং জেনারেশন কালেকশন ট্রিগার হয়। ইয়াং জেনারেশন কালেকশন প্রথমে সোর্স ও ডেস্টিনেশন স্পেস অদলবদল করে, পুরনো ডেস্টিনেশন স্পেস (এখন সোর্স স্পেস) স্ক্যান করা হয় এবং সব লাইভ ভ্যালু ডেস্টিনেশন স্পেসে কপি করা হয় বা পুরনো জেনারেশনে টেনিউর করা হয়। একটি সাধারণ ইয়াং জেনারেশন কালেকশন ১০ মিলিসেকেন্ড (ms) সময় নেবে।

স্বাভাবিকভাবেই, আপনার বোঝা উচিত যে আপনার অ্যাপ্লিকেশন প্রতিটি বরাদ্দ করার সাথে সাথে আপনি স্পেস শেষ করার এবং GC পজ হওয়ার কাছাকাছি চলে আসেন। গেম ডেভেলপাররা মনে রাখবেন: ১৬ মিলি সেকেন্ড ফ্রেম টাইম (প্রতি সেকেন্ডে ৬০ ফ্রেমের জন্য প্রয়োজনীয়) নিশ্চিত করতে, আপনার অ্যাপ্লিকেশনকে অবশ্যই শূন্য অ্যালোকেশন করতে হবে, কারণ একটি সিঙ্গেল ইয়াং জেনারেশন কালেকশন ফ্রেম টাইমের বেশিরভাগ অংশ ব্যবহার করবে।

ইয়াং জেনারেশন হিপ

পুরনো প্রজন্ম

V8-এ পুরনো জেনারেশন হিপ, সংগ্রহের জন্য মার্ক-কম্প্যাক্ট অ্যালগরিদম ব্যবহার করে। কোনও ভ্যালু যখন নতুন জেনারেশন থেকে পুরনো জেনারেশনে স্থানান্তরিত হয় তখন পুরনো জেনারেশন অ্যালোকেশন হয়। যখনই পুরনো প্রজন্মের কালেকশন হয়, তখনই নতুন প্রজন্মের কালেকশনও করা হয়। আপনার অ্যাপ্লিকেশন কয়েক সেকেন্ডের জন্য পজ করা হবে। বাস্তবে এটি গ্রহণযোগ্য কারণ পুরনো জেনারেশন কালেকশন খুব কমই হয়।

V8 GC সারাংশ

গার্বেজ কালেকশন সহ অটোমেটিক মেমোরি ম্যানেজমেন্ট ডেভেলপারদের প্রোডাক্টিভিটির জন্য দারুণ, তবে প্রতিবার আপনি কোনও ভ্যালু বরাদ্দ করলে, আপনি গার্বেজ কালেকশন পজের আরও কাছাকাছি চলে যান। গার্বেজ কালেকশন পজ করা হলে, জ্যাঙ্ক চালু করার মাধ্যমে আপনার অ্যাপ্লিকেশনের অনুভূতি নষ্ট করতে পারে। জাভাস্ক্রিপ্ট কীভাবে মেমরি ম্যানেজ করে তা এখন আপনি বুঝতে পেরেছেন, তাই আপনার অ্যাপ্লিকেশনের জন্য সঠিক সিদ্ধান্ত নিতে পারবেন।

Gmail সংক্রান্ত সমস্যার সমাধান করা

গত এক বছরে, Chrome DevTools-এ অসংখ্য ফিচার ও ত্রুটি সমাধান করা হয়েছে, যার ফলে এটি আগের চেয়ে অনেক বেশি শক্তিশালী হয়ে উঠেছে। এছাড়াও, ব্রাউজার নিজেই performance.memory API-তে একটি গুরুত্বপূর্ণ পরিবর্তন করেছে যার ফলে Gmail এবং অন্য যেকোনও অ্যাপ্লিকেশনের পক্ষে ফিল্ড থেকে মেমরি পরিসংখ্যান সংগ্রহ করা সম্ভব হয়েছে। এইসব দুর্দান্ত টুল ব্যবহার করে, একসময় যা অসম্ভব কাজ বলে মনে হয়েছিল, তা শীঘ্রই অপরাধীদের ট্র্যাক করার একটি উত্তেজনাপূর্ণ খেলায় পরিণত হয়।

টুল ও টেকনিক

ফিল্ড ডেটা এবং performance.memory API

Chrome 22 থেকে, performance.memory API ডিফল্ট হিসেবে চালু করা আছে। Gmail-এর মতো দীর্ঘ সময় ধরে চলা অ্যাপ্লিকেশনের ক্ষেত্রে, প্রকৃত ব্যবহারকারীদের থেকে পাওয়া ডেটা অমূল্য। এই তথ্য আমাদের পাওয়ার ইউজারদের-- যারা Gmail-এ দিনে ৮-১৬ ঘণ্টা কাটান, দিনে শত শত মেসেজ পান-- তাদের থেকে আরও গড় ব্যবহারকারীদের মধ্যে পার্থক্য করতে দেয় যারা Gmail-এ দিনে কয়েক মিনিট কাটান, সপ্তাহে এক ডজন বা তার বেশি মেসেজ পান।

এই API তিনটি ডেটা ফেরত পাঠায়:

  1. jsHeapSizeLimit - JavaScript হিপের জন্য মেমরির পরিমাণ (বাইটে) সীমিত।
  2. totalJSHeapSize - জাভাস্ক্রিপ্ট হিপ খালি জায়গা সহ যে পরিমাণ মেমরি (বাইটে) বরাদ্দ করেছে।
  3. usedJSHeapSize - বর্তমানে ব্যবহৃত মেমরির পরিমাণ (বাইটে)।

একটি বিষয় মনে রাখবেন যে API সম্পূর্ণ Chrome প্রসেসের জন্য মেমরি ভ্যালু ফিরিয়ে দেয়। যদিও এটি ডিফল্ট মোড নয়, তবে নির্দিষ্ট কিছু পরিস্থিতিতে, Chrome একই রেন্ডারার প্রসেসে একাধিক ট্যাব খুলতে পারে। এর অর্থ হল, performance.memory-এর মাধ্যমে দেখানো ভ্যালুতে আপনার অ্যাপ সহ অন্যান্য ব্রাউজার ট্যাবের মেমরি ফুটপ্রিন্ট থাকতে পারে।

স্কেলে মেমরি পরিমাপ করা

Gmail তাদের JavaScript-কে performance.memory API ব্যবহার করার জন্য ইনস্ট্রুমেন্ট করেছে যাতে প্রতি ৩০ মিনিটে একবার মেমরি সংক্রান্ত তথ্য সংগ্রহ করা যায়। অনেক Gmail ব্যবহারকারী একটানা কয়েকদিন অ্যাপটি চালু রাখেন, তাই টিম সময়ের সাথে সাথে মেমরি বৃদ্ধি এবং সামগ্রিক মেমরি ফুটপ্রিন্ট পরিসংখ্যান ট্র্যাক করতে পেরেছে। ব্যবহারকারীদের র‍্যান্ডম স্যাম্পেল থেকে মেমরি সংক্রান্ত তথ্য সংগ্রহ করার জন্য Gmail-এ ইনস্ট্রুমেন্টেশন করার কয়েক দিনের মধ্যেই, টিম বুঝতে পেরেছিল যে সাধারণ ব্যবহারকারীদের মধ্যে মেমরি সংক্রান্ত সমস্যা কতটা ছড়িয়ে পড়েছে। তারা একটি বেসলাইন সেট করে এবং মেমরি খরচ কমানোর লক্ষ্যের দিকে অগ্রগতি ট্র্যাক করতে ইনকামিং ডেটার স্ট্রিম ব্যবহার করে। শেষ পর্যন্ত এই ডেটা মেমরি রিগ্রেশন ধরার জন্যও ব্যবহার করা হবে।

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

স্কেলে মেমরি পরিমাপ করা

DevTools টাইমলাইনের মাধ্যমে মেমরি সংক্রান্ত সমস্যা শনাক্ত করা

পারফর্ম্যান্স সংক্রান্ত যেকোনও সমস্যার সমাধান করার প্রথম ধাপ হল, সমস্যাটি যে সত্যিই আছে তা প্রমাণ করা, একটি রিপ্রোডিউসিবল টেস্ট তৈরি করা এবং সমস্যাটির একটি বেসলাইন পরিমাপ করা। রিপ্রোডিউস করা যায় এমন প্রোগ্রাম ছাড়া, আপনি নির্ভরযোগ্যভাবে সমস্যাটি পরিমাপ করতে পারবেন না। বেসলাইন পরিমাপ না থাকলে, আপনি কতটা পারফর্ম্যান্স উন্নত করেছেন তা জানতে পারবেন না।

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

কোনও সমস্যা আছে কিনা তা প্রমাণ করা

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

করাতের দাঁতের মতো গ্রাফ

সমস্যাটি যে আছে তা কনফার্ম করার পরে, DevTools হিপ প্রোফাইলার থেকে সমস্যার সোর্স শনাক্ত করার ব্যাপারে আপনি সাহায্য পেতে পারেন।

DevTools হিপ প্রোফাইলারের সাহায্যে মেমরি লিক খুঁজে বের করা

প্রোফাইলার প্যানেল CPU প্রোফাইলার ও হিপ প্রোফাইলার, দুটিই প্রদান করে। অবজেক্ট গ্রাফের স্ন্যাপশট নেওয়ার মাধ্যমে হিপ প্রোফাইলিং কাজ করে। স্ন্যাপশট নেওয়ার আগে, নতুন ও পুরনো জেনারেশন, দুই ধরনের গার্বেজই সংগ্রহ করা হয়। অন্যভাবে বলতে গেলে, স্ন্যাপশট নেওয়ার সময় যে ভ্যালুগুলি অ্যাক্টিভ ছিল, আপনি শুধু সেগুলিই দেখতে পাবেন।

হিপ প্রোফাইলারে অনেক বেশি কার্যকারিতা আছে যা এই নিবন্ধে পর্যাপ্তভাবে কভার করা সম্ভব নয়, তবে Chrome ডেভেলপার সাইটে বিস্তারিত ডকুমেন্টেশন পাওয়া যাবে। আমরা এখানে হিপ অ্যালোকেশন প্রোফাইলারের উপর ফোকাস করব।

হিপ অ্যালোকেশন প্রোফাইলার ব্যবহার করা

হিপ অ্যালোকেশন প্রোফাইলার, হিপ প্রোফাইলারের বিস্তারিত স্ন্যাপশট তথ্যকে টাইমলাইন প্যানেলের ইনক্রিমেন্টাল আপডেট ও ট্র্যাকিংয়ের সাথে একত্রিত করে। প্রোফাইল প্যানেল খুলুন, হিপ অ্যালোকেশন রেকর্ড করুন প্রোফাইল শুরু করুন, একের পর এক অ্যাকশন পারফর্ম করুন, তারপর বিশ্লেষণের জন্য রেকর্ডিং বন্ধ করুন। অ্যালোকেশন প্রোফাইলার রেকর্ডিং চলাকালীন পর্যায়ক্রমে হিপ স্ন্যাপশট নেয় (প্রতি ৫০ মিলি সেকেন্ডে!) এবং রেকর্ডিংয়ের শেষে একটি চূড়ান্ত স্ন্যাপশট নেয়।

হিপ অ্যালোকেশন প্রোফাইলার

হিপে নতুন অবজেক্ট পাওয়া গেলে উপরের বার তা নির্দেশ করে। প্রতিটি বারের উচ্চতা সম্প্রতি বরাদ্দ করা অবজেক্টের সাইজের সাথে সামঞ্জস্যপূর্ণ এবং বারের রঙ থেকে বোঝা যায় যে সেই অবজেক্টগুলি এখনও ফাইনাল হিপ স্ন্যাপশটে লাইভ আছে কিনা: নীল বার থেকে বোঝা যায় যে অবজেক্টগুলি এখনও টাইমলাইনের শেষে লাইভ আছে, ধূসর বার থেকে বোঝা যায় যে অবজেক্টগুলি টাইমলাইন চলাকালীন বরাদ্দ করা হয়েছিল, কিন্তু তারপর থেকে সেগুলি গার্বেজ হিসেবে সংগ্রহ করা হয়েছে।

উপরের উদাহরণে, একটি অ্যাকশন ১০ বার পারফর্ম করা হয়েছে। স্যাম্পেল প্রোগ্রাম পাঁচটি অবজেক্ট ক্যাশে করে, তাই শেষ পাঁচটি নীল বার প্রত্যাশিত। তবে, সবচেয়ে বাঁদিকের নীল বারটি সম্ভাব্য সমস্যার ইঙ্গিত দেয়। তারপর, আপনি উপরের টাইমলাইনে স্লাইডার ব্যবহার করে সেই নির্দিষ্ট স্ন্যাপশট জুম-ইন করতে এবং সেই পয়েন্টে সম্প্রতি বরাদ্দ করা অবজেক্ট দেখতে পারবেন। হিপের মধ্যে নির্দিষ্ট কোনও অবজেক্টে ক্লিক করলে, হিপ স্ন্যাপশটের নিচের অংশে সেটির রিটেনিং ট্রি দেখা যাবে। অবজেক্টের রিটেনিং পাথ পরীক্ষা করলে আপনি বুঝতে পারবেন যে কেন অবজেক্টটি সংগ্রহ করা হয়নি এবং অপ্রয়োজনীয় রেফারেন্স সরানোর জন্য আপনি প্রয়োজনীয় কোড পরিবর্তন করতে পারবেন।

Gmail-এর মেমরি সংক্রান্ত সমস্যার সমাধান করা

উপরে আলোচনা করা টুল ও টেকনিক ব্যবহার করে, Gmail টিম কয়েকটি বিভাগের সমস্যা শনাক্ত করতে পেরেছে: আনবাউন্ডেড ক্যাশে, কলব্যাকের অসীমভাবে ক্রমবর্ধমান অ্যারে যা এমন কিছু ঘটার জন্য অপেক্ষা করছে যা আসলে কখনও ঘটে না এবং ইভেন্ট লিসেনার অনিচ্ছাকৃতভাবে তাদের টার্গেট ধরে রাখে। এইসব সমস্যার সমাধান করার ফলে, Gmail-এর সামগ্রিক মেমরির ব্যবহার নাটকীয়ভাবে কমে গেছে। ৯৯% ব্যবহারকারী আগের চেয়ে ৮০% কম মেমরি ব্যবহার করেছেন এবং মধ্যবর্তী ব্যবহারকারীদের মেমরি ব্যবহার প্রায় ৫০% কমে গেছে।

Gmail-এর মেমরি ব্যবহার

Gmail কম মেমরি ব্যবহার করার কারণে GC পজ লেটেন্সি কমে গেছে, যার ফলে ব্যবহারকারীর সামগ্রিক অভিজ্ঞতা আরও ভালো হয়েছে।

এছাড়াও, Gmail টিম মেমরির ব্যবহার সংক্রান্ত পরিসংখ্যান সংগ্রহ করার সময় Chrome-এর মধ্যে গার্বেজ কালেকশন রিগ্রেশন খুঁজে পেয়েছে। বিশেষ করে, Gmail-এর মেমরি ডেটা যখন মোট বরাদ্দ মেমরি এবং লাইভ মেমরির মধ্যে ব্যবধানে নাটকীয় বৃদ্ধি দেখাতে শুরু করে তখন দুটি ফ্র্যাগমেন্টেশন বাগ আবিষ্কৃত হয়।

কল টু অ্যাকশন

নিজেকে এই প্রশ্নগুলি করুন:

  1. আমার অ্যাপ কতটা মেমরি ব্যবহার করছে? এটি সম্ভব যে আপনি খুব বেশি মেমরি ব্যবহার করছেন যা জনপ্রিয় বিশ্বাসের বিপরীতে সামগ্রিক অ্যাপ্লিকেশন পারফর্ম্যান্সে নেট নেতিবাচক প্রভাব ফেলে। সঠিক সংখ্যাটি ঠিক কী তা জানা কঠিন, তবে আপনার পৃষ্ঠাটি ব্যবহার করছে এমন কোনও অতিরিক্ত ক্যাশিংয়ের পারফর্ম্যান্সের উপর পরিমাপযোগ্য প্রভাব আছে কিনা তা যাচাই করতে ভুলবেন না।
  2. আমার পৃষ্ঠা কি লিক ফ্রি? আপনার পৃষ্ঠায় মেমরি লিক হলে, তা শুধু আপনার পৃষ্ঠার পারফর্ম্যান্সকেই প্রভাবিত করবে না, অন্যান্য ট্যাবকেও প্রভাবিত করবে। কোনও লিক আরও ভালভাবে বুঝতে অবজেক্ট ট্র্যাকার ব্যবহার করুন।
  3. আমার পৃষ্ঠা কত ঘন ঘন GCing করছে? আপনি Chrome ডেভেলপার টুল-এর টাইমলাইন প্যানেল ব্যবহার করে যেকোনও GC পজ দেখতে পারবেন। আপনার পৃষ্ঠা ঘন ঘন GCing হলে, সম্ভাবনা আছে যে আপনি খুব ঘন ঘন বরাদ্দ করছেন, আপনার তরুণ প্রজন্মের মেমরির মাধ্যমে মন্থন করছেন।

উপসংহার

আমরা সঙ্কটের মধ্যে শুরু করেছি। JavaScript এবং বিশেষ করে V8-এ মেমোরি ম্যানেজমেন্টের মূল বিষয়গুলি কভার করা হয়েছে। আপনি Chrome-এর লেটেস্ট বিল্ডে উপলভ্য নতুন অবজেক্ট ট্র্যাকার ফিচার সহ টুলগুলি কীভাবে ব্যবহার করতে হয় তা শিখেছেন। Gmail টিম এই তথ্য ব্যবহার করে মেমরির ব্যবহার সংক্রান্ত সমস্যার সমাধান করেছে এবং পারফর্ম্যান্সের উন্নতি লক্ষ্য করেছে। আপনি নিজের ওয়েব অ্যাপের ক্ষেত্রেও একই কাজ করতে পারবেন!