এক্সটেনসিবিলিটি API-এর মাধ্যমে আপনার পারফর্ম্যান্স ডেটা কাস্টমাইজ করা

Andrés Olivares

Sofia Emelianova

এক নজরে

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

আপনার কাস্টম পরিমাপ ও ইভেন্ট ইনজেক্ট করার মাধ্যমে, আপনি পরিচিত পারফর্ম্যান্স প্যানেলের মধ্যে মানানসই ভিজ্যুয়ালাইজেশন তৈরি করতে পারবেন। আপনার ফ্রেমওয়ার্কের কম্পোনেন্ট লাইফসাইকেল ইভেন্ট স্ট্যান্ডার্ড ব্রাউজার পারফর্ম্যান্স মেট্রিক্সের সাথে দেখা অথবা ব্রাউজারের রেন্ডারিং পাইপলাইনের সাথে নিখুঁত সিঙ্ক করে আপনার কাস্টম রেন্ডারিং ইঞ্জিনের এক্সিকিউশন ফ্লো ট্র্যাক করার কথা কল্পনা করুন।

এই API এটি করার জন্য দুটি পদ্ধতি অফার করে:

১. console.timeStamp API (DevTools-এর জন্য এক্সটেন্ড করা)

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

২. User Timings API (performance.mark এবং performance.measure ব্যবহার করে)

এই API আগে থেকে থাকা User Timings API-কে কাজে লাগায়। এটি ব্রাউজারের ইন্টার্নাল পারফর্ম্যান্স টাইমলাইনে এন্ট্রি যোগ করে, যার ফলে আরও বিশ্লেষণ করা এবং অন্যান্য পারফর্ম্যান্স টুলের সাথে ইন্টিগ্রেট করা যায়।

প্রধান সুবিধা

দুটি API-তে এগুলি উপলভ্য:

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

আপনার প্রয়োজন অনুযায়ী সঠিক API বেছে নেওয়া:

• console.timeStamp API:

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

• ব্যবহারকারীর টাইমিং API (performance.mark, performance.measure):

  • প্রতিটি এন্ট্রির সাথে অতিরিক্ত ডেটা স্টোর করার প্রয়োজন হলে এবং আপনি আগে থেকেই User Timings API ব্যবহার করলে এটি ব্যবহার করুন।
  • আপনার পারফর্ম্যান্স এন্ট্রির সাথে রিচ ডেটা (টুলটিপ, বিস্তারিত প্রপার্টি) যোগ করতে হবে।
  • আপনি নির্দিষ্ট মুহূর্ত হাইলাইট করার জন্য ভিজ্যুয়াল মার্কার যোগ করতে চান।
  • আরও বিস্তারিত বিশ্লেষণ বা অন্যান্য টুলের জন্য, আপনাকে শুধু DevTools-এ নয়, ব্রাউজারের ইন্টার্নাল পারফর্ম্যান্স টাইমলাইনেও ডেটা উপলভ্য করতে হবে।
  • আপনি আগে থেকেই User Timings API সম্পর্কে জানেন বা ব্যবহার করছেন।

console.timeStamp-এর সাথে আপনার ডেটা ইনজেক্ট করুন

console.timeStamp API-কে আরও উন্নত করা হয়েছে যাতে ন্যূনতম ওভারহেড সহ পারফর্ম্যান্স প্যানেলে কাস্টম টাইমিং এন্ট্রি তৈরি করা যায়, বিশেষ করে যখন DevTools কোনও ট্রেস রেকর্ড করছে না।

console.timeStamp(label: string, start?: string|number, end?: string|number, trackName?: string, trackGroup?: string, color?: DevToolsColor);

• label:

  টাইমিং এন্ট্রির লেবেল।

• start (ঐচ্ছিক):

  • স্ট্রিং হিসেবে সংজ্ঞায়িত করা হলে: আগে রেকর্ড করা টাইমস্ট্যাম্পের নাম (console.timeStamp(timeStampName) ব্যবহার করে)।

  • সংখ্যা হিসেবে সংজ্ঞায়িত করা হলে: Performance.timeOrigin-এর সাপেক্ষে মিলিসেকেন্ডে একটি টাইমস্ট্যাম্প (যেমন, performance.now()-এর সাথে নেওয়া) যা টাইমিং এন্ট্রির শুরুর সময়কে দেখায়।

  • অনির্ধারিত থাকলে, বর্তমান সময়কে শুরুর সময় হিসেবে ব্যবহার করা হয়।

• end:

  • স্ট্রিং হিসেবে সংজ্ঞায়িত করা হলে: আগে রেকর্ড করা টাইমস্ট্যাম্পের নাম।

  • সংখ্যা হিসেবে উল্লেখ করা হলে: Performance.timeOrigin-এর সাপেক্ষে মিলিসেকেন্ডে একটি টাইমস্ট্যাম্প (যেমন, performance.now()-এর সাথে নেওয়া) যা টাইমিং এন্ট্রির শেষ সময় দেখায়।

  • উল্লেখ করা না থাকলে, বর্তমান সময়কে শেষ সময় হিসেবে ব্যবহার করা হয়।

• trackName:

  কাস্টম ট্র্যাকের নাম।

• trackGroup:

  ট্র্যাক গ্রুপের নাম।

• color:

  এন্ট্রির রঙ।

User Timings API-এর মাধ্যমে আপনার ডেটা ইনজেক্ট করুন

কাস্টম ডেটা ইনজেক্ট করতে, performance.mark এবং performance.measure পদ্ধতির detail প্রপার্টির মধ্যে একটি devtools অবজেক্ট অন্তর্ভুক্ত করুন। এই devtools অবজেক্টের স্ট্রাকচার নির্ধারণ করে যে পারফর্ম্যান্স প্যানেলে আপনার ডেটা কীভাবে দেখানো হবে।

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

