এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

মাপ ইউজারএজেন্টস্পেসিফিকমেমোরি() দিয়ে আপনার ওয়েব পৃষ্ঠার মোট মেমরি ব্যবহার নিরীক্ষণ করুন

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

Brendan Kenny

Ulan Degenbaev

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

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

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

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

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

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

`performance.measureUserAgentSpecificMemory()` এবং পুরোনো `performance.memory` API-এর মধ্যে পার্থক্য কী?

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

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

প্রস্তাবিত ব্যবহারের ক্ষেত্রসমূহ

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

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

ব্রাউজার সামঞ্জস্যতা

Browser Support

Source

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

`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);
}

স্থানীয় পরীক্ষা

ক্রোম গার্বেজ কালেকশনের সময় মেমরি পরিমাপ করে, যার মানে হলো এপিআইটি রেজাল্ট প্রমিসটি সঙ্গে সঙ্গে রিজলভ করে না, বরং পরবর্তী গার্বেজ কালেকশনের জন্য অপেক্ষা করে।

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

উদাহরণ

এপিআই-এর প্রস্তাবিত ব্যবহার হলো একটি গ্লোবাল মেমরি মনিটর সংজ্ঞায়িত করা, যা পুরো ওয়েব পেজের মেমরি ব্যবহারের নমুনা সংগ্রহ করে এবং ফলাফলগুলো একত্রীকরণ ও বিশ্লেষণের জন্য একটি সার্ভারে পাঠায়। সবচেয়ে সহজ উপায় হলো নির্দিষ্ট সময় পর পর নমুনা সংগ্রহ করা, যেমন প্রতি 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() ফাংশনটি মিলিসেকেন্ডে একটি র‍্যান্ডম ব্যবধান গণনা করে, যাতে গড়ে প্রতি পাঁচ মিনিটে একটি পরিমাপ থাকে। আপনি যদি এই ফাংশনের পেছনের গণিত সম্পর্কে আগ্রহী হন, তবে `Exponential distribution` দেখুন।

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

অবশেষে, অ্যাসিঙ্ক performMeasurement() ফাংশনটি এপিআই-কে কল করে, ফলাফল রেকর্ড করে এবং পরবর্তী পরিমাপের সময়সূচী নির্ধারণ করে।

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 ফিল্ডে দেখানো হয়। এই মানটি মূলত ইমপ্লিমেন্টেশনের উপর নির্ভরশীল এবং বিভিন্ন ব্রাউজারের মধ্যে এর তুলনা করা যায় না। এমনকি একই ব্রাউজারের বিভিন্ন সংস্করণের মধ্যেও এটি পরিবর্তিত হতে পারে। এই মানের মধ্যে বর্তমান প্রসেসের সমস্ত আইফ্রেম, সংশ্লিষ্ট উইন্ডো এবং ওয়েব ওয়ার্কারের জাভাস্ক্রিপ্ট ও ডম (DOM) মেমরি অন্তর্ভুক্ত থাকে।

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

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

প্রতিক্রিয়া

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

এপিআই ডিজাইন সম্পর্কে আমাদের বলুন

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

বাস্তবায়নে কোনো সমস্যা থাকলে রিপোর্ট করুন।

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

সমর্থন দেখান

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

সহায়ক লিঙ্ক

কৃতজ্ঞতা স্বীকার

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

performance.measureUserAgentSpecificMemory() এবং পুরোনো performance.memory API-এর মধ্যে পার্থক্য কী?