measureUserAgentSpecificMemory() ব্যবহার করে আপনার ওয়েব পেজের মোট মেমরি ব্যবহার মনিটর করুন

রিগ্রেশন শনাক্ত করতে প্রোডাকশনে আপনার ওয়েব পেজের মেমরির ব্যবহার কীভাবে পরিমাপ করবেন তা জানুন।

Brendan Kenny

Ulan Degenbaev

ব্রাউজার অটোমেটিক ওয়েব পেজের মেমরি ম্যানেজ করে। কোনও ওয়েব পেজ অবজেক্ট তৈরি করলেই, ব্রাউজার অবজেক্ট স্টোর করার জন্য "আড়ালে" মেমরির একটি চাঙ্ক বরাদ্দ করে। মেমরি যেহেতু সীমিত রিসোর্স, তাই ব্রাউজার গার্বেজ কালেকশন পারফর্ম করে যাতে কোনও অবজেক্টের আর প্রয়োজন নেই তা শনাক্ত করা যায় এবং আন্ডারলাইং মেমরি চাঙ্ক ফ্রি করা যায়।

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

const object = {a: new Array(1000), b: new Array(2000)};
setInterval(() => console.log(object.a), 1000);

এখানে বড় অ্যারে b-এর আর প্রয়োজন নেই, কিন্তু ব্রাউজার এটি পুনরুদ্ধার করে না কারণ কলব্যাকে object.b-এর মাধ্যমে এটি এখনও অ্যাক্সেস করা যায়। তাই আরও বড় অ্যারের মেমরি লিক হয়ে যায়।

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

এই সমস্যার সমাধান করার প্রথম ধাপ হল এটি পরিমাপ করা। নতুন performance.measureUserAgentSpecificMemory() API ডেভেলপারদের প্রোডাকশনে তাদের ওয়েব পেজের মেমরির ব্যবহার পরিমাপ করতে দেয় এবং এইভাবে মেমরি লিক শনাক্ত করে যা লোকাল টেস্টিংয়ের মাধ্যমে এড়িয়ে যায়।

performance.measureUserAgentSpecificMemory() কীভাবে পুরনো performance.memory API থেকে আলাদা?

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

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

সাজেস্ট করা ব্যবহারের উদাহরণ

ওয়েব পেজের মেমরির ব্যবহার ইভেন্টের সময়, ব্যবহারকারীর অ্যাকশন ও গার্বেজ কালেকশনের উপর নির্ভর করে। সেই কারণেই মেমরি পরিমাপ API-এর উদ্দেশ্য হল প্রোডাকশন থেকে মেমরির ব্যবহার সংক্রান্ত ডেটা এগ্রিগেট করা। ব্যক্তিগত কলের ফলাফল কম উপযোগী। ব্যবহারের উদাহরণ:

• নতুন মেমরি লিক শনাক্ত করার জন্য ওয়েব পেজের নতুন ভার্সন রোল-আউট করার সময় রিগ্রেশন শনাক্তকরণ।
• মেমরির উপর প্রভাব মূল্যায়ন করতে এবং মেমরি লিক শনাক্ত করতে একটি নতুন ফিচারের A/B টেস্টিং।
• মেমরি লিক আছে কিনা তা যাচাই করতে সেশনের সময়সীমার সাথে মেমরির ব্যবহার সম্পর্কিত তথ্য।
• মেমরি ব্যবহারের সামগ্রিক প্রভাব বুঝতে ব্যবহারকারীর মেট্রিক্সের সাথে মেমরি ব্যবহারের সম্পর্ক স্থাপন করা।

মানানসই ব্রাউজার

বর্তমানে API শুধুমাত্র Chromium-ভিত্তিক ব্রাউজারে কাজ করে, Chrome 89 থেকে শুরু করে। API-এর ফলাফল মূলত প্রয়োগের উপর নির্ভর করে, কারণ ব্রাউজারের কাছে মেমরিতে অবজেক্ট দেখানোর এবং মেমরির ব্যবহার অনুমান করার বিভিন্ন উপায় আছে। সঠিক অ্যাকাউন্টিং খুব ব্যয়বহুল বা অসম্ভব হলে ব্রাউজারগুলি অ্যাকাউন্টিং থেকে কিছু মেমরি অঞ্চল বাদ দিতে পারে। তাই, বিভিন্ন ব্রাউজারে ফলাফল তুলনা করা যাবে না। একই ব্রাউজারের জন্য ফলাফল তুলনা করা অর্থপূর্ণ।

performance.measureUserAgentSpecificMemory() ব্যবহৃত হচ্ছে

ফিচার শনাক্তকরণ

performance.measureUserAgentSpecificMemory ফাংশনটি উপলভ্য হবে না অথবা SecurityError-এর কারণে কাজ নাও করতে পারে যদি এক্সিকিউশন এনভায়রনমেন্ট ক্রস-অরিজিন তথ্য ফাঁস হওয়া আটকানোর জন্য প্রয়োজনীয় নিরাপত্তা সংক্রান্ত শর্ত পূরণ না করে। এটি ক্রস-অরিজিন আইসোলেশন-এর উপর নির্ভর করে, যা COOP+COEP হেডার সেট করার মাধ্যমে কোনও ওয়েব পেজ অ্যাক্টিভেট করতে পারে।

রানটাইমে সাপোর্ট শনাক্ত করা যেতে পারে:

if (!window.crossOriginIsolated) {
  console.log('performance.measureUserAgentSpecificMemory() is only available in cross-origin-isolated pages');
} else if (!performance.measureUserAgentSpecificMemory) {
  console.log('performance.measureUserAgentSpecificMemory() is not available in this browser');
} else {
  let result;
  try {
    result = await performance.measureUserAgentSpecificMemory();
  } catch (error) {
    if (error instanceof DOMException && error.name === 'SecurityError') {
      console.log('The context is not secure.');
    } else {
      throw error;
    }
  }
  console.log(result);
}

লোকাল টেস্টিং

Chrome গার্বেজ কালেকশনের সময় মেমরি পরিমাপ করে, যার অর্থ হল API অবিলম্বে ফলাফল প্রমিস সমাধান করে না এবং এর পরিবর্তে পরবর্তী গার্বেজ কালেকশনের জন্য অপেক্ষা করে।

API কল করলে, কিছু টাইমআউটের পরে গার্বেজ কালেকশন করতে বাধ্য করা হয়, যা বর্তমানে ২০ সেকেন্ডে সেট করা আছে, তবে আরও তাড়াতাড়ি হতে পারে। --enable-blink-features='ForceEagerMeasureMemory' কমান্ড-লাইন ফ্ল্যাগ দিয়ে Chrome শুরু করলে টাইম-আউট কমে শূন্য হয়ে যায় এবং এটি লোকাল ডিবাগিং ও পরীক্ষার জন্য উপযোগী।

উদাহরণ

API-এর সাজেস্ট করা ব্যবহার হল একটি গ্লোবাল মেমরি মনিটরকে সংজ্ঞায়িত করা যা পুরো ওয়েব পেজের মেমরির ব্যবহার স্যাম্পেল করে এবং ফলাফলগুলি একটি সার্ভারে পাঠায় যাতে তা একত্রিত এবং বিশ্লেষণ করা যায়। সবচেয়ে সহজ উপায় হল, নির্দিষ্ট সময় অন্তর স্যাম্পেল নেওয়া, যেমন প্রতি M মিনিট অন্তর। তবে, এটি ডেটাতে পক্ষপাতিত্বের সূচনা করে কারণ স্যাম্পেলগুলির মধ্যে মেমরি পিক হতে পারে।

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে কীভাবে পয়সন প্রসেস ব্যবহার করে নিরপেক্ষ মেমরি পরিমাপ করা যায়, যা গ্যারেন্টি দেয় যে স্যাম্পেল যেকোনও সময়ে সমানভাবে ঘটতে পারে।

প্রথমে, এমন একটি ফাংশন নির্ধারণ করুন যা র‍্যান্ডমাইজড ইন্টারভ্যাল সহ setTimeout() ব্যবহার করে পরবর্তী মেমরি পরিমাপ শিডিউল করে।

function scheduleMeasurement() {
  // Check measurement API is available.
  if (!window.crossOriginIsolated) {
    console.log('performance.measureUserAgentSpecificMemory() is only available in cross-origin-isolated pages');
    console.log('See https://web.dev/coop-coep/ to learn more')
    return;
  }
  if (!performance.measureUserAgentSpecificMemory) {
    console.log('performance.measureUserAgentSpecificMemory() is not available in this browser');
    return;
  }
  const interval = measurementInterval();
  console.log(`Running next memory measurement in ${Math.round(interval / 1000)} seconds`);
  setTimeout(performMeasurement, interval);
}

measurementInterval() ফাংশন মিলিসেকেন্ডে একটি র‍্যান্ডম ইন্টারভাল গণনা করে যাতে গড়ে প্রতি পাঁচ মিনিটে একটি পরিমাপ হয়। ফাংশনের পিছনে থাকা গণিত সম্পর্কে জানতে আগ্রহী হলে এক্সপোনেনশিয়াল ডিস্ট্রিবিউশন দেখুন।

function measurementInterval() {
  const MEAN_INTERVAL_IN_MS = 5 * 60 * 1000;
  return -Math.log(Math.random()) * MEAN_INTERVAL_IN_MS;
}

শেষে, async performMeasurement() ফাংশন API-কে কল করে, ফলাফল রেকর্ড করে এবং পরবর্তী পরিমাপের শিডিউল করে।

async function performMeasurement() {
  // 1. Invoke performance.measureUserAgentSpecificMemory().
  let result;
  try {
    result = await performance.measureUserAgentSpecificMemory();
  } catch (error) {
    if (error instanceof DOMException && error.name === 'SecurityError') {
      console.log('The context is not secure.');
      return;
    }
    // Rethrow other errors.
    throw error;
  }
  // 2. Record the result.
  console.log('Memory usage:', result);
  // 3. Schedule the next measurement.
  scheduleMeasurement();
}

অবশেষে, পরিমাপ করা শুরু করুন।

// Start measurements.
scheduleMeasurement();

ফলাফলটি নিম্নলিখিতভাবে দেখানো হতে পারে:

// Console output:
{
  bytes: 60_100_000,
  breakdown: [
    {
      bytes: 40_000_000,
      attribution: [{
        url: 'https://example.com/',
        scope: 'Window',
      }],
      types: ['JavaScript']
    },

    {
      bytes: 20_000_000,
      attribution: [{
          url: 'https://example.com/iframe',
          container: {
            id: 'iframe-id-attribute',
            src: '/iframe',
          },
          scope: 'Window',
      }],
      types: ['JavaScript']
    },

    {
      bytes: 100_000,
      attribution: [],
      types: ['DOM']
    },
  ],
}

bytes ফিল্ডে মেমরির মোট ব্যবহারের আনুমানিক হিসেব দেখানো হয়। এই ভ্যালু প্রয়োগের উপর অত্যন্ত নির্ভরশীল এবং বিভিন্ন ব্রাউজারের মধ্যে তুলনা করা যায় না। এমনকি একই ব্রাউজারের বিভিন্ন ভার্সনের মধ্যেও এটি পরিবর্তিত হতে পারে। এই ভ্যালুতে বর্তমান প্রসেসে সব iframe, সম্পর্কিত উইন্ডো ও ওয়েব ওয়ার্কারের JavaScript ও DOM মেমরি অন্তর্ভুক্ত থাকে।

breakdown তালিকা থেকে ব্যবহৃত মেমরি সম্পর্কে আরও তথ্য পাওয়া যায়। প্রতিটি এন্ট্রি মেমরির কিছু অংশ বর্ণনা করে এবং URL দ্বারা শনাক্ত করা উইন্ডো, iframe এবং ওয়ার্কারের সেটে এটি অ্যাট্রিবিউট করে। types ফিল্ডে মেমরির সাথে যুক্ত ইমপ্লিমেন্টেশন-নির্দিষ্ট মেমরির ধরন তালিকাভুক্ত করা থাকে।

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

মতামত

ওয়েব পারফর্ম্যান্স কমিউনিটি গ্রুপ এবং Chrome টিম performance.measureUserAgentSpecificMemory() সম্পর্কে আপনার মতামত ও অভিজ্ঞতা জানতে আগ্রহী।

API ডিজাইন সম্পর্কে আমাদের জানান

API-এর এমন কিছু আছে কি যা প্রত্যাশা অনুযায়ী কাজ করে না? অথবা আপনার আইডিয়া প্রয়োগ করার জন্য প্রয়োজনীয় কোনও প্রপার্টি কি নেই? performance.measureUserAgentSpecificMemory() GitHub রেপো-তে স্পেক সংক্রান্ত সমস্যা ফাইল করুন অথবা বর্তমান সমস্যা সম্পর্কে আপনার মতামত জানান।

প্রয়োগ সংক্রান্ত সমস্যা সম্পর্কে অভিযোগ জানানো

Chrome-এর প্রয়োগে আপনি কি কোনও সমস্যা খুঁজে পেয়েছেন? নাকি স্পেসিফিকেশন থেকে ইমপ্লিমেন্টেশন আলাদা? new.crbug.com-এ গিয়ে সমস্যার বিষয়ে অভিযোগ জানান। যতটা সম্ভব বিস্তারিতভাবে বর্ণনা করুন, সমস্যাটি আবার তৈরি করার জন্য সহজ নির্দেশাবলী প্রদান করুন এবং কম্পোনেন্ট Blink>PerformanceAPIs-এ সেট করুন।

সমর্থন দেখান

আপনি কি performance.measureUserAgentSpecificMemory() ব্যবহার করার পরিকল্পনা করছেন? আপনার সর্বজনীন সহায়তা Chrome টিমকে ফিচারগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার ভেন্ডরদের দেখায় যে সেগুলিকে সমর্থন করা কতটা গুরুত্বপূর্ণ। @ChromiumDev-এ টুইট করে আমাদের জানান যে আপনি এটি কোথায় এবং কীভাবে ব্যবহার করছেন।

সহায়ক লিঙ্ক

• ব্যাখ্যাকারী
• বাগ ট্র্যাক করা
• ChromeStatus.com এন্ট্রি
• Origin Trial API-এর পর থেকে হওয়া পরিবর্তন
• সমাপ্ত হওয়া অরিজিন ট্রায়াল

স্বীকৃতি

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