• কোনও টাস্ক বা প্রসেসের সময়সীমা পরিমাপ করতে performance.measure ব্যবহার করুন। আপনি detail প্রপার্টির মধ্যে devtools অবজেক্ট অন্তর্ভুক্ত করলে, পারফর্ম্যান্স প্যানেল কাস্টম ট্র্যাকে টাইমলাইনে কাস্টম পরিমাপ এন্ট্রি দেখায়। আপনি যদি performance.measure তৈরি করার জন্য রেফারেন্স পয়েন্ট হিসেবে performance.mark ব্যবহার করেন, তাহলে performance.mark কলে devtools অবজেক্ট অন্তর্ভুক্ত করার প্রয়োজন নেই।

devtools অবজেক্ট

এইসব ধরন বিভিন্ন এক্সটেনশন ফিচারের জন্য devtools অবজেক্টের গঠন নির্ধারণ করে:

type DevToolsColor =
  "primary" | "primary-light" | "primary-dark" |
  "secondary" | "secondary-light" | "secondary-dark" |
  "tertiary" | "tertiary-light" | "tertiary-dark" |
  "error";

interface ExtensionTrackEntryPayload {
  dataType?: "track-entry"; // Defaults to "track-entry"
  color?: DevToolsColor;    // Defaults to "primary"
  track: string;            // Required: Name of the custom track
  trackGroup?: string;      // Optional: Group for organizing tracks
  properties?: [string, string][]; // Key-value pairs for detailed view
  tooltipText?: string;     // Short description for tooltip
}

interface ExtensionMarkerPayload {
  dataType: "marker";       // Required: Identifies as a marker
  color?: DevToolsColor;    // Defaults to "primary"
  properties?: [string, string][]; // Key-value pairs for detailed view
  tooltipText?: string;     // Short description for tooltip
}

টাইমলাইনে আপনার ডেটা দেখুন

টাইমলাইনে আপনার কাস্টম ডেটা দেখতে, পারফর্ম্যান্স প্যানেলে, সেটিং চালু আছে কিনা তা নিশ্চিত করুন: সেটিংস ক্যাপচার সেটিংস > check_box কাস্টম ট্র্যাক দেখুন।

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

কোডের উদাহরণ

উপলভ্য প্রতিটি মেকানিজম ব্যবহার করে পারফর্ম্যান্স প্যানেলে আপনার নিজস্ব ডেটা যোগ করার জন্য API কীভাবে ব্যবহার করবেন তার কয়েকটি উদাহরণ এখানে দেওয়া হল।

console.timeStamp API-এর উদাহরণ:

// Take a start timestamp
const start = performance.now();

// Measure duration from start to now
console.timeStamp("measure 1", start, undefined, "My Track", "My Group", "primary-light");

// Take an end timestamp
const end = performance.now();

// Measure duration from start to end
console.timeStamp("measure 2", start, end, "My Track", "My Group", "secondary-dark");

এর ফলে পারফর্ম্যান্স টাইমলাইনে নিম্নলিখিত কাস্টম ট্র্যাক এন্ট্রি তৈরি হয়:

ব্যবহারকারীর টাইমিং API-এর উদাহরণ:

পারফর্ম্যান্স টাইমলাইনে নিম্নলিখিত বিষয়গুলি কীভাবে যোগ করতে হয় তা কোডের উদাহরণ থেকে পরবর্তী বিভাগে দেখুন:

• টাইমলাইনে কাস্টম ট্র্যাক ও এন্ট্রি
• টাইমিং ট্র্যাকের মার্কার

কাস্টম ট্র্যাক ও এন্ট্রি

কাস্টম ট্র্যাক তৈরি করুন এবং কাস্টম ট্র্যাকে আপনার পারফর্ম্যান্স ডেটা ভিজ্যুয়ালাইজ করতে এন্ট্রি দিয়ে সেগুলি পূরণ করুন। যেমন:

// Mark used to represent the start of the image processing task
// The start time is defaulted to now
const imageProcessinTimeStart = performance.now();

// ... later in your code

// Track entry representing the completion of image processing
// with additional details and a tooltip
// The start time is a marker from earlier
// The end time is defaulted to now
performance.measure("Image Processing Complete", {
  start: imageProcessinTimeStart,
  detail: {
    devtools: {
      dataType: "track-entry",
      track: "Image Processing Tasks",
      trackGroup: "My Tracks", // Group related tracks together
      color: "tertiary-dark",
      properties: [
        ["Filter Type", "Gaussian Blur"],
        ["Resize Dimensions", "500x300"]
      ],
      tooltipText: "Image processed successfully"
    }
  }
});

এর ফলে পারফর্ম্যান্স টাইমলাইনে নিম্নলিখিত কাস্টম ট্র্যাক এন্ট্রি দেখা যায়, সাথে এর টুলটিপ টেক্সট ও প্রপার্টিও থাকে:

মার্কার

সব ট্র্যাক জুড়ে কাস্টম মার্কারের সাহায্যে টাইমলাইনে নির্দিষ্ট উল্লেখযোগ্য স্থান ভিজ্যুয়ালি হাইলাইট করুন। যেমন:

// Marker indicating when the processed image was uploaded
performance.mark("Image Upload", {
  detail: {
    devtools: {
      dataType: "marker",
      color: "secondary",
      properties: [
        ["Image Size", "2.5MB"],
        ["Upload Destination", "Cloud Storage"]
      ],
      tooltipText: "Processed image uploaded"
    }
  }
});

এর ফলে টাইমিং ট্র্যাকে নিম্নলিখিত মার্কার দেখা যায়, সাথে টুলটিপ টেক্সট ও প্রপার্টিও থাকে: