এক্সটেনসিবিলিটি API এর সাথে আপনার কর্মক্ষমতা ডেটা কাস্টমাইজ করুন

আন্দ্রেস অলিভারেস
Andrés Olivares
সোফিয়া ইমেলিয়ানোভা
Sofia Emelianova

ওভারভিউ

পারফরম্যান্স প্যানেল পারফরম্যান্স এক্সটেনসিবিলিটি API সমর্থন করে, পারফরম্যান্স টাইমলাইনে কাস্টম ডেটা যোগ করতে সক্ষম করে। এটি আপনাকে আপনার পরিমাপ এবং ইভেন্টগুলি সরাসরি পারফরম্যান্স টাইমলাইনে একটি কাস্টম ট্র্যাক হিসাবে বা টাইমিংস ট্র্যাকে ইনজেক্ট করতে দেয়৷ পারফরম্যান্সের আরও বিস্তৃত বোঝার জন্য কাস্টম ইন্সট্রুমেন্টেশন সহ ফ্রেমওয়ার্ক, লাইব্রেরি এবং জটিল অ্যাপ্লিকেশনগুলির বিকাশকারীদের জন্য এটি কার্যকর হতে পারে।

এই API দুটি স্বতন্ত্র প্রক্রিয়া অফার করে:

1. ব্যবহারকারীর সময় API ( performance.mark এবং performance.measure ব্যবহার করে)

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

2. console.timeStamp API (DevTools-এর জন্য প্রসারিত)

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

মূল বৈশিষ্ট্য

উভয় APIই অফার করে:

  • কাস্টম ট্র্যাক: কাস্টম ট্র্যাক এবং ট্র্যাক গ্রুপে এন্ট্রি যোগ করুন।
  • এন্ট্রি : ইভেন্ট বা পরিমাপ প্রতিনিধিত্বকারী এন্ট্রিগুলির সাথে ট্র্যাকগুলি তৈরি করুন৷
  • রঙ কাস্টমাইজেশন: চাক্ষুষ পার্থক্য জন্য রঙ-কোড এন্ট্রি.

মূল পার্থক্য এবং কখন প্রতিটি API ব্যবহার করবেন:

  • ব্যবহারকারীর সময় API ( performance.mark , performance.measure ):
    • পারফরম্যান্স প্যানেল এবং ব্রাউজারের অভ্যন্তরীণ কর্মক্ষমতা টাইমলাইনে উভয় এন্ট্রি যোগ করে।
    • টুলটিপ এবং বিস্তারিত বৈশিষ্ট্য সহ সমৃদ্ধ ডেটার জন্য অনুমতি দেয়।
    • মার্কার যোগ করার অনুমতি দেয়: ভিজ্যুয়াল মার্কার সহ টাইমলাইনে নির্দিষ্ট মুহূর্ত হাইলাইট করুন।
    • বিস্তারিত কর্মক্ষমতা বিশ্লেষণের জন্য উপযুক্ত এবং যখন অন্যান্য কর্মক্ষমতা সরঞ্জামের সাথে একীকরণের প্রয়োজন হয়।
    • আপনি যখন প্রতিটি এন্ট্রির সাথে অতিরিক্ত ডেটা সঞ্চয় করতে হবে এবং যখন আপনি ইতিমধ্যে ব্যবহারকারীর সময় API ব্যবহার করছেন তখন ব্যবহার করুন৷
  • console.timeStamp API:
    • শুধুমাত্র কর্মক্ষমতা প্যানেলে এন্ট্রি যোগ করে।
    • বিশেষ করে উৎপাদন পরিবেশে উল্লেখযোগ্যভাবে উচ্চ কর্মক্ষমতা অফার করে।
    • গরম পথ এবং কর্মক্ষমতা-সমালোচনামূলক কোড যন্ত্রের জন্য আদর্শ।
    • টুলটিপ বা বৈশিষ্ট্যের মতো কোনো অতিরিক্ত ডেটা যোগ করা যাবে না।
    • যখন পারফরম্যান্স ওভারহেড একটি প্রাথমিক উদ্বেগ হয় তখন ব্যবহার করুন এবং আপনাকে দ্রুত ইন্সট্রুমেন্ট কোড করতে হবে।

ইউজার টাইমিং এপিআই দিয়ে আপনার ডেটা ইনজেক্ট করুন

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

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

  • একটি কাজ বা প্রক্রিয়ার সময়কাল পরিমাপ করতে performance.measure ব্যবহার করুন। আপনি যখন detail সম্পত্তির মধ্যে একটি devtools অবজেক্ট অন্তর্ভুক্ত করেন, তখন পারফরম্যান্স প্যানেল একটি কাস্টম ট্র্যাকের টাইমলাইনে কাস্টম পরিমাপ এন্ট্রি দেখায়। আপনি যদি performance.mark একটি রেফারেন্স পয়েন্ট হিসাবে ব্যবহার করেন একটি performance.measure তৈরি করতে, তাহলে আপনাকে 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
}

console.timeStamp দিয়ে আপনার ডেটা ইনজেক্ট করুন

সর্বনিম্ন ওভারহেড সহ পারফরম্যান্স প্যানেলে কাস্টম টাইমিং এন্ট্রি তৈরির অনুমতি দেওয়ার জন্য console.timeStamp API প্রসারিত করা হয়েছে।

console.timeStamp(label: string, start?: string, end?: string, trackName?: string, trackGroup?: string, color?: DevToolsColor);
  • label : টাইমিং এন্ট্রির জন্য লেবেল।
  • start : পূর্বে রেকর্ড করা টাইমস্ট্যাম্পের নাম ( console.timeStamp(timeStampName) ব্যবহার করে)। অনির্ধারিত হলে, বর্তমান সময় ব্যবহার করা হয়।
  • end : পূর্বে রেকর্ড করা টাইমস্ট্যাম্পের নাম। অনির্ধারিত হলে, বর্তমান সময় ব্যবহার করা হয়।
  • trackName : কাস্টম ট্র্যাকের নাম।
  • trackGroup : ট্র্যাক গ্রুপের নাম।
  • color : প্রবেশের রঙ।

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

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

পারফরম্যান্স প্যানেলের 'ক্যাপচার সেটিংস'-এ 'এক্সটেনশন ডেটা' চেকবক্স।

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

কোড উদাহরণ

প্রতিটি উপলব্ধ প্রক্রিয়া ব্যবহার করে পারফরম্যান্স প্যানেলে আপনার নিজস্ব ডেটা যুক্ত করতে API ব্যবহার করার কয়েকটি উদাহরণ এখানে রয়েছে।

ব্যবহারকারীর সময় API উদাহরণ:

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

কাস্টম ট্র্যাক এবং এন্ট্রি

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

// Mark used to represent the start of the image processing task
// The start time is defaulted to now
performance.mark("Image Processing Start");

// ... 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: "Image Processing Start",
  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"
    }
  }
});

এটি টুলটিপ টেক্সট এবং বৈশিষ্ট্য সহ টাইমিংস ট্র্যাকে নিম্নলিখিত মার্কারের ফলাফল দেয়:

টাইমিং ট্র্যাকের একটি কাস্টম মার্কার৷

console.timeStamp API উদাহরণ:

// Record a start timestamp
console.timeStamp("start");

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

// Record an end timestamp
console.timeStamp("end");

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

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

console.timeStamp API-এর সাথে কাস্টম এন্ট্রি সহ একটি কাস্টম ট্র্যাক যোগ করা হয়েছে৷