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

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

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

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

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

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

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

উৎস

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

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

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

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

Web Performance Community Group এবং Chrome টিম performance.measureUserAgentSpecificMemory() নিয়ে আপনার চিন্তাভাবনা এবং অভিজ্ঞতার কথা শুনতে চাই।

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

API সম্পর্কে এমন কিছু আছে যা প্রত্যাশিত হিসাবে কাজ করে না? অথবা আপনার ধারণা বাস্তবায়ন করতে হবে এমন বৈশিষ্ট্য অনুপস্থিত আছে? Performance.measureUserAgentSpecificMemory() GitHub রেপোতে একটি বিশেষ সমস্যা ফাইল করুন বা বিদ্যমান সমস্যাটিতে আপনার চিন্তাভাবনা যোগ করুন।

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

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

সমর্থন দেখান

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

সহায়ক লিঙ্ক

স্বীকৃতি

Domenic Denicola, Yoav Weiss, Mathias Bynens API ডিজাইন পর্যালোচনার জন্য এবং Dominik Inführ, Hannes Payer, Kentaro Hara, Michael Lippautz কে Chrome-এ কোড পর্যালোচনার জন্য অনেক ধন্যবাদ। আমি Per Parker, Philipp Weis, Olga Belomestnykh, Matthew Bolohan, এবং Neil Mckay কে মূল্যবান ব্যবহারকারী প্রতিক্রিয়া প্রদান করার জন্য ধন্যবাদ জানাই যা API-কে ব্যাপকভাবে উন্নত করেছে।

আনস্প্ল্যাশে হ্যারিসন ব্রডবেন্টের হিরো ছবি